Skip to Content
Vertex ComponentsData Table

Data Table

A powerful data table component built on TanStack Table  with sorting, filtering, pagination, and row selection.

successken99@yahoo.com
$316.00
successabe45@gmail.com
$242.00
processingmonserrat44@gmail.com
$837.00
successsilas22@gmail.com
$874.00
failedcarmella@hotmail.com
$721.00
pendingjulia@example.com
$150.00
successderek@outlook.com
$495.00
failedpatricia@yahoo.com
$63.00
processingjames.wilson@gmail.com
$1,200.00
pendingsarah.connor@example.com
$389.00
0 of 12 row(s) selected.

Rows per page

Page 1 of 2

Features

  • Sorting: Click column headers to sort ascending, descending, or clear
  • Pagination: Built-in page navigation with configurable rows per page
  • Row Selection: Checkbox-based row selection with select all support
  • Column Visibility: Toggle column visibility via dropdown
  • Column Header Actions: Reusable header component with sort and hide options
  • Flexible Columns: Define columns with custom renderers, formatters, and actions

Installation

npx shadcn@latest add @uipath/data-table

This component requires the following dependencies:

  • @tanstack/react-table - Table state management and utilities
  • lucide-react - Icons
  • table - Base table primitives
  • button - Button component
  • dropdown-menu - Dropdown menu component
  • select - Select component (for rows per page)

Usage

1. Define your columns

"use client"
 
import type { ColumnDef } from "@/components/ui/data-table"
import { DataTableColumnHeader } from "@/components/ui/data-table"
 
type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}
 
export const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: "status",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
  },
  {
    accessorKey: "email",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    ),
  },
  {
    accessorKey: "amount",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Amount" />
    ),
    cell: ({ row }) => {
      const formatted = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
      }).format(row.getValue("amount"))
      return <div className="text-right font-medium">{formatted}</div>
    },
  },
]

2. Render the DataTable

import { DataTable } from "@/components/ui/data-table"
import { columns } from "./columns"
 
export default function PaymentsPage({ data }: { data: Payment[] }) {
  return <DataTable columns={columns} data={data} />
}

Composable Helpers

The data table exports additional components for building advanced table UIs:

DataTableColumnHeader

A reusable column header with a dropdown for sorting and hiding columns.

import { DataTableColumnHeader } from "@/components/ui/data-table"
 
{
  accessorKey: "email",
  header: ({ column }) => (
    <DataTableColumnHeader column={column} title="Email" />
  ),
}

DataTablePagination

A standalone pagination component. The DataTable includes this by default, but you can also use it separately when building custom table layouts.

import { DataTablePagination } from "@/components/ui/data-table"
 
<DataTablePagination table={table} />

DataTableViewOptions

A column visibility toggle dropdown. Use this in a toolbar above the table.

import { DataTableViewOptions } from "@/components/ui/data-table"
 
<DataTableViewOptions table={table} />

Row Selection

Add a selection column using the Checkbox component:

import { Checkbox } from "@/components/ui/checkbox"
 
const columns: ColumnDef<Payment>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  // ... other columns
]
TooltipShell