dashboardcn

Search documentation

Search for a page or component.

Data Table Card

PreviousNext

A card around a data table: title, description, toolbar, rows, and pagination in the footer.

Top products
Units sold and revenue, ranked.
Stock
Hoodie — heatherHD-450
out
618
44
$37.1K
Field Notes — 3 packFN-003
in stock
1,284
12
$19.3K
Water bottleWB-330
in stock
486
6
$14.6K
Enamel mugMG-011
low
942
31
$14.1K
Cap — six panelCP-120
low
512
19
$12.8K

1–5 of 10

Page 1 of 2
"use client"

import * as React from "react"

A card around the data table: title, description, toolbar, rows, and pagination in the footer. It is the table block for shadcn/ui dashboards, ready for a list of customers, orders, or invoices.

Installation

pnpm dlx shadcn@latest add @dashboardcn/data-table-card

Also installs card, table, button, input, dropdown-menu, checkbox, skeleton from shadcn/ui if missing.

Usage

import { DataTableCard } from "@/components/data-table-card"

<DataTableCard
  title="Top products"
  description="Units sold and revenue, ranked."
  columns={columns}
  data={products}
  searchKey="product"
  initialSorting={[{ id: "revenue", desc: true }]}
  density="compact"
  pageSize={5}
  pageSizeOptions={[5, 10, 25]}
  toolbar={<PeriodTabs value={period} onValueChange={setPeriod} size="sm" />}
/>