Как организовать переиспользуемый компонент таблицы с поддержкой разных наборов колонок?

Концепция переиспользуемого компонента таблицы

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

Как это работает

Компонент Table получает два основных пропса: data (массив объектов) и columns (массив объектов с описанием каждой колонки). Каждый объект колонки содержит как минимум header (заголовок) и render (функцию, которая возвращает JSX для ячейки). Функция render получает текущий элемент данных и может отображать любое содержимое.

Пример реализации

const Table = ({ data, columns }) => {
  return (
    <table>
      <thead>
        <tr>
          {columns.map(col => (
            <th key={col.key}>{col.header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, index) => (
          <tr key={index}>
            {columns.map(col => (
              <td key={col.key}>{col.render(row)}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

// Использование
const columns = [
  { key: 'name', header: 'Имя', render: (row) => row.name },
  { key: 'age', header: 'Возраст', render: (row) => row.age },
  { key: 'action', header: 'Действие', render: (row) => <button>Удалить</button> },
];

<Table data={users} columns={columns} />

Дополнительные возможности

• Сортировка: можно добавить пропс onSort и состояние сортировки.
• Фильтрация: передать функцию фильтрации или компоненты фильтров в конфигурацию колонки.
• Кастомизация стилей: через пропс className или стили для отдельных колонок.

Вывод

Такой подход позволяет легко адаптировать таблицу под разные задачи без переписывания логики. Он особенно полезен в крупных проектах, где много экранов с таблицами, и помогает соблюдать принцип DRY (Don't Repeat Yourself).