Datarix

A high-performance, feature-rich React DataGrid component with virtualization, tree view, sorting, filtering, and more.

Features

✅ Virtualized Rendering - Handles millions of rows smoothly
✅ Column Features - Sorting, resizing, freezing/pinning
✅ Tree View - Hierarchical data with expand/collapse
✅ Search - Fast global search across all columns
✅ Row Selection - Checkbox selection with select all
✅ Pagination - Built-in pagination with customizable page sizes
✅ Density Control - Compact, comfortable, standard row heights
✅ Custom Rendering - Custom cell renderers
✅ Theming - Beautiful default theme with MUI integration

Installation

npm install datarix

Quick Start

import { DataGrid } from 'datarix';

const columns = [
  { id: 'name', label: 'Name', width: 200 },
  { id: 'email', label: 'Email', width: 250 },
  { id: 'status', label: 'Status', width: 120 },
];

const data = [
  { id: 1, name: 'John Doe', email: '[email protected]', status: 'Active' },
  { id: 2, name: 'Jane Smith', email: '[email protected]', status: 'Pending' },
  // ... more data
];

function App() {
  return (
    <DataGrid
      data={data}
      columns={columns}
      height="600px"
    />
  );
}

TreeDataGrid

For hierarchical data:

import { TreeDataGrid } from 'datarix';

const treeData = [
  {
    id: 1,
    name: 'Parent 1',
    children: [
      { id: 11, name: 'Child 1.1' },
      { id: 12, name: 'Child 1.2' },
    ],
  },
  // ... more data
];

function App() {
  return (
    <TreeDataGrid
      data={treeData}
      columns={columns}
      initialExpanded={[1]}
    />
  );
}

Props

DataGrid Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | Array | [] | Array of data objects | | columns | Array | [] | Column definitions | | height | string | '600px' | Grid height | | showToolbar | boolean | true | Show search and density toolbar | | showPagination | boolean | true | Show pagination controls | | density | string | 'comfortable' | Row density: 'compact', 'comfortable', 'standard' |

Column Definition

interface Column {
  id: string;          // Unique identifier
  label: string;       // Display label
  width: number;       // Column width in pixels
  frozen?: boolean;    // Freeze column to left
  renderCell?: (value, column, row) => ReactNode;  // Custom renderer
}

TreeDataGrid Props

Same as DataGrid, plus:

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialExpanded | Array | [] | Array of IDs to expand initially |

Custom Cell Rendering

const columns = [
  {
    id: 'status',
    label: 'Status',
    width: 120,
    renderCell: (value) => (
      <Chip
        label={value}
        color={value === 'Active' ? 'success' : 'default'}
        size="small"
      />
    ),
  },
];

Advanced Usage

Using Hooks

import { useDataGridState, useScrollSync } from 'datarix';

function CustomGrid({ data, columns }) {
  const {
    visibleColumns,
    sortedData,
    handleSort,
    handleResize,
    // ... other state and handlers
  } = useDataGridState(data, columns);

  // Build your custom grid UI
}

License

MIT