Data Grid

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeDataGridDemo}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeDataGridDemo/></NativeScope>}

Columns and editing

Pass typed columns, your data, and a unique, stable getRowId. Provide onDataChange to enable editing. Text, number, and select editors reuse Helios UI inputs and selects. Set bounds with min and max, or reject values with validate.

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeDataGrid,type NativeDataGridColumn} from '@helios-ui/react';
export function Example(){
type Row={id:string;customer:string;seats:number;status:string};const[rows,setRows]=useState<Row[]>([{id:'a',customer:'Aarav',seats:12,status:'Active'}]);const columns:NativeDataGridColumn<Row>[]=[{key:'customer',header:'Customer',width:200},{key:'seats',header:'Seats',type:'number',min:1,max:1000,summary:'sum'},{key:'status',header:'Status',type:'select',options:['Active','Paused']}];
return <NativeScope><NativeDataGrid aria-label="Renewals"data={rows}onDataChange={setRows}getRowId={row=>row.id}columns={columns}height={360}/></NativeScope>;
}

Search, filter, and export

Search across all columns, click a heading to cycle through ascending, descending, and original order, or filter by exact values. Select columns automatically appear in the Filter menu; add filterable to other columns. Hide columns, resize their dividers, and switch between comfortable and compact rows.

Keyboard and clipboard

Tab into the grid and use arrow keys to move between cells. Hold Shift to extend a range, or drag across cells with the mouse. Home and End move across a row; add ⌘ or Ctrl to jump to the first or last record. Page Up and Page Down move by a viewport. ⌘/Ctrl+A selects all cells.

10,000 rows, a small viewport

The preview above contains 10,000 actual records. Fixed-height virtualization mounts only the rows in and around the viewport. The header and summary remain outside the scrolling body; a progressive blur softens the top edge as you scroll. Set height to change the viewport height.

Right-to-left and read-only

Use DirectionProvider to set the reading direction. This read-only example freezes the first column on the right and mirrors horizontal keyboard navigation. Your column labels and record values can use any language.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="data-grid" id="rtl"/>}