Skip to content

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
1Thomas KaoCreatorJul 01, 202470.3k
2Aleksandar RadicTeam AdminJul 01, 202452.4k
3Maria MiTeam AdminJul 01, 202420.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
70.3k
2
A
Aleksandar Radic
Team Admin
52.4k
3
M
Maria Mi
Team Admin
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
1Thomas KaoCreator70.3k
2Aleksandar RadicTeam Admin52.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
1Thomas KaoCreator70.3k
2Aleksandar RadicTeam Admin52.4k
3Maria MiTeam Admin20.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
1Thomas KaoCreator70.3k
2Aleksandar RadicTeam Admin52.4k
3Maria MiTeam Admin20.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
1Thomas KaoCreator70.3k
2Aleksandar RadicTeam Admin52.4k
3Maria MiTeam Admin20.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
1Thomas KaoCreator70.3k
2Aleksandar RadicTeam Admin52.4k
3Maria MiTeam Admin20.3k
4Jane SmithViewer15.2k
5John DoeCreator45.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.