React Massive Table

React Massive Table is a high-performance virtualized React component designed to handle massive datasets efficiently. It offers a range of powerful features, including column resizing, drag-and-drop functionality for reordering, multi-sort capabilities, and an optional group-by interface. With built-in support for light and dark themes through CSS variables and CSS Modules, it seamlessly adapts to different design requirements.

Key Features

• Massive Data Handling: React Massive Table renders only the visible rows along with a configurable overscan, effectively managing large scroll ranges while avoiding browser scroll height limitations.
• Flexible Data Sources: Configure a pluggable data source for fetching rows using a simple getRows(start, end, req) function. This can interact with memory, APIs, IndexedDB, and more.
• Enhanced User Experience: Built-in user experience features include clickable sort toggles, flexible column drag-and-drop reordering, customizable resizing grips, and optional row click handling with a group-by drop zone for organizing data.
• Theming Options: Light and dark themes are readily available, along with customizable token overrides using CSS variables for fine-tuning the aesthetics of the table.
• TypeScript Support: Designed with TypeScript in mind, this component includes comprehensive types for all rows, columns, and event handlers to ensure a smooth development experience.

Quick Start

To get started, minimal, client-side rows can be created using an in-memory array. Here’s a quick usage example:

import { MassiveTable } from 'react-massive-table';

type Row = { id: number; name: string; value: number };
const data: Row[] = Array.from({ length: 100_000 }, (_, i) => ({
  id: i + 1,
  name: `Item ${i + 1}`,
  value: Math.round(Math.random() * 1000),
}));

const columns = [
  { path: ['id'], title: 'ID', width: 80, align: 'right' },
  { path: ['name'], title: 'Name', width: 240 },
  { path: ['value'], title: 'Value', width: 140, align: 'right' },
];

function App() {
  const getRows = (start: number, end: number) => ({
    rows: data.slice(start, end),
    total: data.length,
  });
  return (
    <MassiveTable<Row>
      getRows={getRows}
      rowCount={data.length}
      columns={columns}
      style={{ height: '70vh', width: '100%' }}
    />
  );
}

Core Concepts

• Virtualization: The component optimizes performance by rendering only the rows that are currently visible, utilizing a specified rowCount and the getRows method to fetch necessary data.
• Sorting and Reordering: Sorting is straightforward with header clicks cycling through different order states. Users can also drag header cells to reorder columns easily.
• Grouping Data: Grouping functionality allows for better data organization. Users can drag headers into a group bar and manage group states programmatically.
• Accessibility: The component incorporates accessible features, ensuring that users can interact via keyboard actions and understand interface prompts clearly.

Performance Tips

For optimal performance, it is advisable to maintain stable references in the getRows function and to cache server calls when applicable. Consistent column definitions enhance the component's ability to manage column state effectively.

Test and Demo

The repository includes comprehensive tests for verifying basic rendering and functionality, alongside a demo application to showcase the capabilities of React Massive Table.

**Explore React Massive Table to build efficient data-heavy applications with unparalleled user interactivity and customization possibilities.