Live example

This grid contains 1,000 generated people. It renders the rows and columns around the viewport while keeping the complete local dataset available to the API.

Loading the interactive grid…

Try it

• Sort: click a column heading. Shift-click another heading to add a sort column.
• Filter: use the search field for a quick filter, or the filter button in a heading for a column filter.
• Group: choose Group by team, then expand and collapse the groups.
• Select: use the row checkboxes. The header checkbox selects all matching rows.
• Edit text: double-click a name or role, type a new value, and press Enter. Escape cancels.
• Choose a team or status: double-click a Team or Status cell to open its dropdown editor. Selecting an option saves the choice.
• Customize select icons: choose Chevron, Caret, or None in the toolbar, then open a Team or Status editor. Indicators appear only while editing.
• Edit a budget: double-click a Budget cell and enter a non-negative euro amount with up to two decimal places. Enter or Tab saves it; Escape cancels. Sorting and filtering keep using numeric values.
• Ranges: drag across cells, or use Shift with the arrow keys. Copy uses the formatted cell values.
• Paste and fill: paste values into editable cells or drag the fill handle on a range. Team and Status accept their listed options; Budget accepts numbers and copied euro amounts. Invalid values are rejected without overwriting the original data.
• Layout: resize a column using its header edge. The name column stays pinned while you scroll horizontally.

Changes live only in this example. Reset creates fresh rows and resets the grid. The editing guide explains how to persist writes to your API.

How it is built

The example imports Grid from this repository’s current source. It uses a local data source, typed columns, custom dropdown and numeric editors, a status renderer, and the default stylesheet with a teal accent. The change counter records successful writes.

<Grid<Person>
  data={data}
  columns={columns}
  defaultColumn={{ sortable: true, resizable: true }}
  rowSelection="multiple"
  interaction="cell"
  enableRanges
  enableFill
  stickyGroupRows
  headerMenuButton
  headerFilterButton="always"
  ariaLabel="People example"
/>

Browse the grid component, column definitions, and editors on GitHub for the complete implementation.

Select editor icons

Supply a custom glyph through the grid’s icons.select. Custom editors receive it through CellEditorProps.icons; the demo’s dropdown editor renders it over the native select using CSS grid. It does not add an indicator to display cells.

<Grid
  data={data}
  columns={columns}
  icons={{ select: <YourChevronIcon /> }}
/>

Set select: false to hide the indicator. The demo editor also accepts cellEditorParams: { icon: <YourChevronIcon /> } for a column-specific override.