fma-ui

Data Grid

A data grid driven by a TanStack Table v9 instance and rendered with react-aria's Table, which brings cell keyboard navigation, aria-sort, selection, column resizing, row drag and drop and virtualization. Create the table with useTable({ features: dataGridFeatures, ... }): the exported features cover sorting, filtering with facets, pagination, selection, row expanding, row and column pinning, ordering, visibility and sizing, with client-side row models; for server-side data (or to show every row) set manualSorting/manualFiltering/manualPagination. Column meta takes headerTitle, skeleton, autoSize, headerClassName and cellClassName. Wrap parts in DataGrid table={table} recordCount={…}: DataGridTable, DataGridPagination, DataGridColumnHeader (sort indicator, plus a menu for pinning, moving and visibility when tableLayout enables them), DataGridColumnVisibility, DataGridColumnFilter (faceted, use filterFn: "arrHas"), DataGridRowSelect (with enableRowSelection), DataGridRowPin, DataGridRowDragHandle (with onRowsReorder) and DataGridRowExpand (with getRowCanExpand and DataGridTable's renderExpandedRow, a full-width details row). tableLayout.columnsDraggable lets users drag headers to reorder columns (keyboard users use the header menu's move actions). isLoading shows skeleton rows (meta.skeleton) or a spinner; meta.autoSize columns take the remaining width (not measured from content).

Data displaythird-partyRegistry JSON

Installation

  1. 1

    Register the @fma-ui namespace in components.json (once)

    components.json
    {
  "registries": {
    "@fma-ui": "https://ui.fmartinsandre.dev.br/r/{name}.json"
  }
}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ui/data-grid

    Files land in components/fma-ui/data-grid.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
@tanstack/react-table@^9.2.5cn@^0.4.0lucide-react@^1.52.0react-aria-components@^1.21.1