Data Grid

A high-velocity, virtualized data grid component capable of smoothly rendering tens of thousands of rows. Features multi-column sorting, live search filtering, pagination, row selection, and interactive column resizing.

import { DataGrid } from '@nofinite/nui';

Interactive Preview

Key Features

• Virtualized High Performance: Handles large datasets (10,000+ items) with minimal DOM memory footprint.
• Interactive Sorting: Click column headers to toggle ascending, descending, or unsorted states.
• Live Search Filtering: Built-in fuzzy search box filters across all visible cell values instantaneously.
• Column Resizing: Drag handles between column boundaries to dynamically customize column widths.
• Selection Support: Optional row checkboxes for single or batch operations with "Select All" support.
• Integrated Pagination: Seamless page jumping and page size dropdown controls.

Usage

Basic Usage

import { DataGrid } from '@nofinite/nui';

const columns = [
  { key: 'id', title: 'ID', sortable: true, width: 80 },
  { key: 'name', title: 'Employee Name', sortable: true },
  { key: 'department', title: 'Department', sortable: true },
  { key: 'status', title: 'Status' },
  { key: 'salary', title: 'Compensation', sortable: true },
];

const rows = [
  { id: '1', name: 'Sophia Miller', department: 'Engineering', status: 'Active', salary: '$145,000' },
  { id: '2', name: 'James Wilson', department: 'Product', status: 'Active', salary: '$130,000' },
  { id: '3', name: 'Ava Johnson', department: 'Design', status: 'On Leave', salary: '$115,000' },
  { id: '4', name: 'Liam Brown', department: 'Marketing', status: 'Active', salary: '$105,000' },
  { id: '5', name: 'Emma Davis', department: 'Operations', status: 'Active', salary: '$95,000' },
];

export default function MyDataView() {
  return (
    <DataGrid 
      columns={columns} 
      rows={rows} 
      pageSize={10} 
    />
  );
}

With Row Selection

<DataGrid
  columns={columns}
  data={rows}
  selectable
  onSelectionChange={(selectedIds) => {
    console.log('Selected rows:', selectedIds);
  }}
/>

Best Practices

Do

• Provide unique id or key fields on every data row to optimize React reconciliation.
• Set explicit initial width numbers for columns containing short status badges or IDs to prevent layout shifts.
• Keep table data in memorized state (useMemo) when running client-side data transformations.

Don't

• Avoid placing heavy un-memoized canvas or video players inside high-frequency scrollable grid cells.
• Do not hide sorting visual indicators from keyboard users; ensure headers remain accessible via Tab and Space/Enter.

API Reference