Skip to content
aq-ui
Back to ComponentsComponent

Data Table

Open-code aq-ui accessible component family for Data Table.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add data-table

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { DataTable } from "@/components/ui/data-table"

<DataTable />

DataTable

constSource L208

Open-code aq-ui accessible component family for Data Table.

const DataTable = DataTableForwardRef as DataTableComponent
<DataTable />

DataTableProps

interfaceSource L30

Type contract for DataTableProps.

interface DataTableProps<TData, TValue> extends Omit< React.ComponentPropsWithoutRef<"div">, "children" >

Members

NameType
columnsColumnDef<TData, TValue>[]
dataTData[]
emptyMessage?React.ReactNode
pageSize?number
enablePagination?boolean
enableRowSelection?boolean
className?string
toolbar?(table: ReturnType<typeof useReactTable<TData>>) => React.ReactNode
getRowId?(row: TData, index: number) => string
onRowSelectionChange?(selection: RowSelectionState) => void

Registry dependencies

button, table, utils

Package dependencies

@tanstack/react-table@^8.21.3

Files

  • components/ui/data-table.tsx

Source