Data Table

Installation

npx shadcn@latest add "https://diceui.com/r/data-table"

import { NuqsAdapter } from "nuqs/adapters/next/app";
 
<NuqsAdapter>
  <App />
</NuqsAdapter>

Layout

Import the components and compose them together:

import { DataTable } from "@/components/data-table";
import { DataTableToolbar } from "@/components/data-table-toolbar";
import { DataTableAdvancedToolbar } from "@/components/data-table-advanced-toolbar";
import { DataTableFilterList } from "@/components/data-table-filter-list";
import { DataTableSortList } from "@/components/data-table-sort-list";
import { useDataTable } from "@/hooks/use-data-table";
 
const { table } = useDataTable({
  data,
  columns,
  pageCount,
});
 
// With standard toolbar
<DataTable table={table}>
  <DataTableToolbar table={table}>
    <DataTableSortList table={table} />
  </DataTableToolbar>
</DataTable>
 
// With advanced toolbar
<DataTable table={table}>
  <DataTableAdvancedToolbar table={table}>
    <DataTableFilterList table={table} />
    <DataTableSortList table={table} />
  </DataTableAdvancedToolbar>
</DataTable>

Sort List

The DataTableSortList provides a comprehensive way to sort data by multiple columns simultaneously.

Features

• Supports multiple column sorting
• Drag and drop reordering
• Ascending and descending directions

Installation

npx shadcn@latest add "https://diceui.com/r/data-table-sort-list"

Filter List

The DataTableFilterList provides a comprehensive way to filter data with multiple conditions.

Features

• Multiple filter conditions with AND/OR logic
• Drag and drop reordering
• Dynamic operators per field type

Installation

npx shadcn@latest add "https://diceui.com/r/data-table-filter-list"

Filter Menu

The DataTableFilterMenu provides a command palette-style interface for quickly adding and managing filters.

Features

• Command palette-style interface
• Context-aware input fields
• Compact token display

Installation

npx shadcn@latest add "https://diceui.com/r/data-table-filter-menu"

Action Bar

The DataTableActionBar provides a toolbar for the data table when rows are selected.

Features

• Floating action bar
• Customizable actions
• Row selection tracking

Installation

npx shadcn@latest add "https://diceui.com/r/data-table-action-bar"

Walkthrough

import { Text, CalendarIcon, DollarSign } from "lucide-react";
import { DataTableColumnHeader } from "@/components/data-table-column-header";
 
const columns = React.useMemo(() => [
  {
    // Provide an unique id for the column
    // This id will be used as query key for the column filter
    id: "title", 
    accessorKey: "title",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Title" />
    ),
    cell: ({ row }) => <div>{row.getValue("title")}</div>,
    // Define the column meta options for sorting, filtering, and view options
    meta: { 
      label: "Title", 
      placeholder: "Search titles...", 
      variant: "text", 
      icon: Text, 
    }, 
    // By default, the column will not be filtered. Set to `true` to enable filtering.
    enableColumnFilter: true, 
  },
], []);

import { useDataTable } from "@/hooks/use-data-table";
 
function DataTableDemo() {
  const { table } = useDataTable({
    data,
    columns,
    // Pass the total number of pages for the table
    pageCount, 
    initialState: {
      sorting: [{ id: "createdAt", desc: true }],
      pagination: { pageSize: 10 },
    },
    // Unique identifier for rows, can be used for unique row selection
    getRowId: (row) => row.id, 
  });
 
  return (
    // ... render table
  );
}

import { DataTable } from "@/components/data-table";
import { DataTableToolbar } from "@/components/data-table-toolbar";
import { DataTableSortList } from "@/components/data-table-sort-list";
 
function DataTableDemo() {
  return (
    <DataTable table={table}>
      <DataTableToolbar table={table}>
        <DataTableSortList table={table} />
      </DataTableToolbar>
    </DataTable>
  );
}

import { DataTableAdvancedToolbar } from "@/components/data-table-advanced-toolbar";
import { DataTableFilterList } from "@/components/data-table-filter-list";
import { DataTableFilterMenu } from "@/components/data-table-filter-menu";
 
function DataTableDemo() {
  return (
    <DataTable table={table}>
      <DataTableAdvancedToolbar table={table}>
        <DataTableFilterList table={table} />
        <DataTableSortList table={table} />
      </DataTableAdvancedToolbar>
    </DataTable>
  );
}

import { DataTableAdvancedToolbar } from "@/components/data-table-advanced-toolbar";
import { DataTableFilterList } from "@/components/data-table-filter-list"; 
import { DataTableFilterMenu } from "@/components/data-table-filter-menu"; 
import { DataTableSortList } from "@/components/data-table-sort-list";
 
function DataTableDemo() {
  return (
    <DataTable table={table}>
      <DataTableAdvancedToolbar table={table}>
        <DataTableFilterList table={table} />
        <DataTableFilterMenu table={table} />
        <DataTableSortList table={table} />
      </DataTableAdvancedToolbar>
    </DataTable>
  );
}

import { DataTableActionBar } from "@/components/data-table-action-bar";
import { CustomTableActions } from "@/components/custom-table-actions";
 
function DataTableDemo() {
  return (
    <DataTable 
      table={table}
      actionBar={
        <DataTableActionBar table={table}>
          {/* Add your custom actions here */}
          <CustomTableActions />
        </DataTableActionBar>
      }
    >
      <DataTableToolbar table={table} />
    </DataTable>
  );
}

API Reference

Column Definitions

The column definitions are used to define the columns of the data table.

const columns = React.useMemo<ColumnDef<Project>[]>(() => [
  {
    // Required: Unique identifier for the column
    id: "title", 
    // Required: Key to access the data, `accessorFn` can also be used
    accessorKey: "title", 
    // Optional: Custom header component
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Title" />
    ),
    // Optional: Custom cell component
    cell: ({ row }) => <div>{row.getValue("title")}</div>,
    // Optional: Meta options for filtering, sorting, and view options
    meta: {
      label: "Title",
      placeholder: "Search titles...",
      variant: "text",
      icon: Text,
    },
    // By default, the column will not be filtered. Set to `true` to enable filtering.
    enableColumnFilter: true, 
  },
  {
    id: "status",
    // Access nested data using `accessorFn`
    accessorFn: (row) => row.lineItem.status,
    header: "Status",
    meta: {
      label: "Status",
      variant: "select",
      options: [
        { label: "Active", value: "active" },
        { label: "Inactive", value: "inactive" },
      ],
    },
    enableColumnFilter: true,
  },
], []);

Properties

Core configuration options for defining columns.

Column Meta

Column meta options for filtering, sorting, and view options.

Filter Variants

Available filter variants for column meta.

Reference the TanStack Table Column Definitions Guide for detailed column definition guide.

useDataTable

A hook for initializing the data table with state management.

DataTable

The main data table component.

DataTableColumnHeader

Custom header component for columns with sorting.

DataTableToolbar

Standard toolbar with filtering and view options.

DataTableAdvancedToolbar

Advanced toolbar with more comprehensive filtering capabilities.

DataTableViewOptions

Controls column visibility and display preferences in the data table.

DataTableSortList

List of applied sorting with ability to add, remove, and modify sorting.

DataTableFilterList

List of applied filters with ability to add, remove, and modify filters.

DataTableFilterMenu

Filter menu with ability to add, remove, and modify filters.

DataTableActionBar

Floating action bar component for actions for selected rows.

DataTablePagination

Pagination controls for the data table.

Accessibility

Keyboard Interactions

Credits

• shadcn/ui - For the initial implementation of the data table.