Data Grid Overview

Radiant Grid is a high-performance, canvas-accelerated data grid for React applications. Engineered for speed and flexibility, it handles millions of rows with sub-millisecond scroll latency.

Core Principles

Hybrid Rendering: Uses DOM for headers and interactive elements, while the grid body is rendered on a high-performance 2D Canvas.
Zero Latency: Virtualized rendering ensures that DOM nodes are only created for what is visible on screen.
Type-Safe: Built with TypeScript from the ground up, providing excellent developer ergonomics.
Rich UI: Native support for complex cell renderers, sparklines, and conditional formatting.

Key Features

Performance

50,000+ rows rendered effortlessly with GPU acceleration and optimized memory management.

Pinned Columns

Lock important columns to the left or right to keep context during horizontal scrolling.

Rich Filtering

Multi-column filtering with support for text, numeric, date, and custom checklist filters.

Export

Native support for exporting data to CSV, Excel, JSON, and HTML formats directly from the toolbar.

Installation

npm install @radiant/grid

Basic Usage

Getting started is as simple as defining your columns and providing your data:

import { RadiantGrid } from '@radiant/grid';

const columns = [
  { id: 'name', field: 'name', headerName: 'Name', width: 200 },
  { id: 'age', field: 'age', headerName: 'Age', width: 100, type: 'number' },
];

const data = [
  { name: 'John Doe', age: 30 },
  { name: 'Jane Smith', age: 25 },
];

export default function MyGrid() {
  return <RadiantGrid columns={columns} data={data} height={400} />;
}