Fill a list's loading, empty, error and success states

import { Spinner, Text } from "@zedtech/zedkit-ui";
<Spinner label="Loading invoices" />
<Text>Loading invoices</Text>

import { Button, EmptyState } from "@zedtech/zedkit-ui";
<EmptyState
  title="No invoices"
  description="Create an invoice to send to a client."
  actions={<Button>New invoice</Button>}
/>

import { Button, ErrorState } from "@zedtech/zedkit-ui";
<ErrorState
  title="Could not load invoices"
  description="Check your connection and try again."
  actions={<Button variant="outline">Try again</Button>}
/>

import { DataTable, createDataTableColumns } from "@zedtech/zedkit-ui";
const helper = createDataTableColumns<{ name: string; age: number }>();
const columns = [helper.accessor("name", { header: "Name" })];
<DataTable columns={columns} data={[{ name: "Ada", age: 36 }]} />