Data Grid

@allem-ui/data-grid

Advanced data table with sorting, filtering, row selection, and pagination. Built on TanStack Table.

Installation

npm install @allem-ui/data-grid

Basic Usage

Alice Johnsonalice@example.comAdmin
Bob Smithbob@example.comEditor
Carol Daviscarol@example.comViewer
Dan Wilsondan@example.comEditor

With Sorting & Filtering

Alice Johnsonalice@example.comAdmin
Bob Smithbob@example.comEditor
Carol Daviscarol@example.comViewer
Dan Wilsondan@example.comEditor

Features

  • ✓ Column sorting (click headers)
  • ✓ Global search filtering
  • ✓ Row selection with checkboxes
  • ✓ Pagination with page size control
  • ✓ Loading and empty states
  • ✓ Custom cell renderers

Props

PropTypeDefaultDescription
data*T[]—Array of data to display
columns*ColumnDef<T>[]—Column definitions (from TanStack Table)
enableSortingbooleanfalseEnable column sorting
enableFilteringbooleanfalseEnable global search filter
enableRowSelectionbooleanfalseEnable row selection checkboxes
enablePaginationbooleanfalseEnable pagination
pageSizenumber10Rows per page
loadingbooleanfalseShow loading overlay
emptyMessagestring—Message when no data
onRowClick(row: T) => void—Row click handler

DataGridToolbar Props

PropTypeDefaultDescription
globalFilter*string—Current search value
onGlobalFilterChange*(value: string) => void—Search change handler
selectedCountnumber—Number of selected rows
totalCountnumber—Total rows
classNamestring—Additional CSS classes
childrenReactNode—Extra toolbar content

DataGridPagination Props

PropTypeDefaultDescription
pageIndex*number—Current page index
pageCount*number—Total pages
pageSize*number—Rows per page
onPageChange*(page: number) => void—Page change handler
onPageSizeChange(size: number) => void—Page size change handler
totalRows*number—Total row count
classNamestring—Additional CSS classes

DataGridColumnHeader Props

PropTypeDefaultDescription
sorted*false | "asc" | "desc"—Current sort state
onSort*() => void—Sort toggle handler
children*ReactNode—Header label
classNamestring—Additional CSS classes