{"name":"data-table","title":"Data Table","description":"A table built on TanStack Table's core row model — pass it columns and data and it handles rendering, header/cell composition, and click-to-sort.","installCommand":"bunx marko-ui add data-table -y","usageTags":"<DataTable>","importSnippet":"import DataTable from \"@/components/ui/data-table/data-table.marko\";","usageSnippet":"static const columns = [\n  { accessorKey: \"email\", header: \"Email\" },\n  { accessorKey: \"amount\", header: \"Amount\" },\n];\nstatic const data = [\n  { email: \"ken99@example.com\", amount: 316 },\n  { email: \"abe45@example.com\", amount: 242 },\n];\n\n<DataTable columns=columns data=data/>","tags":["DataTable"],"parts":[],"props":[{"name":"columns","type":"DataTableColumn<TData>[]","required":true},{"name":"data","type":"TData[]","required":true},{"name":"class","type":"string","required":false}],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"data-table-demo","title":"Basic","source":"import DataTable from \"@marko-ui/shadcn/ui/data-table/data-table.marko\";\nimport type { DataTableColumn } from \"@marko-ui/shadcn/ui/data-table/data-table.marko\";\n\nstatic const payments = [\n  { id: \"728ed52f\", amount: 100, status: \"pending\", email: \"m@example.com\" },\n  { id: \"489e1d42\", amount: 125, status: \"processing\", email: \"example@gmail.com\" },\n  { id: \"a1b2c3d4\", amount: 250, status: \"success\", email: \"jane@example.com\" },\n  { id: \"e5f6a7b8\", amount: 75, status: \"failed\", email: \"john@example.com\" },\n  { id: \"c9d0e1f2\", amount: 300, status: \"success\", email: \"alice@example.com\" },\n];\n\nstatic const columns: DataTableColumn<(typeof payments)[number]>[] = [\n  { accessorKey: \"status\", header: \"Status\" },\n  { accessorKey: \"email\", header: \"Email\" },\n  {\n    accessorKey: \"amount\",\n    header: \"Amount\",\n    cell: (row) =>\n      new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\" }).format(row.amount),\n  },\n];\n\n<DataTable columns=(columns as DataTableColumn<Record<string, unknown>>[]) data=payments/>","description":"Pass an array of `{ accessorKey, header }` column definitions and a matching data array. A `cell` function on a column formats its value — here the amount column renders as currency."},{"id":"data-table-sorting","title":"Sorting","source":"import DataTable from \"@marko-ui/shadcn/ui/data-table/data-table.marko\";\n\nstatic const payments = [\n  { id: \"728ed52f\", amount: 100, status: \"pending\", email: \"m@example.com\" },\n  { id: \"489e1d42\", amount: 125, status: \"processing\", email: \"example@gmail.com\" },\n  { id: \"a1b2c3d4\", amount: 250, status: \"success\", email: \"jane@example.com\" },\n  { id: \"e5f6a7b8\", amount: 75, status: \"failed\", email: \"john@example.com\" },\n  { id: \"c9d0e1f2\", amount: 300, status: \"success\", email: \"alice@example.com\" },\n];\n\nstatic const columns = [\n  { accessorKey: \"email\", header: \"Email\" },\n  { accessorKey: \"status\", header: \"Status\" },\n  { accessorKey: \"amount\", header: \"Amount\" },\n];\n\n<DataTable columns=columns data=payments/>","description":"Every column sorts by default: click a header to cycle ascending, descending, and unsorted. Sorting state lives inside the component, so no extra wiring is needed."},{"id":"data-table-formatted-cells","title":"Cell formatting","source":"import DataTable from \"@marko-ui/shadcn/ui/data-table/data-table.marko\";\nimport type { DataTableColumn } from \"@marko-ui/shadcn/ui/data-table/data-table.marko\";\n\nstatic const payments = [\n  { id: \"728ed52f\", amount: 100, status: \"pending\", email: \"m@example.com\" },\n  { id: \"489e1d42\", amount: 125, status: \"processing\", email: \"example@gmail.com\" },\n  { id: \"a1b2c3d4\", amount: 250, status: \"success\", email: \"jane@example.com\" },\n];\n\nstatic const currency = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\" });\n\nstatic const columns: DataTableColumn<(typeof payments)[number]>[] = [\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: (row) => (row.status[0] ?? \"\").toUpperCase() + row.status.slice(1),\n  },\n  { accessorKey: \"email\", header: \"Email\" },\n  {\n    accessorKey: \"amount\",\n    header: \"Amount\",\n    cell: (row) => currency.format(row.amount),\n  },\n];\n\n<DataTable columns=(columns as DataTableColumn<Record<string, unknown>>[]) data=payments/>","description":"A column's `cell(row)` function can return any string, number, or Marko body — use it to format values or capitalize text without changing the underlying data."},{"id":"data-table-empty","title":"Empty state","source":"import DataTable from \"@marko-ui/shadcn/ui/data-table/data-table.marko\";\n\nstatic const columns: { accessorKey: string; header: string }[] = [\n  { accessorKey: \"email\", header: \"Email\" },\n  { accessorKey: \"status\", header: \"Status\" },\n  { accessorKey: \"amount\", header: \"Amount\" },\n];\n\n<DataTable columns=columns data=[]/>","description":"An empty `data` array renders a single centered \"No results.\" row instead of an empty table body."},{"id":"data-table-rtl","title":"RTL","source":"import DataTable from \"@marko-ui/shadcn/ui/data-table/data-table.marko\";\nimport type { DataTableColumn } from \"@marko-ui/shadcn/ui/data-table/data-table.marko\";\n\nstatic const payments = [\n  { id: \"m5gr84i9\", amount: 316, status: \"success\", email: \"ken99@example.com\" },\n  { id: \"3u1reuv4\", amount: 242, status: \"success\", email: \"Abe45@example.com\" },\n  { id: \"derv1ws0\", amount: 837, status: \"processing\", email: \"Monserrat44@example.com\" },\n  { id: \"5kma53ae\", amount: 874, status: \"success\", email: \"Silas22@example.com\" },\n  { id: \"bhqecj4p\", amount: 721, status: \"failed\", email: \"carmella@example.com\" },\n];\n\nstatic const statusLabels: Record<string, string> = {\n  success: \"ناجح\",\n  processing: \"قيد المعالجة\",\n  failed: \"فشل\",\n  pending: \"قيد الانتظار\",\n};\n\nstatic const columns: DataTableColumn<(typeof payments)[number]>[] = [\n  {\n    accessorKey: \"status\",\n    header: \"الحالة\",\n    cell: (row) => statusLabels[row.status] ?? row.status,\n  },\n  { accessorKey: \"email\", header: \"البريد الإلكتروني\" },\n  {\n    accessorKey: \"amount\",\n    header: \"المبلغ\",\n    cell: (row) =>\n      new Intl.NumberFormat(\"ar-SA\", { style: \"currency\", currency: \"USD\" }).format(row.amount),\n  },\n];\n\n<div dir=\"rtl\">\n\n  <DataTable columns=(columns as DataTableColumn<Record<string, unknown>>[]) data=payments/>\n</div>","description":"The table works unchanged under `dir=\"rtl\"`; wrap it (or an ancestor) in `dir=\"rtl\"` and text alignment, sort-icon placement, and cell order follow the writing direction. Every RTL example on this site does it the same way: a `dir=\"rtl\"` wrapper plus Arabic labels."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}