Components / Blocks / AdvancedRecordGrid

AdvancedRecordGrid.

ProBlockDatav0.2.0

A record workspace with saved views, search, sortable columns, paging and bulk actions. Selection across pages is an explicit step, and a partial bulk failure keeps the failed rows selected for repair.

Get Elements Pro

Demo dataResponsive

Customers

Demo data

				Status
Northline Studio	Pro	8	$149	Active
Harbor Co	Starter	3	$49	Active
Fieldnote	Trial	2	$0	Trial
Quarry Labs	Pro	12	$199	Past due
Lumen Works	Starter	4	$49	Active

1–5 of 5

Page 1 of 1

Installation

Add the licensed registry once. Keep your license key in the project’s uncommitted environment.

components.json

{
  "registries": {
    "@elements-pro": {
      "headers": {
        "Authorization": "Bearer ${ELEMENTS_PRO_LICENSE_KEY}"
      },
      "url": "https://pro.elements.micropreneur.dev/r/{name}.json"
    }
  }
}

export ELEMENTS_PRO_LICENSE_KEY=mpro_...

pnpm dlx shadcn@latest add @elements-pro/advanced-record-grid

The shadcn CLI writes the source into your project. Files added:

components/elements-pro/advanced-record-grid.tsxblock
components/ui/button.tsxui
components/ui/card.tsxui
components/ui/input.tsxui
components/ui/table.tsxui

Dependencies@base-ui/reactclass-variance-authorityclsxlucide-reacttailwind-merge

API

Prop	Type	Default	Description
title (required)	string	—
description	string	—
columns (required)	RecordGridColumn<T>[]	—	Header, value for search and sort, optional render and alignment.
rows (required)	T[]	—
getRowId (required)	(row) => string	—
views	RecordGridView[]	—	Saved views; filter rows for the active one.
activeViewId	string	—
onViewChange	(viewId) => void	—	Called when a saved view is chosen.
bulkActions	RecordGridBulkAction[]	—
onBulkAction	(actionId, rowIds) => Promise<{ failedIds; message? }>	—	Run a bulk action and report which rows failed.
onOpenRow	(rowId) => void	—	Makes the first column a button that opens the row.
pageSize	number	10

RecordGridColumn<T>

Prop	Type	Default
id (required)	string	—
header (required)	string	—
value (required)	(row: T) => string \| number	—
render	(row: T) => ReactNode	—
align	'left' \| 'right'	—
sortable	boolean	—

Accessibility

Sortable headers are buttons, and the column reports aria-sort ascending, descending or none.
Every row checkbox is labelled with the row name; the page checkbox shows a mixed state.
Bulk results, including partial failures, are announced politely.