xmlui 0.4.0

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

@@ -0,0 +1,499 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tableComponentRenderer = 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 Button_1 = require("@components/Button/Button");
+const Spinner_1 = require("@components/Spinner/Spinner");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const useRowSelection_1 = __importDefault(require("./useRowSelection"));
+const Toggle_1 = require("@components/Toggle/Toggle");
+const Icon_1 = require("@components/Icon/Icon");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const lodash_es_1 = require("lodash-es");
+const renderers_1 = require("@components-core/renderers");
+const constants_1 = require("@components-core/constants");
+const ScrollContext_1 = require("@components-core/ScrollContext");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const TableContext_1 = require("../TableColumnDef/TableContext");
+const immer_1 = __importDefault(require("immer"));
+const misc_1 = require("@components-core/utils/misc");
+const react_dom_1 = require("react-dom");
+const hooks_1 = require("@components-core/utils/hooks");
+function defaultIsRowDisabled(_) {
+    return false;
+}
+const SELECT_COLUMN_WIDTH = 42;
+const DEFAULT_PAGE_SIZES = [10, 50, 100];
+//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,
+    };
+};
+const Table = ({ 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", sortingDidChange, willSort, style, noDataRenderer, autoFocus = false, hideHeader = false, children, }) => {
+    var _a, _b, _c, _d;
+    const [stableColumns, setStableColumns] = (0, react_1.useState)(columns);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const tableRef = (0, react_1.useRef)(null);
+    const estimatedHeightRef = (0, react_1.useRef)(null);
+    const safeColumns = (0, react_1.useMemo)(() => {
+        if (stableColumns) {
+            return stableColumns;
+        }
+        if (!data.length) {
+            return constants_1.EMPTY_ARRAY;
+        }
+        return Object.keys(data[0]).map((key) => ({ header: key, accessorKey: key }));
+    }, [stableColumns, data]);
+    (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 } = (0, useRowSelection_1.default)(visibleItems);
+    // --- Create data with order information whenever the items in the table change
+    const dataWithOrder = (0, react_1.useMemo)(() => {
+        return data.map((item, index) => {
+            return Object.assign(Object.assign({}, item), { order: index + 1 });
+        });
+    }, [data]);
+    // --- 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.useEffect)(() => {
+        _setSortBy(sortBy);
+    }, [sortBy]);
+    (0, react_1.useEffect)(() => {
+        _setSortingDirection(sortingDirection);
+    }, [sortingDirection]);
+    const [sortedData, setSortedData] = (0, react_1.useState)(dataWithOrder);
+    (0, react_1.useEffect)(() => {
+        if (!_sortBy) {
+            setSortedData(dataWithOrder);
+            return;
+        }
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            const result = yield (willSort === null || willSort === void 0 ? void 0 : willSort(_sortBy, _sortingDirection));
+            if (result === false) {
+                setSortedData(dataWithOrder);
+            }
+            else {
+                setSortedData((0, lodash_es_1.orderBy)(dataWithOrder, _sortBy, _sortingDirection === "ascending" ? "asc" : "desc"));
+            }
+        }))();
+    }, [_sortBy, _sortingDirection, dataWithOrder, willSort]);
+    const _updateSorting = (0, react_1.useCallback)((header) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        let newDirection = "ascending";
+        let newSortBy = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.accessorKey;
+        // The current key is the same as the last -> the user clicked on the same header twice
+        if (_sortBy === ((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.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);
+    }), [sortingDidChange, _sortBy, _sortingDirection]);
+    // --- Prepare column renderers according to columns defined in the table
+    const columnsWithCustomCell = (0, react_1.useMemo)(() => {
+        return safeColumns.map((col) => {
+            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 : " ", 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;
+                if (typeof colWidth === "number") {
+                    width = colWidth;
+                }
+                else if (typeof colWidth === "string") {
+                    const oneStarSizedWidthMatch = colWidth.match(/^\s*\*\s*$/);
+                    if (allowStarSize && oneStarSizedWidthMatch) {
+                        starSizedWidth = "1*";
+                    }
+                    else {
+                        const starSizedWidthMatch = colWidth.match(/^\s*(\d+)\s*\*\s*$/);
+                        if (allowStarSize && starSizedWidthMatch) {
+                            starSizedWidth = starSizedWidthMatch[1] + "*";
+                        }
+                        else {
+                            const pixelWidthMatch = colWidth.match(/^\s*(\d+)\s*(px)?\s*$/);
+                            if (pixelWidthMatch) {
+                                width = Number(pixelWidthMatch[1]);
+                            }
+                            else {
+                                throw new Error(`Invalid TableColumnDef '${propName}' value`);
+                            }
+                        }
+                    }
+                }
+                if (width === undefined && starSizedWidth === undefined && allowStarSize) {
+                    starSizedWidth = "1*";
+                }
+                return { width, starSizedWidth };
+            }
+        });
+    }, [rowsSelectable, 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: Table_module_scss_1.default.checkBoxWrapper,
+                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: enableMultiRowSelection });
+                } })),
+        };
+        return rowsSelectable ? [selectColumn, ...columnsWithCustomCell] : columnsWithCustomCell;
+    }, [columnsWithCustomCell, toggleRow, rowsSelectable, checkAllRows]);
+    // --- Set up page information (using the first page size option)
+    const [{ pageIndex, pageSize }, setPagination] = (0, react_1.useState)({
+        pageIndex: 0,
+        pageSize: pageSizes[0],
+    });
+    // --- Update pagination info whenever the pae size or page index changes
+    const pagination = (0, react_1.useMemo)(() => ({
+        pageIndex,
+        pageSize,
+    }), [pageIndex, pageSize]);
+    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 tableContextValue = (0, react_1.useMemo)(() => {
+        return {
+            registerColumn: (column) => {
+                setStableColumns((0, immer_1.default)((draft) => {
+                    const existing = draft.findIndex((col) => col.id === column.id);
+                    if (existing < 0) {
+                        draft.push(column);
+                    }
+                    else {
+                        draft[existing] = column;
+                    }
+                    draft.sort((a, b) => a.index - b.index);
+                }));
+            },
+            unRegisterColumn: (id) => {
+                setStableColumns((0, immer_1.default)((draft) => {
+                    return draft.filter((col) => col.id !== id);
+                }));
+            },
+        };
+    }, []);
+    const hasData = data.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]);
+    return ((0, jsx_runtime_1.jsxs)(TableContext_1.TableContext.Provider, { value: tableContextValue, children: [(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: wrapperRef, style: style, children: [loading && !hasData && ((0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}) })), !loading &&
+                        !hasData &&
+                        (noDataRenderer ? noDataRenderer() : (0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.noRows, children: "No data available" })), hasData && ((0, jsx_runtime_1.jsxs)("table", { className: Table_module_scss_1.default.table, ref: tableRef, 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 style = ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.style) || {};
+                                        const headerContent = ((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", minWidth: 12 }, children: header.column.columnDef.enableSorting &&
+                                                        ((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.accessorKey) === _sortBy ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: _sortingDirection === "ascending" ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrowup", size: "sm" })) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrowdown", size: "sm" })) })) : undefined })] }));
+                                        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: [header.isPlaceholder ? null : header.column.columnDef.enableSorting ? ((0, jsx_runtime_1.jsx)("button", { className: Table_module_scss_1.default.clickableHeader, onClick: () => _updateSorting(header), children: headerContent })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerContent })), 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}`))) })), (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;
+                                                }
+                                                toggleRow(row.original, Object.assign(Object.assign({}, event), { metaKey: enableMultiRowSelection, shiftKey: enableMultiRowSelection ? event.shiftKey : false }));
+                                            }, 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` } }) }))] })] })), isPaginated && hasData && rows.length > 0 && (
+                    // --- 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 ", data.length, " entries"] }) }), (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: 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)(Button_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)(Button_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)(Button_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)(Button_1.Button, { onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), type: "button", variant: "ghost", children: (0, jsx_runtime_1.jsx)(fi_1.FiChevronsRight, {}) })] })] }))] }), children] }));
+};
+exports.Table = Table;
+const tableMetadata = {
+    displayName: "Table",
+    description: "A virtualized table component with columns and cells",
+    props: {
+        items: (0, descriptorHelper_1.desc)("The items of the table"),
+        isPaginated: (0, descriptorHelper_1.desc)("Is the table paginated?"),
+        loading: (0, descriptorHelper_1.desc)("Is the table being loaded?"),
+        headerHeight: (0, descriptorHelper_1.desc)("The height of the table header"),
+        rowsSelectable: (0, descriptorHelper_1.desc)("Does the table supports row selection?"),
+        pageSizes: (0, descriptorHelper_1.desc)("A list of available page sizes the paginator displays in the UI"),
+        rowDisabledPredicate: (0, descriptorHelper_1.desc)("A function determining if a particular row is to be disabled"),
+        noDataTemplate: {
+            description: "The template displayed when the table is empty",
+            valueType: "ComponentDef",
+        },
+        sortBy: (0, descriptorHelper_1.desc)("The name of the data field the table is sorted by"),
+        sortDirection: (0, descriptorHelper_1.desc)("The sorting direction (ascending/descending)"),
+        autoFocus: (0, descriptorHelper_1.desc)("Should the table have the focus automatically?"),
+        hideHeader: (0, descriptorHelper_1.desc)("Should the header be hidden?"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Table_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-Table": "$color-bg-primary",
+        "color-bg-row-Table--hover": "$color-primary-50",
+        "color-bg-selected-Table": "$color-primary-100",
+        "color-bg-selected-Table--hover": "$color-bg-row-Table--hover",
+        "color-bg-heading-Table": "$color-bg-Table",
+        "color-bg-heading-Table--hover": "$color-surface-100",
+        "color-bg-heading-Table--active": "$color-surface-200",
+        "color-bg-pagination-Table": "$color-bg-Table",
+        "padding-horizontal-heading-Table": "$space-4",
+        "padding-vertical-heading-Table": "$space-2",
+        "padding-heading-Table": "$padding-vertical-heading-Table $padding-horizontal-heading-Table",
+        "padding-horizontal-cell-Table": "$space-4",
+        "padding-vertical-cell-Table": "$space-2",
+        "padding-cell-Table": "$padding-vertical-cell-Table $padding-horizontal-cell-Table",
+        "color-border-cell-Table": "$color-border",
+        "thickness-border-cell-Table": "$space-0_5",
+        "style-border-cell-Table": "solid",
+        "border-cell-Table": "$thickness-border-cell-Table $style-border-cell-Table $color-border-cell-Table",
+        "color-outline-heading-Table--focus": "$color-outline--focus",
+        "thickness-outline-heading-Table--focus": "$thickness-outline--focus",
+        "style-outline-heading-Table--focus": "$style-outline--focus",
+        "offset-outline-heading-Table--focus": "$offset-outline--focus",
+        "color-text-heading-Table": "$color-text-primary",
+        "font-size-heading-Table": "$font-size-smaller",
+        "font-weight-heading-Table": "$font-weight-bold",
+        "transform-text-heading-Table": "uppercase",
+        dark: {
+            "color-bg-row-Table--hover": "$color-primary-900",
+            "color-bg-selected-Table": "$color-primary-800",
+        }
+    },
+};
+/**
+ * This function defines the renderer for the Heading component.
+ */
+exports.tableComponentRenderer = (0, renderers_1.createComponentRenderer)("Table", ({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, layoutCss }) => {
+    var _a, _b, _c;
+    const data = extractValue(node.props.items) || extractValue(node.props.data);
+    return ((0, jsx_runtime_1.jsx)(exports.Table, { data: data, pageSizes: extractValue(node.props.pageSizes), rowsSelectable: extractValue.asOptionalBoolean(node.props.rowsSelectable), noDataRenderer: node.props.noDataTemplate &&
+            (() => {
+                return renderChild(node.props.noDataTemplate);
+            }), loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), sortingDidChange: lookupEventHandler("sortingDidChange"), willSort: lookupEventHandler("willSort"), style: layoutCss, uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), children: renderChild(node.children) }));
+}, tableMetadata);