Table

import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Badge,
} from "@nili/ui"

export function Example() {
  return (
    <Table label="Invoices">
      <TableHeader>
        <TableRow>
          <TableHead>Customer</TableHead>
          <TableHead align="end">Amount</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.id}>
            <TableCell header>{row.customer}</TableCell>
            <TableCell align="end" numeric>{row.amount}</TableCell>
            <TableCell>
              <Badge appearance="light" color="green" dot>Paid</Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

import { Table } from "@nili/ui"

export function Example() {
  return (
    <>
      <Table size="xl" label="Invoices">…</Table>
      <Table size="lg" caption={t('sizes.caption')}>…</Table>
    </>
  )
}

import { Table, TableCell } from "@nili/ui"

export function Example() {
  return (
    <TableRow>
      <TableCell priority="leading" header>Acme Co.</TableCell>
      <TableCell priority="regular">billing@acme.com</TableCell>
      <TableCell priority="passive">Updated 2 days ago</TableCell>
      <TableCell priority="none">
        <CompactButton aria-label="More"><Icon icon={RiMore2Fill} /></CompactButton>
      </TableCell>
    </TableRow>
  )
}

import { TableHead } from "@nili/ui"

export function Example() {
  const [sort, setSort] = useState({ key: "amount", direction: "desc" })

  return (
    <TableHead
      align="end"
      sortable
      sortDirection={sort.key === "amount" ? sort.direction : null}
      sortLabel={t('sorting.byAmount')}
      onSort={(direction) => setSort({ key: "amount", direction })}
    >
      Amount
    </TableHead>
  )
}

import { Table, TableRow, TableHead, TableCell, Checkbox } from "@nili/ui"

export function Example() {
  return (
    <Table label="Invoices" stickyHeader>
      <TableHeader sticky>
        <TableRow>
          <TableHead state="empty"><Checkbox aria-label="Select all" /></TableHead>
          <TableHead>Customer</TableHead>
        </TableRow>
      </TableHeader>

      <TableBody>
        <TableRow selected interactive>
          <TableCell priority="none"><Checkbox aria-label="Select row" checked /></TableCell>
          <TableCell header>Globex</TableCell>
        </TableRow>
      </TableBody>

      <TableFooter>
        <TableRow>
          <TableCell colSpan={2}>4 invoices</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}