Data Table

The Data Table component allows for easy display of tabular data with options for sorting and row interaction.

Usage & Examples

Default

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

default.tsx

 const sampleData = [
    { id: 1, name: "Alice", score: 91, passed: true },
    { id: 2, name: "Bob", score: 75, passed: true },
    { id: 3, name: "Charlie", score: 58, passed: false },
    { id: 4, name: "Dana", score: 84, passed: true },
  ];

  <DataTable
            data={sampleData}
            columns={[
              { key: "id", label: "ID", sortable: true },
              { key: "name", label: "Name", sortable: true },
              { key: "score", label: "Score", sortable: true },
              {
                key: "passed",
                label: "Status",
                sortable: false,
                render: (value: unknown) => (value ? "Pass" : "Fail"),
              },
            ]}
            theme="primary"
            striped={true}
          />

Props API

Data Table props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	Accessible description reference for the table. Useful for tying helper or instructional text to the table.
`aria-label`	`string`	No	aria	`—`	Accessible label for screen readers. Use this when there is no visible caption or heading tied to the table.
`aria-labelledby`	`string`	No	aria	`—`	Accessible labelledby reference for the table. Prefer this when a visible heading already labels the table.
`bulkActions`	`((selectedKeys: Array<string \| number>, selectedRows: T[]) => ReactNode)`	No	events	`—`	Optional actions shown only when one or more rows are selected.
`bulkToolbarClassName`	`string`	No	props	`—`	Optional class name for the bulk action toolbar.
`caption`	`string`	No	props	`"Data table"`	Optional visible or screen-reader-only caption text for the table. A table caption is the preferred built-in table label.
`cellClassName`	`((value: unknown, row: T, column: Column<T>, rowIndex: number) => string)`	No	events	`—`	Optional dynamic class name for each cell.
`className`	`string`	No	styling	`—`	Optional class name for the table wrapper.
`colCount`	`number`	No	props	`—`	Total column count override. Helpful when rendering dynamic or grouped columns in advanced cases.
`columnMenuClassName`	`string`	No	props	`—`	Optional class name for the column visibility menu.
`columnOrder`	`(keyof T)[]`	No	props	`—`	Controlled column order.
`columnPinning`	`boolean`	No	props	`false`	Enables column pin/unpin controls.