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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { ROLES } from '../../types/role/role';
import { TableBody } from '../tableBody/tableBody';
import { TableCaption } from '../tableCaption/tableCaption';
import { TableDivider } from '../tableDivider/tableDivider';
import { Table as TableV2 } from '../tableV2/table';
import { DataTableHead } from './components/dataTableHead';
import { DataTableRows } from './components/dataTableRows';
import { HiddenDataTableHead } from './components/hiddenDataTableHead';
import { LeftBoxShadowContainerStyled, RightBoxShadowContainerStyled, ScrollableContainerStyled, WrapperStyled, } from './dataTable.styled';
import { applyPositionToWrapper, applyZIndexToWrapper } from './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 (_jsxs(WrapperStyled, { ref: ref, "$styles": styles, "data-testid": dataTestId, children: [_jsxs(ScrollableContainerStyled, { "data-datatable-scrollable-container": true, "$styles": styles, "aria-label": hasScroll ? props['aria-label'] : undefined, "aria-labelledby": hasScroll ? props['aria-labelledby'] : undefined, role: hasScroll ? ROLES.REGION : undefined, tabIndex: hasScroll ? 0 : undefined, children: [_jsxs(TableV2, { "aria-hidden": usingRowGroups ? true : undefined, autoLeftStickyCalc: false, autoRightStickyCalc: false, component: usingRowGroups ? 'div' : undefined, disableShadowEffects: true, hasScrollDisabled: true, sticky: stickyHead, variant: styles?.table?.variant, ...applyZIndexToWrapper({ tableConfig: config?.table, zIndex: styles?.table?.z_index }), children: [caption?.content && (_jsx(TableCaption, { component: usingRowGroups ? 'div' : undefined, variant: styles?.tableCaption?.variant, ...caption, children: caption.content })), _jsx(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 && (_jsx(TableBody, { variant: styles?.tableBody?.variant, ...config?.tableBody, children: _jsx(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 (_jsxs(React.Fragment, { children: [rowGroup.divider && (_jsx(TableDivider, { variant: "DEFAULT", ...rowGroup.divider, children: rowGroup.divider?.content })), _jsxs(TableV2, { autoLeftStickyCalc: false, autoRightStickyCalc: false, disableShadowEffects: true, hasScrollDisabled: true, variant: styles?.rowGroup?.table?.variant, ...applyPositionToWrapper({
                                        tableConfig: rowGroup.config?.table,
                                        position: 'static',
                                    }), children: [rowGroup.caption?.content && (_jsx(TableCaption, { variant: styles?.rowGroup?.tableCaption?.variant, ...rowGroup.caption, children: rowGroup.caption?.content })), _jsx(HiddenDataTableHead, { columns: columns, tableHeadCellVariant: styles?.rowGroup?.tableHeadCell?.variant, tableHeadRowVariant: styles?.rowGroup?.tableHeadRow?.variant, tableHeadVariant: styles?.rowGroup?.tableHead?.variant }), _jsx(TableBody, { variant: styles?.rowGroup?.tableBody?.variant, ...rowGroup.config?.tableBody, children: _jsx(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));
                    })] }), _jsx(LeftBoxShadowContainerStyled, { "data-datatable-left-shadow": true, "$styles": styles }), _jsx(RightBoxShadowContainerStyled, { "data-datatable-right-shadow": true, "$styles": styles })] }));
};
export const DataTableStandAlone = React.forwardRef(DataTableStandAloneComponent);
//# sourceMappingURL=dataTableStandAlone.js.map