Overview
The DataTable component is a feature-rich table for displaying and managing tabular data. It supports sorting, filtering, column visibility, pagination, and column resizing.
Import
import { DataTable } from '@repo/ui'
Usage
import { DataTable } from '@repo/ui'
import { ColumnDef } from '@tanstack/react-table'
interface User {
id: string
name: string
email: string
status: string
}
const columns: ColumnDef<User>[] = [
{
accessorKey: 'name',
header: 'Name',
},
{
accessorKey: 'email',
header: 'Email',
},
{
accessorKey: 'status',
header: 'Status',
},
]
const data: User[] = [
{ id: '1', name: 'John Doe', email: '[email protected]', status: 'Active' },
{ id: '2', name: 'Jane Smith', email: '[email protected]', status: 'Inactive' },
]
function MyTable() {
return (
<DataTable
columns={columns}
data={data}
tableKey="users-table"
/>
)
}
Props
columns
CustomColumnDef<TData, TValue>[]
required
Array of column definitions. Extends TanStack Table’s ColumnDef with optional meta.className for styling.
The data to display in the table.
tableKey
TableKeyValue | undefined
required
Unique key for the table, used for persisting sorting and pagination state in localStorage.
Shows loading skeleton when true.
Shows a filter input for the ‘name’ column.
Shows a column visibility toggle dropdown.
noResultsText
string
default:"'No results'"
Text to display when there are no results.
Custom markup to display when there’s no data.
Callback fired when a row is clicked.
sortFields
{ key: string; label: string }[]
Array of sortable field definitions.
onSortChange
(sortCondition: SortCondition[]) => void
Callback fired when sort conditions change.
Pagination configuration object. Set to null to disable pagination.
Callback fired when pagination changes.
Pagination metadata including totalCount, pageInfo, and isLoading.
Additional CSS classes for the wrapper div.
Column visibility state object.
setColumnVisibility
React.Dispatch<React.SetStateAction<VisibilityState>>
State setter for column visibility.
defaultSorting
{ field: string; direction?: OrderDirection }[]
Default sorting configuration.
Makes the table header sticky. Cannot be used with stickyDialogHeader.
Makes the table header sticky within a dialog. Cannot be used with stickyHeader.
Features
Column Resizing
Columns are resizable by default. Double-click the resize handle to reset a column to its default size.
Sorting
Provide sortFields to enable sorting. The component persists sort state in localStorage using the tableKey.
<DataTable
columns={columns}
data={data}
tableKey="users-table"
sortFields={[
{ key: 'name', label: 'Name' },
{ key: 'email', label: 'Email' },
]}
onSortChange={(conditions) => {
console.log('Sort changed:', conditions)
}}
/>
const [pagination, setPagination] = useState<TPagination>({
page: 1,
pageSize: 10,
query: { first: 10 },
})
<DataTable
columns={columns}
data={data}
tableKey="users-table"
pagination={pagination}
onPaginationChange={setPagination}
paginationMeta={{
totalCount: 100,
pageInfo: {
hasNextPage: true,
hasPreviousPage: false,
startCursor: 'cursor1',
endCursor: 'cursor2',
},
}}
/>
Column Visibility
Control which columns are visible:
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
<DataTable
columns={columns}
data={data}
tableKey="users-table"
showVisibility
columnVisibility={columnVisibility}
setColumnVisibility={setColumnVisibility}
/>
Utility Functions
Retrieves initial pagination state from localStorage or returns a fallback.
import { getInitialPagination } from '@repo/ui'
const initialPagination = getInitialPagination('my-table-key', {
page: 1,
pageSize: 10,
query: { first: 10 },
})
getInitialSortConditions
Retrieves initial sort conditions from localStorage with validation.
import { getInitialSortConditions } from '@repo/ui'
const initialSort = getInitialSortConditions(
'my-table-key',
['name', 'email', 'status'],
[{ field: 'name', direction: OrderDirection.ASC }]
)
Types
SortCondition
type SortCondition<TField extends string> = {
field: TField
direction: OrderDirection
}
CustomColumnDef
type CustomColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {
meta?: {
className?: string
}
}
Source
Location: /home/daytona/workspace/source/packages/ui/src/data-table/data-table.tsx