Skip to Content

data-table

ui

A powerful table with sorting, filtering, pagination, and column visibility powered by TanStack Table.

Use cases

  • Displaying tabular data with sorting and filtering
  • Admin panels with paginated records
  • User management tables
  • Financial transaction lists
  • Any dataset requiring column visibility controls

Features

  • Column sorting (ascending/descending)
  • Text filtering on any column
  • Pagination with configurable page size
  • Column visibility toggle dropdown
  • Row selection with checkbox support
  • Powered by @tanstack/react-table
  • Composes Table, Input, Button, DropdownMenu primitives

Preview

Interactive preview with light/dark mode toggle. Switch to Code tab to view the full source.

Filter emails...
Columns ▾
StatusEmailAmount
Successken@example.com$316.00
Successabe@example.com$242.00
Processingmonse@example.com$837.00
0 of 3 row(s) selected.
PreviousNext

Installation

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/data-table

Dependencies

@tanstack/react-tablelucide-reactbuttondropdown-menuinputtable

API

Fetch this component's metadata and source code from the registry API.

GET/api/v1/ui/data-table

Source

components/ui/data-table.tsx