Table

Sku	Name	Stock
SM13	[Sample] Smith Journal 13	25
DPB	[Sample] Dustpan & Brush	34
OFSUC	[Sample] Utility Caddy	45
CLC	[Sample] Canvas Laundry Cart	2
CGLD	[Sample] Laundry Detergent	29

Edit the code below to see your changes live!

<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
/>

<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
/>

API

Table

Prop Name	Type	Default	Description
`columns` *	`Columns[]`		See below for usage.
`items` *	`any[]`		The array of items to display.
`itemName`	`string`		Item name displayed on the table actions section.
`keyField`	`string`	`id`	Unique property identifier for items.
`pagination`	`Pagination`		See pagination component for details.
`selectable`	`Selectable`		See below for usage.
`sortable`	`Sortable`		See below for usage.
`stickyHeader`	`boolean`		Makes the table header and actions fixed.
`headerless`	`boolean`	`false`	Hides header row with all table headers. Headers are only visually hidden to keep with accessibility best practices.
`actions`	`React.ComponentType<any>`		Component to render custom actions.

Props ending with * are required

Table[Columns]

Prop Name	Type	Default	Description
`render` *	`React.ComponentType<Item>`		Component used to render a column.
`header` *	`string`		Header title.
`hideHeader`	`boolean`	`false`	Hides individual header values in the header row. Header is only visually hidden to keep with accessibility best practices.
`align`	`left` \| `center` \| `right`	`left`	Sets alignment for column.
`hash` *	`string`		Unique identifier for column.
`isSortable`	`boolean`	`false`	Defines if the column is sortable.
`verticalAlign`	`top` \| `middle`	`top`	Sets vertical alignment for column (td only).
`width`	`string` \| `number`		Sets column width.
`withPadding`	`boolean`		Toggles padding on td elements.

Props ending with * are required

Table[Selectable]

Prop Name	Type	Default	Description
`selectedItems` *	`Item[]`		Defines which items are selected.
`onSelectionChange` *	`(selectedItems: Item[]) => void`		Function to be called when item selection changes.

Props ending with * are required

Table[Sortable]

Prop Name	Type	Description
`direction` *	`ASC` \| `DESC`	Defines sort direction.
`columnHash`	`string`	Defines which column is currently sorted.
`onSort` *	`(columnHash: string, direction: TableSortDirection, column: TableColumn<T>): void;`	Function to be called when a sortable header is clicked.

Props ending with * are required

Usage with selectable

Products

Sku	Name	Stock
ABS	[Sample] Able Brewing System	225
CC3C	[Sample] Chemex Coffeemaker 3 cup	49
CGLD	[Sample] Laundry Detergent	29
CLC	[Sample] Canvas Laundry Cart	2
DPB	[Sample] Dustpan & Brush	34
OCG	[Sample] Oak Cheese Grater	34
OFSUC	[Sample] Utility Caddy	45

Edit the code below to see your changes live!

function Example() {
  const [selectedItems, setSelectedItems] = useState<Item[]>([]);

  return (
    <Table
      keyField="sku"
      columns={columns}
      items={data}
      itemName="Products"
      selectable={{
        selectedItems,
        onSelectionChange: setSelectedItems,
      }}
    />
  );
}

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

Usage with pagination

7 Products

Sku	Name	Stock

Edit the code below to see your changes live!

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 [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
    />
  );
}

Usage with sortable

7 Products

Sku	Name	Stock
ABS	[Sample] Able Brewing System	225
CC3C	[Sample] Chemex Coffeemaker 3 cup	49
CGLD	[Sample] Laundry Detergent	29
CLC	[Sample] Canvas Laundry Cart	2
DPB	[Sample] Dustpan & Brush	34
OCG	[Sample] Oak Cheese Grater	34
OFSUC	[Sample] Utility Caddy	45

Edit the code below to see your changes live!

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,
      }}
    />
  );
}

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,
      }}
    />
  );
}

Customization Example

Sku	Name	Stock
SM13	[Sample] Smith Journal 13	25
DPB	[Sample] Dustpan & Brush	34
OFSUC	[Sample] Utility Caddy	45
CLC	[Sample] Canvas Laundry Cart	2
CGLD	[Sample] Laundry Detergent	29

Edit the code below to see your changes live!

<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 },
  ]}
/>

<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 },
  ]}
/>

Beta