xmlui 0.7.14 → 0.7.15

package/dist/scripts/src/components/Table/TableNative.js

@@ -0,0 +1,470 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const fi_1 = require("react-icons/fi");
+const react_table_1 = require("@tanstack/react-table");
+const Table_module_scss_1 = __importDefault(require("./Table.module.scss"));
+require("./react-table-config.d.ts");
+const ButtonNative_1 = require("@components/Button/ButtonNative");
+const SpinnerNative_1 = require("@components/Spinner/SpinnerNative");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const useRowSelection_1 = __importDefault(require("./useRowSelection"));
+const Toggle_1 = require("@components/Toggle/Toggle");
+const IconNative_1 = require("@components/Icon/IconNative");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const lodash_es_1 = require("lodash-es");
+const constants_1 = require("@components-core/constants");
+const ScrollContext_1 = require("@components-core/ScrollContext");
+const misc_1 = require("@components-core/utils/misc");
+const react_dom_1 = require("react-dom");
+const hooks_1 = require("@components-core/utils/hooks");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const transformThemeVars_1 = require("@components-core/theming/transformThemeVars");
+function defaultIsRowDisabled(_) {
+    return false;
+}
+const SELECT_COLUMN_WIDTH = 42;
+const DEFAULT_PAGE_SIZES = [10];
+//These are the important styles to make sticky column pinning work!
+//Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc.
+//View the index.css file for more needed styles such as border-collapse: separate
+const getCommonPinningStyles = (column) => {
+    const isPinned = column.getIsPinned();
+    // const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+    // const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+    return {
+        // boxShadow: isLastLeftPinnedColumn
+        //   ? "-4px 0 4px -4px gray inset"
+        //   : isFirstRightPinnedColumn
+        //   ? "4px 0 4px -4px gray inset"
+        //   : undefined,
+        left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+        right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+        opacity: isPinned ? 0.95 : undefined,
+        position: isPinned ? "sticky" : "relative",
+        backgroundColor: isPinned ? "inherit" : undefined,
+        zIndex: isPinned ? 1 : undefined,
+    };
+};
+// eslint-disable-next-line react/display-name
+exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, columns = constants_1.EMPTY_ARRAY, isPaginated = false, loading = false, headerHeight, rowsSelectable = false, enableMultiRowSelection = true, pageSizes = DEFAULT_PAGE_SIZES, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = "ascending", iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, noDataRenderer, autoFocus = false, hideHeader = false, hideNoDataView = false, alwaysShowSelectionHeader = false, registerComponentApi, onSelectionDidChange,
+// cols
+ }, forwardedRef) => {
+    var _a, _b, _c, _d;
+    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
+    const safeData = Array.isArray(data) ? data : constants_1.EMPTY_ARRAY;
+    const wrapperRef = (0, react_1.useRef)(null);
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(wrapperRef, forwardedRef) : wrapperRef;
+    const tableRef = (0, react_1.useRef)(null);
+    const estimatedHeightRef = (0, react_1.useRef)(null);
+    const isSortControlled = sortBy !== undefined;
+    const safeColumns = (0, react_1.useMemo)(() => {
+        if (columns) {
+            return columns;
+        }
+        if (!safeData.length) {
+            return constants_1.EMPTY_ARRAY;
+        }
+        return Object.keys(safeData[0]).map((key) => ({ header: key, accessorKey: key }));
+    }, [columns, safeData]);
+    (0, react_1.useEffect)(() => {
+        if (autoFocus) {
+            wrapperRef.current.focus();
+        }
+    }, [autoFocus]);
+    // --- Keep track of visible table rows
+    const [visibleItems, setVisibleItems] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
+    // --- Get the operations to manage selected rows in a table
+    const { toggleRow, checkAllRows, focusedIndex, onKeyDown, selectedRowIdMap, idKey, selectionApi, } = (0, useRowSelection_1.default)({
+        items: safeData,
+        visibleItems,
+        rowsSelectable,
+        enableMultiRowSelection,
+        onSelectionDidChange,
+    });
+    // --- Create data with order information whenever the items in the table change
+    const dataWithOrder = (0, react_1.useMemo)(() => {
+        return safeData.map((item, index) => {
+            return Object.assign(Object.assign({}, item), { order: index + 1 });
+        });
+    }, [safeData]);
+    // --- Local or external sorting of data
+    const [_sortBy, _setSortBy] = (0, react_1.useState)(sortBy);
+    const [_sortingDirection, _setSortingDirection] = (0, react_1.useState)(sortingDirection);
+    (0, react_1.useLayoutEffect)(() => {
+        _setSortBy(sortBy);
+    }, [sortBy]);
+    (0, react_1.useLayoutEffect)(() => {
+        _setSortingDirection(sortingDirection);
+    }, [sortingDirection]);
+    const sortedData = (0, react_1.useMemo)(() => {
+        if (!_sortBy || isSortControlled) {
+            return dataWithOrder;
+        }
+        return (0, lodash_es_1.orderBy)(dataWithOrder, _sortBy, _sortingDirection === "ascending" ? "asc" : "desc");
+    }, [_sortBy, _sortingDirection, dataWithOrder, isSortControlled]);
+    const _updateSorting = (0, react_1.useCallback)((accessorKey) => __awaiter(void 0, void 0, void 0, function* () {
+        let newDirection = "ascending";
+        let newSortBy = accessorKey;
+        // The current key is the same as the last -> the user clicked on the same header twice
+        if (_sortBy === accessorKey) {
+            // The last sorting direction was ascending -> make it descending
+            if (_sortingDirection === "ascending") {
+                newDirection = "descending";
+                // The last sorting direction was descending -> remove the sorting from the current key
+            }
+            else {
+                newSortBy = undefined;
+            }
+        }
+        // --- Check if sorting is allowed
+        const result = yield (willSort === null || willSort === void 0 ? void 0 : willSort(newSortBy, newDirection));
+        if (result === false) {
+            return;
+        }
+        _setSortingDirection(newDirection);
+        _setSortBy(newSortBy);
+        // External callback function is always called.
+        // Even if sorting is internal, we can notify other components through this callback
+        sortingDidChange === null || sortingDidChange === void 0 ? void 0 : sortingDidChange(newSortBy, newDirection);
+    }), [_sortBy, willSort, sortingDidChange, _sortingDirection]);
+    // --- Prepare column renderers according to columns defined in the table
+    const columnsWithCustomCell = (0, react_1.useMemo)(() => {
+        return safeColumns.map((col, idx) => {
+            var _a, _b;
+            // --- Obtain column width information
+            const { width, starSizedWidth } = getColumnWidth(col.width, true, "width");
+            const { width: minWidth } = getColumnWidth(col.minWidth, false, "minWidth");
+            const { width: maxWidth } = getColumnWidth(col.maxWidth, false, "maxWidth");
+            const customColumn = Object.assign(Object.assign({}, col), { header: (_b = (_a = col.header) !== null && _a !== void 0 ? _a : col.accessorKey) !== null && _b !== void 0 ? _b : " ", id: 'col_' + idx, size: width, minSize: minWidth, maxSize: maxWidth, enableResizing: col.canResize, enableSorting: col.canSort, enablePinning: col.pinTo !== undefined, meta: {
+                    starSizedWidth,
+                    pinTo: col.pinTo,
+                    style: col.style,
+                    accessorKey: col.accessorKey,
+                    cellRenderer: col.cellRenderer,
+                } });
+            return customColumn;
+            function getColumnWidth(colWidth, allowStarSize, propName) {
+                let starSizedWidth;
+                let width;
+                const resolvedWidth = (0, transformThemeVars_1.isThemeVarName)(colWidth) ? getThemeVar(colWidth) : colWidth;
+                if (typeof resolvedWidth === "number") {
+                    width = resolvedWidth;
+                }
+                else if (typeof resolvedWidth === "string") {
+                    const oneStarSizedWidthMatch = resolvedWidth.match(/^\s*\*\s*$/);
+                    if (allowStarSize && oneStarSizedWidthMatch) {
+                        starSizedWidth = "1*";
+                    }
+                    else {
+                        const starSizedWidthMatch = resolvedWidth.match(/^\s*(\d+)\s*\*\s*$/);
+                        if (allowStarSize && starSizedWidthMatch) {
+                            starSizedWidth = starSizedWidthMatch[1] + "*";
+                        }
+                        else {
+                            const pixelWidthMatch = resolvedWidth.match(/^\s*(\d+)\s*(px)?\s*$/);
+                            if (pixelWidthMatch) {
+                                width = Number(pixelWidthMatch[1]);
+                            }
+                            else {
+                                throw new Error(`Invalid TableColumnDef '${propName}' value: ${resolvedWidth}`);
+                            }
+                        }
+                    }
+                }
+                if (width === undefined && starSizedWidth === undefined && allowStarSize) {
+                    starSizedWidth = "1*";
+                }
+                return { width, starSizedWidth };
+            }
+        });
+    }, [getThemeVar, safeColumns]);
+    // --- Prepare column renderers according to columns defined in the table supporting optional row selection
+    const columnsWithSelectColumn = (0, react_1.useMemo)(() => {
+        // --- Extend the columns with a selection checkbox (indeterminate)
+        const selectColumn = {
+            id: "select",
+            size: SELECT_COLUMN_WIDTH,
+            enableResizing: false,
+            enablePinning: true,
+            meta: {
+                pinTo: "left",
+            },
+            header: ({ table }) => enableMultiRowSelection ? ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { className: (0, classnames_1.default)(Table_module_scss_1.default.checkBoxWrapper, {
+                    [Table_module_scss_1.default.showInHeader]: alwaysShowSelectionHeader,
+                }),
+                value: table.getIsAllRowsSelected(),
+                indeterminate: table.getIsSomeRowsSelected(),
+                onDidChange: (checked) => {
+                    checkAllRows(checked);
+                } })) : null,
+            cell: ({ row }) => ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { className: Table_module_scss_1.default.checkBoxWrapper,
+                value: row.getIsSelected(),
+                indeterminate: row.getIsSomeSelected(),
+                onDidChange: () => {
+                    toggleRow(row.original, { metaKey: true });
+                } })),
+        };
+        return rowsSelectable ? [selectColumn, ...columnsWithCustomCell] : columnsWithCustomCell;
+    }, [
+        rowsSelectable,
+        columnsWithCustomCell,
+        enableMultiRowSelection,
+        alwaysShowSelectionHeader,
+        checkAllRows,
+        toggleRow,
+    ]);
+    // --- Set up page information (using the first page size option)
+    // const [pagination, setPagination] = useState<PaginationState>();
+    const [pagination, setPagination] = (0, react_1.useState)({
+        pageSize: isPaginated ? pageSizes[0] : Number.MAX_VALUE,
+        pageIndex: 0,
+    });
+    const prevIsPaginated = (0, hooks_1.usePrevious)(isPaginated);
+    (0, react_1.useEffect)(() => {
+        if (!prevIsPaginated && isPaginated) {
+            setPagination((prev) => {
+                return Object.assign(Object.assign({}, prev), { pageSize: pageSizes[0] });
+            });
+        }
+        if (prevIsPaginated && !isPaginated) {
+            setPagination((prev) => {
+                return {
+                    pageIndex: 0,
+                    pageSize: Number.MAX_VALUE,
+                };
+            });
+        }
+    }, [isPaginated, pageSizes, prevIsPaginated]);
+    const [columnSizing, setColumnSizing] = (0, react_1.useState)({});
+    const columnPinning = (0, react_1.useMemo)(() => {
+        const left = [];
+        const right = [];
+        columnsWithSelectColumn.forEach((col) => {
+            var _a, _b;
+            if (((_a = col.meta) === null || _a === void 0 ? void 0 : _a.pinTo) === "right") {
+                right.push(col.id);
+            }
+            if (((_b = col.meta) === null || _b === void 0 ? void 0 : _b.pinTo) === "left") {
+                left.push(col.id);
+            }
+        });
+        return {
+            left,
+            right,
+        };
+    }, [columnsWithSelectColumn]);
+    // --- Use the @tanstack/core-table component that manages a table
+    const table = (0, react_table_1.useReactTable)({
+        columns: columnsWithSelectColumn,
+        data: sortedData,
+        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+        getPaginationRowModel: isPaginated ? (0, react_table_1.getPaginationRowModel)() : undefined,
+        enableRowSelection: rowsSelectable,
+        enableMultiRowSelection,
+        columnResizeMode: "onChange",
+        getRowId: (0, react_1.useCallback)((originalRow) => {
+            return originalRow[idKey] + "";
+        }, [idKey]),
+        state: (0, react_1.useMemo)(() => ({
+            pagination,
+            rowSelection: selectedRowIdMap,
+            columnSizing,
+            columnPinning,
+        }), [columnPinning, columnSizing, pagination, selectedRowIdMap]),
+        onColumnSizingChange: setColumnSizing,
+        onPaginationChange: setPagination,
+    });
+    // --- Select the set of visible rows whenever the table rows change
+    const rows = table.getRowModel().rows;
+    (0, react_1.useEffect)(() => {
+        setVisibleItems(rows.map((row) => row.original));
+    }, [rows]);
+    const scrollRef = (0, react_1.useContext)(ScrollContext_1.ScrollContext);
+    const hasOutsideScroll = scrollRef &&
+        (style === null || style === void 0 ? void 0 : style.maxHeight) === undefined &&
+        (style === null || style === void 0 ? void 0 : style.height) === undefined &&
+        (style === null || style === void 0 ? void 0 : style.flex) === undefined;
+    const myObserveElementOffset = (0, react_1.useCallback)((instance, cb) => {
+        return (0, react_virtual_1.observeElementOffset)(instance, (offset, isScrolling) => {
+            var _a;
+            //based on this: https://github.com/TanStack/virtual/issues/387
+            const parentContainerOffset = !hasOutsideScroll ? 0 : ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0;
+            cb(offset - parentContainerOffset, isScrolling);
+        });
+    }, [hasOutsideScroll]);
+    const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: (0, react_1.useCallback)(() => {
+            return hasOutsideScroll && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) ? scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current : wrapperRef.current;
+        }, [scrollRef, hasOutsideScroll]),
+        observeElementOffset: myObserveElementOffset,
+        estimateSize: (0, react_1.useCallback)(() => {
+            return estimatedHeightRef.current || 30;
+        }, []),
+        overscan: 5,
+    });
+    const paddingTop = rowVirtualizer.getVirtualItems().length > 0
+        ? ((_b = (_a = rowVirtualizer.getVirtualItems()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.start) || 0
+        : 0;
+    const paddingBottom = rowVirtualizer.getVirtualItems().length > 0
+        ? rowVirtualizer.getTotalSize() -
+            (((_d = (_c = rowVirtualizer.getVirtualItems()) === null || _c === void 0 ? void 0 : _c[rowVirtualizer.getVirtualItems().length - 1]) === null || _d === void 0 ? void 0 : _d.end) ||
+                0)
+        : 0;
+    const hasData = safeData.length !== 0;
+    const touchedSizesRef = (0, react_1.useRef)({});
+    const columnSizeTouched = (0, react_1.useCallback)((id) => {
+        touchedSizesRef.current[id] = true;
+    }, []);
+    const recalculateStarSizes = (0, misc_1.useEvent)(() => {
+        if (!tableRef.current) {
+            return;
+        }
+        let availableWidth = tableRef.current.clientWidth - 1;
+        // -1 to prevent horizontal scroll in scaled browsers (when you zoom in)
+        const widths = {};
+        const columnsWithoutSize = [];
+        const numberOfUnitsById = {};
+        table.getAllColumns().forEach((column) => {
+            var _a, _b;
+            if (column.columnDef.size !== undefined || touchedSizesRef.current[column.id]) {
+                availableWidth -= columnSizing[column.id] || column.columnDef.size || 0;
+            }
+            else {
+                columnsWithoutSize.push(column);
+                let units;
+                if ((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.starSizedWidth) {
+                    units = Number((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.starSizedWidth.replace("*", "").trim()) || 1;
+                }
+                else {
+                    units = 1;
+                }
+                numberOfUnitsById[column.id] = units;
+            }
+        });
+        const numberOfAllUnits = Object.values(numberOfUnitsById).reduce((acc, val) => acc + val, 0);
+        columnsWithoutSize.forEach((column) => {
+            widths[column.id] = Math.floor(availableWidth * (numberOfUnitsById[column.id] / numberOfAllUnits));
+        });
+        (0, react_dom_1.flushSync)(() => {
+            setColumnSizing((prev) => {
+                return Object.assign(Object.assign({}, prev), widths);
+            });
+        });
+    });
+    (0, hooks_1.useResizeObserver)(tableRef, recalculateStarSizes);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        queueMicrotask(() => {
+            recalculateStarSizes();
+        });
+    }, [recalculateStarSizes, safeColumns]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        registerComponentApi(selectionApi);
+    }, [registerComponentApi, selectionApi]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(Table_module_scss_1.default.wrapper, { [Table_module_scss_1.default.noScroll]: hasOutsideScroll }), tabIndex: -1, onKeyDown: onKeyDown, ref: ref, style: style, children: [(0, jsx_runtime_1.jsxs)("table", { className: Table_module_scss_1.default.table, ref: tableRef, style: { borderRight: "1px solid transparent" }, children: [!hideHeader && ((0, jsx_runtime_1.jsx)("thead", { style: { height: headerHeight }, className: Table_module_scss_1.default.headerWrapper, children: table.getHeaderGroups().map((headerGroup, headerGroupIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: (0, classnames_1.default)(Table_module_scss_1.default.headerRow, {
+                                [Table_module_scss_1.default.allSelected]: table.getIsAllRowsSelected(),
+                            }), children: headerGroup.headers.map((header, headerIndex) => {
+                                var _a, _b;
+                                const _c = ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.style) || {}, { width } = _c, style = __rest(_c, ["width"]);
+                                const size = header.getSize();
+                                return ((0, jsx_runtime_1.jsxs)("th", { className: Table_module_scss_1.default.columnCell, colSpan: header.colSpan, style: Object.assign({ position: "relative", width: size }, getCommonPinningStyles(header.column)), children: [(0, jsx_runtime_1.jsx)(ClickableHeader, { hasSorting: header.column.columnDef.enableSorting, updateSorting: () => { var _a; return _updateSorting((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.accessorKey); }, children: (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.headerContent, style: style, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), (0, jsx_runtime_1.jsx)("span", { style: { display: "inline-flex", maxWidth: 16 }, children: header.column.columnDef.enableSorting && ((0, jsx_runtime_1.jsx)(ColumnOrderingIndicator, { iconSortAsc: iconSortAsc, iconSortDesc: iconSortDesc, iconNoSort: iconNoSort, direction: ((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.accessorKey) === _sortBy
+                                                                ? _sortingDirection
+                                                                : undefined })) })] }) }), header.column.getCanResize() && ((0, jsx_runtime_1.jsx)("div", { onDoubleClick: () => {
+                                                touchedSizesRef.current[header.column.id] = false;
+                                                if (header.column.columnDef.size !== undefined) {
+                                                    header.column.resetSize();
+                                                }
+                                                else {
+                                                    recalculateStarSizes();
+                                                }
+                                            },
+                                            onMouseDown: (event) => {
+                                                columnSizeTouched(header.column.id);
+                                                header.getResizeHandler()(event);
+                                            },
+                                            onTouchStart: (event) => {
+                                                columnSizeTouched(header.column.id);
+                                                header.getResizeHandler()(event);
+                                            },
+                                            className: (0, classnames_1.default)(Table_module_scss_1.default.resizer, {
+                                                [Table_module_scss_1.default.isResizing]: header.column.getIsResizing(),
+                                            }) }))] }, `${header.id}-${headerIndex}`));
+                            }) }, `${headerGroup.id}-${headerGroupIndex}`))) })), hasData && (0, jsx_runtime_1.jsxs)("tbody", { className: Table_module_scss_1.default.tableBody, children: [paddingTop > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { style: { height: `${paddingTop}px` } }) })), rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                                const rowIndex = virtualRow.index;
+                                const row = rows[rowIndex];
+                                return ((0, jsx_runtime_1.jsx)("tr", { "data-index": rowIndex, className: (0, classnames_1.default)(Table_module_scss_1.default.row, {
+                                        [Table_module_scss_1.default.selected]: row.getIsSelected(),
+                                        [Table_module_scss_1.default.focused]: focusedIndex === rowIndex,
+                                        [Table_module_scss_1.default.disabled]: rowDisabledPredicate(row.original),
+                                    }), ref: (el) => {
+                                        if (el && estimatedHeightRef.current === null) {
+                                            estimatedHeightRef.current = Math.round(el.getBoundingClientRect().height);
+                                        }
+                                        rowVirtualizer.measureElement(el);
+                                    }, onClick: (event) => {
+                                        if (event.defaultPrevented) {
+                                            return;
+                                        }
+                                        const target = event.target;
+                                        if (target.tagName.toLowerCase() === "input") {
+                                            return;
+                                        }
+                                        toggleRow(row.original, event);
+                                    }, children: row.getVisibleCells().map((cell, i) => {
+                                        var _a, _b;
+                                        const cellRenderer = (_b = (_a = cell.column.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.cellRenderer;
+                                        const size = cell.column.getSize();
+                                        return ((0, jsx_runtime_1.jsx)("td", { className: Table_module_scss_1.default.cell, style: Object.assign({ 
+                                                // width: size,
+                                                width: size }, getCommonPinningStyles(cell.column)), children: cellRenderer
+                                                ? cellRenderer(cell.row.original)
+                                                : (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, `${cell.id}-${i}`));
+                                    }) }, `${row.id}-${rowIndex}`));
+                            }), paddingBottom > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { style: { height: `${paddingBottom}px` } }) }))] })] }), loading && !hasData && ((0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, {}) })), !hideNoDataView &&
+                !loading &&
+                !hasData &&
+                (noDataRenderer ? (noDataRenderer()) : ((0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.noRows, children: "No data available" }))), isPaginated && hasData && rows.length > 0 && pagination && (
+            // --- Render the pagination controls
+            (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.pagination, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)("span", { className: Table_module_scss_1.default.paginationLabel, children: ["Showing ", rows[0].original.order, " to ", rows[rows.length - 1].original.order, " of", " ", safeData.length, " entries"] }) }), pageSizes.length > 1 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: Table_module_scss_1.default.paginationLabel, children: "Rows per page" }), (0, jsx_runtime_1.jsx)("select", { className: Table_module_scss_1.default.paginationSelect, value: pagination.pageSize, onChange: (e) => {
+                                    table.setPageSize(Number(e.target.value));
+                                }, children: pageSizes.map((pageSize) => ((0, jsx_runtime_1.jsx)("option", { value: pageSize, children: pageSize }, pageSize))) })] })), (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.paginationButtons, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), type: "button", variant: "ghost", children: (0, jsx_runtime_1.jsx)(fi_1.FiChevronsLeft, {}) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), type: "button", variant: "ghost", children: (0, jsx_runtime_1.jsx)(fi_1.FiChevronLeft, {}) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), type: "button", variant: "ghost", children: (0, jsx_runtime_1.jsx)(fi_1.FiChevronRight, {}) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), type: "button", variant: "ghost", children: (0, jsx_runtime_1.jsx)(fi_1.FiChevronsRight, {}) })] })] }))] }));
+});
+function ClickableHeader({ hasSorting, updateSorting, children }) {
+    return hasSorting ? ((0, jsx_runtime_1.jsx)("button", { className: Table_module_scss_1.default.clickableHeader, onClick: updateSorting, children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+}
+function ColumnOrderingIndicator({ direction, iconSortAsc = "sortasc:Table", iconSortDesc = "sortdesc:Table", iconNoSort = "nosort:Table", }) {
+    if (direction === "ascending") {
+        return (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconSortAsc, fallback: "sortasc", size: "12" }); //sortasc
+    }
+    else if (direction === "descending") {
+        return (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconSortDesc, fallback: "sortdesc", size: "12" }); //sortdesc
+    }
+    return iconNoSort !== "-" ? ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconNoSort, fallback: "nosort", size: "12" })) : ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconNoSort, size: "12" })); //nosort
+}