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