src/components/ProductionTables/TableProduction/TableProduction.jsx - master - DevDenzo/ERP

src/components/ProductionTables/TableProduction/TableProduction.jsx
102 строки5 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Подключаем библиотеку React для взаимодействия с виртуальным DOM
import React from "react";
// Подключаем библиотеку шаблонных строк
import classNames from "classnames";

// Подключаем оберточный контейнер таблицы
import {CoreTableContainer} from "../../BalancesTableCommon/index.js";
// Подключаем заголовок светлой таблицы
import {TableStripeLightHeader} from "../../TableHeaders/index.js";

// Подключаем массив данных производства
import { productions } from "../../data/datasets/tables/production.js";

// Подключаем маппинг заголовков таблицы производства
import {productHeadersMapping} from "../mappings/index.js";

// Подключаем иконки чекбокса
import { Check } from "react-bootstrap-icons";

// Подключаем кастомные стили светлой таблицы
import "../styles/_table-stripe-light.less";

// Таблица производства
const TableProduction = () => {

    // Создаем список заголовков таблицы производства и убираем id
    const productHeaders = Object.keys(productions[0]).filter(key => key !== 'id');

    // отображаем таблицу производства
    return (
        <CoreTableContainer>
            <table
                className={classNames(
                "table",
                    "table-stripe-light"
                )}
            >
                <TableStripeLightHeader
                    listHeaders={productHeaders}
                    headerMapping={productHeadersMapping}
                />
                <tbody>
                    {productions.map(item => (
                        <tr
                            key={item.id}
                            className={classNames("table-stripe-light__row")}
                        >
                            {Object.keys(item).map((key, index) => {
                                // Пропускаем идентификатор
                                if (key === "slug") return null;

                                // Если встречаем id, то
                                if (key === "id") {
                                    // отображаем ячейку с чекбоксом
                                    return (
                                        <td className={classNames("table-stripe-light__cell")}>
                                            <div
                                                className={classNames(
                                                    "form-check",
                                                    "table-stripe-light__cell-checkbox"
                                                )}
                                            >
                                                <input
                                                    type="checkbox"
                                                    className={classNames(
                                                        "form-check-input",
                                                        "table-stripe-light__start-checkbox"
                                                    )}
                                                />
                                                <label
                                                    className={classNames(
                                                    "form-check-label",
                                                        "table-stripe-light__button-check"
                                                    )}
                                                >
                                                    <Check size={22} />
                                                </label>
                                            </div>
                                        </td>
                                    );
                                }
                                // рендер остальных ячеек
                                return (
                                    <td
                                        key={index}
                                        className={classNames("table-stripe-light__cell")}
                                    >
                                        <div className={classNames("table-stripe-light__inner-cell")}>
                                            {item[key]}
                                        </div>
                                    </td>
                                );
                            })}
                        </tr>
                    ))}
                </tbody>
            </table>
        </CoreTableContainer>
    );
};

export default TableProduction;