Use Data Grid

Open-code aq-ui React hook for Use Data Grid.

Installation

pnpm dlx aq-ui@alpha add use-data-grid

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 { useDataGrid } from "@/hooks/use-data-grid"

DataGridController

interfaceSource L67

Type contract for DataGridController.

interface DataGridController<TData>

Members

Name	Type
`table`	`Table<TData>`
`sorting`	`SortingState`
`setSorting`	`(updater: Updater<SortingState>) => void`
`columnFilters`	`ColumnFiltersState`
`setColumnFilters`	`(updater: Updater<ColumnFiltersState>) => void`
`columnVisibility`	`VisibilityState`
`setColumnVisibility`	`(updater: Updater<VisibilityState>) => void`
`columnPinning`	`ColumnPinningState`
`setColumnPinning`	`(updater: Updater<ColumnPinningState>) => void`
`rowSelection`	`RowSelectionState`
`setRowSelection`	`(updater: Updater<RowSelectionState>) => void`
`pagination`	`PaginationState`
`setPagination`	`(updater: Updater<PaginationState>) => void`
`globalFilter`	`unknown`
`setGlobalFilter`	`(updater: Updater<unknown>) => void`
`reset`	`() => void`

useDataGrid

functionSource L86

Open-code aq-ui React hook for Use Data Grid.

function useDataGrid<TData, TValue = unknown>({ data, columns, sorting: sortingProp, defaultSorting = EMPTY_SORTING, onSortingChange, columnFilters: columnFiltersProp, defaultColumnFilters = EMPTY_FILTERS, onColumnFiltersChange, columnVisibility: columnVisibilityProp, defaultColumnVis…): DataGridController<TData>

Returns: DataGridController<TData>

Parameters

Name	Type
`options`	`UseDataGridOptions<TData, TValue>`

UseDataGridOptions

interfaceSource L32

Type contract for UseDataGridOptions.

interface UseDataGridOptions<TData, TValue = unknown>

Members

Name	Type	Default
`data`	`TData[]`	`—`
`columns`	`ColumnDef<TData, TValue>[]`	`—`
`sorting?`	`SortingState`	`—`
`defaultSorting?`	`SortingState`	`EMPTY_SORTING`
`onSortingChange?`	`(sorting: SortingState) => void`	`—`
`columnFilters?`	`ColumnFiltersState`	`—`
`defaultColumnFilters?`	`ColumnFiltersState`	`EMPTY_FILTERS`
`onColumnFiltersChange?`	`(filters: ColumnFiltersState) => void`	`—`
`columnVisibility?`	`VisibilityState`	`—`
`defaultColumnVisibility?`	`VisibilityState`	`EMPTY_VISIBILITY`
`onColumnVisibilityChange?`	`(visibility: VisibilityState) => void`	`—`
`columnPinning?`	`ColumnPinningState`	`—`
`defaultColumnPinning?`	`ColumnPinningState`	`EMPTY_PINNING`
`onColumnPinningChange?`	`(pinning: ColumnPinningState) => void`	`—`
`rowSelection?`	`RowSelectionState`	`—`
`defaultRowSelection?`	`RowSelectionState`	`EMPTY_SELECTION`
`onRowSelectionChange?`	`(selection: RowSelectionState) => void`	`—`
`pagination?`	`PaginationState`	`—`
`defaultPagination?`	`PaginationState`	`DEFAULT_PAGINATION`
`onPaginationChange?`	`(pagination: PaginationState) => void`	`—`
`globalFilter?`	`unknown`	`—`
`defaultGlobalFilter?`	`unknown`	`—`
`onGlobalFilterChange?`	`(filter: unknown) => void`	`—`
`enableRowSelection?`	`boolean \| ((row: Row<TData>) => boolean)`	`—`
`enableMultiRowSelection?`	`boolean \| ((row: Row<TData>) => boolean)`	`—`
`getRowId?`	`(originalRow: TData, index: number, parent?: Row<TData>) => string`	`—`
`manualFiltering?`	`boolean`	`false`
`manualSorting?`	`boolean`	`false`
`manualPagination?`	`boolean`	`false`
`pageCount?`	`number`	`—`
`rowCount?`	`number`	`—`
`meta?`	`TableMeta<TData>`	`—`

Registry dependencies

use-controllable-state

Package dependencies

@tanstack/react-table@^8.21.3

Files

hooks/use-data-grid.ts