Фиксированные колонки в таблице React: Полное руководство

React Table — мощный инструмент для отображения табличных данных, но управление фиксированными столбцами может быть сложным. Это руководство предоставляет четкий, специфичный для версии подход к сохранению столбцов неподвижными при горизонтальной прокрутке.

Содержание

• Использование react-table-sticky для React Table v7 и выше
• Использование react-table-hoc-fixed-columns для React Table v6 и ниже

Использование react-table-sticky для React Table v7 и выше

В React Table v7 были внесены значительные изменения в API. Для фиксированных столбцов react-table-sticky предлагает упрощенное решение.

1. Установка

npm install react-table-sticky
# или
yarn add react-table-sticky

2. Реализация

Этот пример демонстрирует фиксацию столбца ‘ID’ слева:

import React from 'react';
import { useTable, useSticky } from 'react-table';
import { FixedColumnsTable } from 'react-table-sticky';

const data = [
  { id: 1, name: 'John Doe', age: 30, city: 'New York' },
  { id: 2, name: 'Jane Doe', age: 25, city: 'London' },
  // ... больше данных
];

const columns = [
  { Header: 'ID', accessor: 'id', sticky: 'left' },
  { Header: 'Name', accessor: 'name' },
  { Header: 'Age', accessor: 'age' },
  { Header: 'City', accessor: 'city' },
];

function MyTable({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data }, useSticky);

  return (
    <FixedColumnsTable {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </FixedColumnsTable>
  );
}

export default MyTable;

Свойство sticky: 'left' в определении столбца делает столбец ‘ID’ фиксированным. Используйте sticky: 'right' для фиксированных столбцов справа.

Использование react-table-hoc-fixed-columns для React Table v6 и ниже

Для старых версий React Table react-table-hoc-fixed-columns предоставляет решение с использованием Higher-Order Components (HOC).

1. Установка

npm install react-table-hoc-fixed-columns
# или
yarn add react-table-hoc-fixed-columns

2. Реализация

Реализация зависит от вашей конкретной версии React Table. Обратитесь к документации библиотеки для подробных инструкций. Общий подход включает в себя обертывание вашего компонента таблицы с помощью HOC fixedColumns. Упрощенный пример (см. документацию библиотеки для подробной информации о конкретной версии):

import React from 'react';
import { useTable } from 'react-table';
import { fixedColumns } from 'react-table-hoc-fixed-columns';

// ... ваше определение данных и столбцов ...

const MyTable = fixedColumns(({ getTableProps, ...rest }) => (
  <YourOriginalTableComponent {...rest} {...getTableProps()} />
));

// ... остальная часть вашего компонента

Всегда обращайтесь к официальной документации react-table-sticky и react-table-hoc-fixed-columns для получения наиболее точной и актуальной информации.