Создание react-tree-grid: Grid, Tree и TreeGrid для React 18+ без зависимостей

TL;DR: react-tree-grid — это библиотека для React 18+, которая позволяет создавать высокопроизводительные Grid, Tree и TreeGrid компоненты. Она поддерживает виртуализацию, inline-редактирование, сортировку, фильтрацию и другие фичи, при этом не имеет зависимостей.

Введение

В современной фронтенд-разработке работа с большими объемами данных — это вызов. Таблицы, деревья и их комбинации требуют оптимизации производительности, особенно когда речь идет о тысячах строк или узлов. React-tree-grid — это библиотека, которая решает эту проблему, предлагая компоненты для работы с Grid, Tree и TreeGrid без внешних зависимостей.

Основные фичи

Виртуализация (Virtual Scrolling)

Одной из ключевых фич react-tree-grid является виртуализация. Это позволяет эффективно отображать большие объемы данных, например, 100k+ строк, без потери производительности. Виртуализация достигается за счет рендеринга только видимых элементов, что значительно снижает нагрузку на браузер.

import { Grid } from 'react-tree-grid';

const data = Array.from({ length: 100000 }, (_, i) => ({
  id: i,
  name: `Item ${i}`,
}));

function App() {
  return (
    <Grid
      columns={[
        { key: 'id', header: 'ID' },
        { key: 'name', header: 'Name' },
      ]}
      data={data}
      rowHeight={30}
      height={500}
    />
  );
}

Inline-редактирование, сортировка и фильтрация

React-tree-grid поддерживает inline-редактирование, сортировку и фильтрацию данных. Это делает библиотеку универсальным инструментом для создания интерактивных интерфейсов.

import { Grid } from 'react-tree-grid';

const data = [
  { id: 1, name: 'Apple', price: 1.2 },
  { id: 2, name: 'Banana', price: 0.5 },
];

function App() {
  return (
    <Grid
      columns={[
        { key: 'id', header: 'ID' },
        { key: 'name', header: 'Name', editable: true },
        { key: 'price', header: 'Price', sortable: true },
      ]}
      data={data}
    />
  );
}

Frozen Columns и Rowspan/Colspan

Библиотека также поддерживает frozen columns (закрепленные колонки) и возможность объединения ячеек (rowspan/colspan). Это полезно для создания сложных таблиц с фиксированными заголовками или объединенными ячейками.

import { Grid } from 'react-tree-grid';

const data = [
  { id: 1, name: 'Apple', category: 'Fruit' },
  { id: 2, name: 'Carrot', category: 'Vegetable' },
];

function App() {
  return (
    <Grid
      columns={[
        { key: 'id', header: 'ID', frozen: true },
        { key: 'name', header: 'Name' },
        { key: 'category', header: 'Category', colspan: 2 },
      ]}
      data={data}
    />
  );
}

Полная поддержка TypeScript

React-tree-grid полностью написан на TypeScript, что обеспечивает отличную поддержку типов и автодополнение в IDE. Это делает разработку более предсказуемой и безопасной.

Практическое применение

React-tree-grid может быть использован в различных сценариях, таких как:

Админ-панели: для отображения и управления большими объемами данных.
Финансовые приложения: для создания сложных таблиц с поддержкой сортировки и фильтрации.
Файловые менеджеры: для отображения иерархических данных в виде дерева.

Пример использования TreeGrid:

import { TreeGrid } from 'react-tree-grid';

const treeData = [
  {
    id: 1,
    name: 'Folder 1',
    children: [
      { id: 2, name: 'File 1.1' },
      { id: 3, name: 'File 1.2' },
    ],
  },
  { id: 4, name: 'Folder 2' },
];

function App() {
  return (
    <TreeGrid
      columns={[
        { key: 'id', header: 'ID' },
        { key: 'name', header: 'Name' },
      ]}
      data={treeData}
    />
  );
}

Заключение

React-tree-grid — это мощный инструмент для создания высокопроизводительных Grid, Tree и TreeGrid компонентов в React 18+. Благодаря виртуализации, inline-редактированию и другим фичам, библиотека позволяет эффективно работать с большими объемами данных. Полная поддержка TypeScript делает разработку более удобной и безопасной. Попробуйте react-tree-grid в своих проектах и поделитесь обратной связью!

Источник: https://github.com/itsmemyk/react-tree-grid