<Table
  columns={[
    { header: 'Sku', hash: 'sku', render: ({ sku }) => sku },
    { header: 'Name', hash: 'name', render: ({ name }) => name },
    { header: 'Stock', hash: 'stock', render: ({ stock }) => stock },
  ]}
  items={[
    { sku: 'SM13', name: '[Sample] Smith Journal 13', stock: 25 },
    { sku: 'DPB', name: '[Sample] Dustpan & Brush', stock: 34 },
    { sku: 'OFSUC', name: '[Sample] Utility Caddy', stock: 45 },
    { sku: 'CLC', name: '[Sample] Canvas Laundry Cart', stock: 2 },
    { sku: 'CGLD', name: '[Sample] Laundry Detergent', stock: 29 },
  ]}
  stickyHeader
/>

function Example() {
  const [selectedItems, setSelectedItems] = useState<Item[]>([]);
  return (
    <Table
      keyField="sku"
      columns={columns}
      items={data}
      itemName="Products"
      selectable={{
        selectedItems,
        onSelectionChange: setSelectedItems,
      }}
    />
  );
}

function Example() {
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPageOptions] = useState([5, 10, 20, 30]);
  const [itemsPerPage, setItemsPerPage] = useState(5);
  const [currentItems, setCurrentItems] = useState<Item[]>([]);
  const onItemsPerPageChange = (newRange) => {
    setCurrentPage(1);
    setItemsPerPage(newRange);
  };
  useEffect(() => {
    const maxItems = currentPage * itemsPerPage;
    const lastItem = Math.min(maxItems, data.length);
    const firstItem = Math.max(0, maxItems - itemsPerPage);
    setCurrentItems(data.slice(firstItem, lastItem));
  }, [currentPage, itemsPerPage]);
  return (
    <Table
      keyField="sku"
      columns={columns}
      items={currentItems}
      itemName="Products"
      pagination={{
        currentPage,
        totalItems: data.length,
        onPageChange: setCurrentPage,
        itemsPerPageOptions,
        onItemsPerPageChange,
        itemsPerPage,
      }}
      stickyHeader
    />
  );
}

function Example() {
  const [items, setItems] = useState(data);
  const [columnHash, setColumnHash] = useState('');
  const [direction, setDirection] = useState<'ASC' | 'DESC'>('ASC');
  const onSort = (newColumnHash, newDirection) => {
    setColumnHash(newColumnHash);
    setDirection(newDirection);
    setItems((currentItems) => sort(currentItems, newColumnHash, newDirection));
  };
  return (
    <Table
      keyField="sku"
      columns={[
        { header: 'Sku', hash: 'sku', render: ({ sku }) => sku, isSortable: true },
        { header: 'Name', hash: 'name', render: ({ name }) => name, isSortable: true },
        { header: 'Stock', hash: 'stock', render: ({ stock }) => stock, isSortable: true },
      ]}
      items={items}
      itemName="Products"
      sortable={{
        columnHash,
        direction,
        onSort,
      }}
    />
  );
}

<>
  <TableFigure>
    <Table
      columns={[
        { header: 'Sku', hash: 'sku', render: ({ sku }) => sku },
        { header: 'Name', hash: 'name', render: ({ name }) => name },
        { header: 'Description', hash: 'description', render: ({ description }) => description },
      ]}
      items={[
        {
          sku: 'SM13',
          name: '[Sample] Smith Journal 13',
          description:
            'Volume 13 of Smith Journal is crammed with more than its fair share of sharp minds. Top of the list would have to be Solomon Shereshevsky, who remembered every single thing he’d ever come across – a great skill to have when it came to party tricks, but enough to send him crackers. And then there’s Delbert Trew who spends more time than you can imagine thinking about something very sharp indeed: barbed wire. You can’t go past Samuel Morse, either, who was a famous portrait painter before he gave his name to the code he invented. What a genius! And we’re pretty taken with Noel Turner, who was smart enough to get around some pretty weird New Zealand laws to invent a car that, for a while, was a huge success. As well, you’ll find stories on a cross-dressing spy, a couple of Sydney nerds who revolutionised modern music, court illustration, big wheels, the dubious science of controlling the weather and a whole stack of other stuff.',
        },
        {
          sku: 'DPB',
          name: '	[Sample] Dustpan & Brush',
          description:
            'A seemingly simple dustpan with a few features to make life easier. The arch and length of the dustpan eases cleanup, the wood turned handle provides firm grip and the rubber liner along the edge of the scoop will retrieve small crumbs with a single swipe. A key ring at the top makes storage a cinch - hang it off a broom closet hook when not in use.',
        },
      ]}
      stickyHeader
    />
    <Small marginTop="xSmall">Helpful text to be grouped with the table</Small>
  </TableFigure>
</>

<Table
  columns={[
    { header: 'Sku', hash: 'sku', render: ({ sku }) => sku },
    {
      header: 'Name',
      hash: 'name',
      render: ({ name }) => name,
      align: 'center',
    },
    {
      header: 'Stock',
      hash: 'stock',
      render: ({ stock }) =>
        stock > 5 ? <Text color="success">{stock}</Text> : <Text color="danger">{stock}</Text>,
    },
  ]}
  items={[
    { sku: 'SM13', name: '[Sample] Smith Journal 13', stock: 25 },
    { sku: 'DPB', name: '[Sample] Dustpan & Brush', stock: 34 },
    { sku: 'OFSUC', name: '[Sample] Utility Caddy', stock: 45 },
    { sku: 'CLC', name: '[Sample] Canvas Laundry Cart', stock: 2 },
    { sku: 'CGLD', name: '[Sample] Laundry Detergent', stock: 29 },
  ]}
/>

function Example() {
  const [items, setItems] = useState(data);
  const onDragEnd = (from: number, to: number) => setItems((currentItems) => dragEnd(currentItems, from, to));
  return (
    <Table
      keyField="sku"
      columns={[
        { header: 'Sku', hash: 'sku', render: ({ sku }) => sku, isSortable: true },
        { header: 'Name', hash: 'name', render: ({ name }) => name, isSortable: true },
        { header: 'Stock', hash: 'stock', render: ({ stock }) => stock, isSortable: true },
      ]}
      items={items}
      itemName="Products"
      onRowDrop={onDragEnd}
    />
  );
}