Data Table

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={[]} />;

API Reference

DataTable

Prop	Type	Default
columns	ColumnDef<TData>[]
data	TData[]

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.