Data tableadmin

TanStack Table v8 wrapper with sorting, column visibility, row selection and batch actions, pagination, expandable rows, virtualization and mobile cards.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/data-table

의존 아이템button checkbox dropdown-menu empty faceted-filter locale native-select pagination skeleton style table

Cards

Rooms
행 펼치기	Room	Floor
	Room 101	1
	Room 202	2

data-table-cards.tsx

"use client";
import type { ColumnDef } from "@tanstack/react-table";import { DataTable } from "@/components/ui/data-table";
interface Room {  id: string;  name: string;  floor: number;  notes: string;}
const columns: ColumnDef<Room, any>[] = [  { accessorKey: "name", header: "Room" },  { accessorKey: "floor", header: "Floor" },];
const data: Room[] = [  { id: "a", name: "Room 101", floor: 1, notes: "Garden view" },  { id: "b", name: "Room 202", floor: 2, notes: "Connecting door" },];
export default function DataTableCards() {  return (    <DataTable      label="Rooms"      columns={columns}      data={data}      getRowId={(row) => row.id}      renderSubRow={(row) => <p className="text-sm text-muted-foreground">{row.original.notes}</p>}      renderCard={(row) => (        <div className="rounded-lg border p-3 text-sm">          <strong>{row.original.name}</strong>          <p className="text-muted-foreground">Floor {row.original.floor}</p>        </div>      )}      paginationMode="none"    />  );}