Datagrid components

The table inside a list view: columns from the schema, row actions, sorting, drag-and-drop ordering and a column selector.

SchemaList mounts SchemaDatagrid for you. Use it directly inside a hand-built ListShell.

Example

<SchemaDatagrid
  fields={viewSchema.list.boxes}
  indexField="position"
  rowActionButtons={<SchemaButtons isList />}
  rowSx={(record) => (record.stock === 0 ? {opacity: 0.6} : {})}
/>

SchemaDatagrid props

Name	Type	Default	Description
fields	FieldDescriptor[]	fields from the method schema	Which columns to render, in order
expand	ReactElement | FC	—	Expandable row content
target	string	—	Marks this list as the origin, so a row action can return to it
indexField	string	—	Field holding the order; enables drag-and-drop sorting
sortForFilters	Filters	—	Filters under which drag-and-drop ordering is allowed
onRowClick	(record: HabRecord) => void	—	Replaces the default row activation
rowActionButtons	ReactNode | false	schema actions	Buttons in the row action column; false removes the column
rowSx	(record: HabRecord) => SxProps	—	Per-row styling, e.g. to mark a state
singleClickAction	ActionDescriptor	from the view schema	What a single click does
doubleClickAction	ActionDescriptor	from the view schema	What a double click does
disableSort	boolean	false	Turns off column sorting

caution

Drag-and-drop ordering needs both indexField and a sort that matches the stored order. That is what sortForFilters guards: reordering rows while the list is sorted by something else would write positions the user cannot see.

Row tooltips

A row whose click does something announces it: hovering shows a tooltip naming the available gesture and action — "Click: Show", "Double-click: Edit" — taken from the action's label in the record's own schema.

SchemaDatagrid builds that tooltip from singleClickAction / doubleClickAction, so a list with row activation gets it without any configuration. The schema-free AdminDatagrid underneath takes it as a prop:

Name	Type	Default	Description
rowTooltip	(record: RaRecord) => ReactNode	schema-driven in SchemaDatagrid	Overrides the tooltip; return null for rows that should have none

The tooltip appears after TOOLTIP_ENTER_DELAY and is suppressed while the pointer is over an interactive element inside the row — a button or a link — so the row hint never covers a control's own tooltip. Rows with neither click slot active get no tooltip at all.

To drop the tooltip from every list of the application, pass rowTooltip={false} to SchemaAdmin. Clicking and double-clicking a row still open it; only the hover hint goes away.

<SchemaAdmin
  serviceConfigMap={serviceConfigMap}
  authProvider={authProvider}
  defaultRowAction="double-click"
  rowTooltip={false}
/>

DatagridConfigurable and SelectColumnsButton

DatagridConfigurable is the datagrid whose visible columns the user can choose; SelectColumnsButton is the control that opens the chooser. They belong together — the button does nothing without the configurable datagrid.

In generated lists this is switched on by columnSelector on SchemaAdmin, and the choice is stored per user through the preferences store.

See also

• SchemaList — the view that mounts the datagrid
• Field components — what renders in the cells
• SchemaButtons — the row action buttons