👩‍💻 Проектирование таблицы в React: SOLID, IoC и Render Props

В админке типового приложения таблицы встречаются на каждом шагу: пользователи, товары, заказы, подписки. Дизайн у них обычно единообразный — различаются только данные, заголовки и возможные действия в ячейках.

Проблема:
Если делать отдельный компонент под каждую сущность (UsersTable, ProductsTable), получим дублирование кода. Если запихать всю логику в один компонент — он превратится в монстра с кучей if-else.

Решение:
Делаем единную таблицу, но гибкую. Вместо хардкода данных и столбцов, выносим рендеринг наружу.

Какие техники применяем?
✔️ Render Props – Передаём renderRow и renderHeader как пропсы. Внутри Table только разметка, логика рендеринга — снаружи.

✔️ Принцип открытости/закрытости – Если для товаров нужна иконка валюты, а для пользователей — аватарка, не лезем внутрь Table, а просто рисуем нужное в переданной функции.

✔️ Dependency Injection – Зависимости (рендер-функции) приходят через пропсы. Можно подставить любую логику без изменений самого компонента.

✔️ Инверсия управления (IoC) – Table не знает, что в нём будет. Управление содержимым — у родителя.

✔️ Паттерн "Стратегия" – renderRow и renderHeader — это стратегии отображения. Подменяем их под задачу.

Итог:
Одна таблица на все случаи, без дублирования, с возможностью кастомизации под любую сущность.

Если тема интересна, сделаю серию постов про другие типовые компоненты: модалки, фильтры, карточки. Как вам идея?

#react #solid #patterns