Back to components
Data component

Data Table

TanStack-powered table with search, sort, pagination, column visibility.

Read full guideBrowse all components

Install

$ Run in your project root
pnpm dlx shadcn@latest add https://jb.desishub.com/r/data-table.json

What it does

  • Search and filter table data
  • Column sorting with directional indicators
  • Pagination for large datasets
  • Toggleable column visibility preferences
  • Row selection functionality
  • Pre-built column helpers (SortableColumn, DateColumn, ImageColumn, StatusColumn, ActionColumn)

When to use

Use it

Any page displaying lists of records (users, orders, products, invoices, contacts). Default table for dashboards.

Skip it

Simple static tables (under 5 rows) or non-interactive data displays.

Prerequisites

  • TanStack React Table
  • shadcn/ui

Files & routes added

  • data-table.tsx + column helpers (location depends on shadcn install target)