@kubit-ui-web/react-components/dist/cjs/components/dataTable/dataTableStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTableStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const role_1 = require("../../types/role/role");
const tableBody_1 = require("../tableBody/tableBody");
const tableCaption_1 = require("../tableCaption/tableCaption");
const tableDivider_1 = require("../tableDivider/tableDivider");
const table_1 = require("../tableV2/table");
const dataTableHead_1 = require("./components/dataTableHead");
const dataTableRows_1 = require("./components/dataTableRows");
const hiddenDataTableHead_1 = require("./components/hiddenDataTableHead");
const dataTable_styled_1 = require("./dataTable.styled");
const tableConfig_1 = require("./utils/tableConfig");
const DataTableStandAloneComponent = ({ dataTestId = 'data-table', styles, hasScroll, columns, rowGroups, rows, activeRows, hoverable, hoverableRows, nonHoverableRows, stickyHead, config, caption, ...props }, ref) => {
    const usingRowGroups = rowGroups && rowGroups.length > 0;
    return ((0, jsx_runtime_1.jsxs)(dataTable_styled_1.WrapperStyled, { ref: ref, "$styles": styles, "data-testid": dataTestId, children: [(0, jsx_runtime_1.jsxs)(dataTable_styled_1.ScrollableContainerStyled, { "data-datatable-scrollable-container": true, "$styles": styles, "aria-label": hasScroll ? props['aria-label'] : undefined, "aria-labelledby": hasScroll ? props['aria-labelledby'] : undefined, role: hasScroll ? role_1.ROLES.REGION : undefined, tabIndex: hasScroll ? 0 : undefined, children: [(0, jsx_runtime_1.jsxs)(table_1.Table, { "aria-hidden": usingRowGroups ? true : undefined, autoLeftStickyCalc: false, autoRightStickyCalc: false, component: usingRowGroups ? 'div' : undefined, disableShadowEffects: true, hasScrollDisabled: true, sticky: stickyHead, variant: styles?.table?.variant, ...(0, tableConfig_1.applyZIndexToWrapper)({ tableConfig: config?.table, zIndex: styles?.table?.z_index }), children: [caption?.content && ((0, jsx_runtime_1.jsx)(tableCaption_1.TableCaption, { component: usingRowGroups ? 'div' : undefined, variant: styles?.tableCaption?.variant, ...caption, children: caption.content })), (0, jsx_runtime_1.jsx)(dataTableHead_1.DataTableHead, { columns: columns, sticky: stickyHead, tableHeadCellVariant: styles?.tableHeadCell?.variant, tableHeadConfig: config?.tableHead, tableHeadRowConfig: config?.tableHeadRow, tableHeadRowVariant: styles?.tableHeadRow?.variant, tableHeadVariant: styles?.tableHead?.variant, usingRowGroups: usingRowGroups }), !usingRowGroups && rows && rows.length > 0 && ((0, jsx_runtime_1.jsx)(tableBody_1.TableBody, { variant: styles?.tableBody?.variant, ...config?.tableBody, children: (0, jsx_runtime_1.jsx)(dataTableRows_1.DataTableRows, { activeRows: activeRows, columns: columns, hoverable: hoverable, hoverableRows: hoverableRows, nonHoverableRows: nonHoverableRows, rows: rows, tableBodyCellVariant: styles?.tableBodyCell?.variant, tableBodyRowVariant: styles?.tableBodyRow?.variant, usingRowGroups: usingRowGroups }) }))] }), rowGroups?.map((rowGroup, index) => {
                        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [rowGroup.divider && ((0, jsx_runtime_1.jsx)(tableDivider_1.TableDivider, { variant: "DEFAULT", ...rowGroup.divider, children: rowGroup.divider?.content })), (0, jsx_runtime_1.jsxs)(table_1.Table, { autoLeftStickyCalc: false, autoRightStickyCalc: false, disableShadowEffects: true, hasScrollDisabled: true, variant: styles?.rowGroup?.table?.variant, ...(0, tableConfig_1.applyPositionToWrapper)({
                                        tableConfig: rowGroup.config?.table,
                                        position: 'static',
                                    }), children: [rowGroup.caption?.content && ((0, jsx_runtime_1.jsx)(tableCaption_1.TableCaption, { variant: styles?.rowGroup?.tableCaption?.variant, ...rowGroup.caption, children: rowGroup.caption?.content })), (0, jsx_runtime_1.jsx)(hiddenDataTableHead_1.HiddenDataTableHead, { columns: columns, tableHeadCellVariant: styles?.rowGroup?.tableHeadCell?.variant, tableHeadRowVariant: styles?.rowGroup?.tableHeadRow?.variant, tableHeadVariant: styles?.rowGroup?.tableHead?.variant }), (0, jsx_runtime_1.jsx)(tableBody_1.TableBody, { variant: styles?.rowGroup?.tableBody?.variant, ...rowGroup.config?.tableBody, children: (0, jsx_runtime_1.jsx)(dataTableRows_1.DataTableRows, { activeRows: activeRows, columns: columns, hoverable: hoverable, hoverableRows: hoverableRows, nonHoverableRows: nonHoverableRows, rows: rowGroup.rows, tableBodyCellVariant: styles?.rowGroup?.tableBodyCell?.variant, tableBodyRowVariant: styles?.rowGroup?.tableBodyRow?.variant, usingRowGroups: usingRowGroups }) })] })] }, index));
                    })] }), (0, jsx_runtime_1.jsx)(dataTable_styled_1.LeftBoxShadowContainerStyled, { "data-datatable-left-shadow": true, "$styles": styles }), (0, jsx_runtime_1.jsx)(dataTable_styled_1.RightBoxShadowContainerStyled, { "data-datatable-right-shadow": true, "$styles": styles })] }));
};
exports.DataTableStandAlone = react_1.default.forwardRef(DataTableStandAloneComponent);
//# sourceMappingURL=dataTableStandAlone.js.map