Data Table

A table displaying filterable, sortable data in rows and columns.

Anatomy

<DataTable columns={columns} data={data} />

Usage

The DataTable component provides advanced table functionality including sorting and custom column rendering. It’s built on top of TanStack Table and provides a simpler API for common use cases.

To create a data table, use the <DataTable> component with columns and data props.

ID	Name	Role	Last Active	Views
1	Thomas Kao	Creator	Jul 01, 2024	70.3k
2	Aleksandar Radic	Team Admin	Jul 01, 2024	52.4k
3	Maria Mi	Team Admin	Jul 01, 2024	20.3k

import { DataTable } from "stylus-ui/DataTable";

const data = [
  {
    id: 1,
    name: "Thomas Kao",
    role: "Creator",
    lastActive: "Jul 01, 2024",
    views: "70.3k",
  },
  {
    id: 2,
    name: "Aleksandar Radic",
    role: "Team Admin",
    lastActive: "Jul 01, 2024",
    views: "52.4k",
  },
  {
    id: 3,
    name: "Maria Mi",
    role: "Team Admin",
    lastActive: "Jul 01, 2024",
    views: "20.3k",
  },
];

const columns = [
  {
    accessorKey: "id",
    header: "ID",
  },
  {
    accessorKey: "name",
    header: "Name",
  },
  {
    accessorKey: "role",
    header: "Role",
  },
  {
    accessorKey: "lastActive",
    header: "Last Active",
  },
  {
    accessorKey: "views",
    header: "Views",
  },
];

export default () => <DataTable columns={columns} data={data} />;

Custom cell rendering

You can customize how each cell is rendered by providing a cell function in your column definition.

ID	Name	Role	Last Active	Views
1	T Thomas Kao	Creator	Jul 01, 2024	70.3k
2	A Aleksandar Radic	Team Admin	Jul 01, 2024	52.4k
3	M Maria Mi	Team Admin	Jul 01, 2024	20.3k

import { DataTable } from "stylus-ui/DataTable";
import { Avatar } from "stylus-ui/Avatar";

const data = [
  {
    id: 1,
    name: "Thomas Kao",
    role: "Creator",
    lastActive: "Jul 01, 2024",
    views: "70.3k",
  },
  {
    id: 2,
    name: "Aleksandar Radic",
    role: "Team Admin",
    lastActive: "Jul 01, 2024",
    views: "52.4k",
  },
  {
    id: 3,
    name: "Maria Mi",
    role: "Team Admin",
    lastActive: "Jul 01, 2024",
    views: "20.3k",
  },
];

const columns = [
  {
    accessorKey: "id",
    header: "ID",
  },
  {
    accessorKey: "name",
    header: "Name",
    cell: (props) => (
      <div className="flex items-center">
        <Avatar size="xs">{props.getValue()[0]}</Avatar>
        <span className="ml-2.5">{props.getValue()}</span>
      </div>
    ),
  },
  {
    accessorKey: "role",
    header: "Role",
  },
  {
    accessorKey: "lastActive",
    header: "Last Active",
    cell: (props) => (
      <time dateTime={props.getValue()}>{props.getValue()}</time>
    ),
  },
  {
    accessorKey: "views",
    header: "Views",
    cell: (props) => <div className="text-right">{props.getValue()}</div>,
  },
];

export default () => <DataTable columns={columns} data={data} />;

Custom header rendering

You can customize the headers of your table by providing a function that returns a React component.

ID	Name	Role	Views
1	Thomas Kao	Creator	70.3k
2	Aleksandar Radic	Team Admin	52.4k

import { DataTable } from "stylus-ui/DataTable";
import { TableHead } from "stylus-ui/Table";

const data = [
  {
    id: 1,
    name: "Thomas Kao",
    role: "Creator",
    views: "70.3k",
  },
  {
    id: 2,
    name: "Aleksandar Radic",
    role: "Team Admin",
    views: "52.4k",
  },
];

const CustomHeader = ({ title }) => (
  <TableHead className="bg-slate-50">{title}</TableHead>
);

const columns = [
  {
    accessorKey: "id",
    header: () => <CustomHeader title="ID" />,
  },
  {
    accessorKey: "name",
    header: () => <CustomHeader title="Name" />,
  },
  {
    accessorKey: "role",
    header: () => <CustomHeader title="Role" />,
  },
  {
    accessorKey: "views",
    header: () => <CustomHeader title="Views" />,
  },
];

export default () => <DataTable columns={columns} data={data} />;

Sortable columns

Make columns sortable by using the DataTableSortingHeader component.

ID	Name	Role	Views
1	Thomas Kao	Creator	70.3k
2	Aleksandar Radic	Team Admin	52.4k
3	Maria Mi	Team Admin	20.3k

import { DataTable, DataTableSortingHeader } from "stylus-ui/DataTable";

const data = [
  {
    id: 1,
    name: "Thomas Kao",
    role: "Creator",
    views: "70.3k",
  },
  {
    id: 2,
    name: "Aleksandar Radic",
    role: "Team Admin",
    views: "52.4k",
  },
  {
    id: 3,
    name: "Maria Mi",
    role: "Team Admin",
    views: "20.3k",
  },
];

const columns = [
  {
    accessorKey: "id",
    header: ({ column }) => (
      <DataTableSortingHeader column={column} title="ID" />
    ),
  },
  {
    accessorKey: "name",
    header: ({ column }) => (
      <DataTableSortingHeader column={column} title="Name" />
    ),
  },
  {
    accessorKey: "role",
    header: "Role",
  },
  {
    accessorKey: "views",
    header: ({ column }) => (
      <DataTableSortingHeader column={column} title="Views" />
    ),
  },
];

export default () => <DataTable columns={columns} data={data} />;

Empty state

The DataTable handles empty data arrays gracefully by displaying a “No data available” message.

ID	Name	Role
No data available

import { DataTable } from "stylus-ui/DataTable";

const columns = [
  {
    accessorKey: "id",
    header: "ID",
  },
  {
    accessorKey: "name",
    header: "Name",
  },
  {
    accessorKey: "role",
    header: "Role",
  },
];

export default () => <DataTable columns={columns} data={[]} />;

Row click handling

You can handle row clicks by providing an onRowClick callback. The callback receives the TanStack Table row object. Clicks on interactive elements (buttons, links, inputs, etc.) are automatically ignored.

ID	Name	Role	Views
1	Thomas Kao	Creator	70.3k
2	Aleksandar Radic	Team Admin	52.4k
3	Maria Mi	Team Admin	20.3k

import { DataTable } from "stylus-ui/DataTable";
import { useState } from "react";

const data = [
  {
    id: 1,
    name: "Thomas Kao",
    role: "Creator",
    views: "70.3k",
  },
  {
    id: 2,
    name: "Aleksandar Radic",
    role: "Team Admin",
    views: "52.4k",
  },
  {
    id: 3,
    name: "Maria Mi",
    role: "Team Admin",
    views: "20.3k",
  },
];

const columns = [
  {
    accessorKey: "id",
    header: "ID",
  },
  {
    accessorKey: "name",
    header: "Name",
  },
  {
    accessorKey: "role",
    header: "Role",
  },
  {
    accessorKey: "views",
    header: "Views",
  },
];

export default () => {
  const [selectedRow, setSelectedRow] = useState(null);

  return (
    <>
      <DataTable
        columns={columns}
        data={data}
        onRowClick={(row) => setSelectedRow(row.original)}
      />
      {selectedRow && (
        <div className="mt-4 rounded bg-blue-50 p-4">
          Selected: {selectedRow.name} ({selectedRow.role})
        </div>
      )}
    </>
  );
};

Custom row styling

You can apply custom styling to all rows using the rowClassName prop. This is useful for adding hover effects or other row-level styles.

ID	Name	Role	Views
1	Thomas Kao	Creator	70.3k
2	Aleksandar Radic	Team Admin	52.4k
3	Maria Mi	Team Admin	20.3k

import { DataTable } from "stylus-ui/DataTable";

const data = [
  {
    id: 1,
    name: "Thomas Kao",
    role: "Creator",
    views: "70.3k",
  },
  {
    id: 2,
    name: "Aleksandar Radic",
    role: "Team Admin",
    views: "52.4k",
  },
  {
    id: 3,
    name: "Maria Mi",
    role: "Team Admin",
    views: "20.3k",
  },
];

const columns = [
  {
    accessorKey: "id",
    header: "ID",
  },
  {
    accessorKey: "name",
    header: "Name",
  },
  {
    accessorKey: "role",
    header: "Role",
  },
  {
    accessorKey: "views",
    header: "Views",
  },
];

export default () => (
  <DataTable
    columns={columns}
    data={data}
    rowClassName="cursor-pointer hover:bg-blue-50"
    onRowClick={(row) => console.log("Clicked:", row.original)}
  />
);

Custom scroll area

You can customize the scroll behavior by passing props to the underlying ScrollArea component using scrollAreaProps. This is useful for controlling height, scrollbar visibility, and other scroll-related behavior.

ID	Name	Role	Views
1	Thomas Kao	Creator	70.3k
2	Aleksandar Radic	Team Admin	52.4k
3	Maria Mi	Team Admin	20.3k
4	Jane Smith	Viewer	15.2k
5	John Doe	Creator	45.8k

import { DataTable } from "stylus-ui/DataTable";
import { TableHead } from "stylus-ui/Table";

const data = [
  {
    id: 1,
    name: "Thomas Kao",
    role: "Creator",
    views: "70.3k",
  },
  {
    id: 2,
    name: "Aleksandar Radic",
    role: "Team Admin",
    views: "52.4k",
  },
  {
    id: 3,
    name: "Maria Mi",
    role: "Team Admin",
    views: "20.3k",
  },
  {
    id: 4,
    name: "Jane Smith",
    role: "Viewer",
    views: "15.2k",
  },
  {
    id: 5,
    name: "John Doe",
    role: "Creator",
    views: "45.8k",
  },
];

const columns = [
  {
    accessorKey: "id",
    header: "ID",
  },
  {
    accessorKey: "name",
    header: () => <TableHead className="min-w-[300px]">Name</TableHead>,
  },
  {
    accessorKey: "role",
    header: () => <TableHead className="min-w-[300px]">Role</TableHead>,
  },
  {
    accessorKey: "views",
    header: "Views",
  },
];

export default () => (
  <DataTable
    columns={columns}
    data={data}
    scrollAreaProps={{
      type: "always",
    }}
  />
);

API Reference

`DataTable`

Prop	Type	Default
`columns`	`ColumnDef<TData>[]`
`data`	`TData[]`
`onRowClick`	`(row: Row<TData>) => void`
`rowClassName`	`string`
`scrollAreaProps`	`ScrollAreaProps`

`ColumnDef`

The columns prop accepts an array of column definitions. Each column definition can include these properties:

Prop	Type	Default
`accessorKey`	`string`
`cell`	`(props: { getValue: () => any }) => ReactNode`
`header`	`string \| ((props: { column: Column }) => ReactNode)`

`DataTableSortingHeader`

A component for creating sortable column headers.

Prop	Type	Default
`className`	`string`
`column`	`Column<any>`
`title`	`string`

For more advanced usage, refer to the TanStack Table documentation.