DataTable

Reusable data table with loading and empty states.

datatabledisplay

Import

import { DataTable } from "@/components/ui";

Basic Usage

DataTable Preview

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Carol Williams	carol@example.com	Viewer

Code

tsx

const columns = [
  { key: "name", header: "Name" },
  { key: "email", header: "Email" },
  { key: "role", header: "Role" },
];

const data = [
  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" },
];

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

With Loading

Show loading state

1<DataTable
2  columns={columns}
3  data={data}
4  loading={isLoading}
5/>

Empty State

Custom empty message

1<DataTable
2  columns={columns}
3  data={[]}
4  emptyMessage="No users found. Create your first user to get started."
5/>

With Custom Cells

Render custom cell content

1const columns = [
2  { key: "name", header: "Name" },
3  {
4    key: "status",
5    header: "Status",
6    render: (row) => (
7      <StatusBadge status={row.status} label={row.statusLabel} />
8    ),
9  },
10  {
11    key: "actions",
12    header: "",
13    render: (row) => (
14      <DropdownMenu
15        trigger={<IconButton icon="MoreVertical" label="Actions" />}
16        items={[
17          { type: "item", label: "Edit", onClick: () => handleEdit(row) },
18          { type: "item", label: "Delete", destructive: true },
19        ]}
20      />
21    ),
22  },
23];

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring