@perses-dev/table-plugin 0.13.0 → 0.14.0-beta.1

package/lib/cjs/components/TablePanel.js

@@ -1,845 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get TablePanel () {
-        return TablePanel;
-    },
-    get getTablePanelQueryOptions () {
-        return getTablePanelQueryOptions;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _components = require("@perses-dev/components");
-const _dashboards = require("@perses-dev/dashboards");
-const _pluginsystem = require("@perses-dev/plugin-system");
-const _react = require("react");
-const _models = require("../models");
-const _tabledatautils = require("../table-data-utils");
-const _EmbeddedPanel = require("./EmbeddedPanel");
-function parseNumericCellValue(value) {
-    if (typeof value === 'number' && Number.isFinite(value)) {
-        return value;
-    }
-    if (typeof value === 'string') {
-        const parsed = Number(value);
-        if (Number.isFinite(parsed)) {
-            return parsed;
-        }
-    }
-    return undefined;
-}
-function isPanelData(value) {
-    if (typeof value !== 'object' || value === null) {
-        return false;
-    }
-    const candidate = value;
-    return candidate.definition !== undefined && candidate.data !== undefined;
-}
-function createSyntheticPanelData(value, columnName) {
-    const numericValue = parseNumericCellValue(value);
-    if (numericValue === undefined) {
-        return undefined;
-    }
-    const now = Date.now();
-    return {
-        definition: {
-            kind: 'TimeSeriesQuery',
-            spec: {
-                plugin: {
-                    kind: 'PrometheusTimeSeriesQuery',
-                    spec: {
-                        query: ''
-                    }
-                }
-            }
-        },
-        data: {
-            timeRange: {
-                start: new Date(now),
-                end: new Date(now)
-            },
-            stepMs: 1,
-            series: [
-                {
-                    name: columnName,
-                    values: [
-                        [
-                            now,
-                            numericValue
-                        ]
-                    ],
-                    labels: {}
-                }
-            ]
-        }
-    };
-}
-function getGaugeNumericValue(value) {
-    if (isPanelData(value)) {
-        const series = value.data?.series;
-        const firstSeries = series?.[0];
-        if (!firstSeries?.values?.length) {
-            return undefined;
-        }
-        const calc = _pluginsystem.CalculationsMap['last-number'];
-        if (typeof calc !== 'function') {
-            return undefined;
-        }
-        const calculatedValue = calc(firstSeries.values);
-        return typeof calculatedValue === 'number' ? calculatedValue : undefined;
-    }
-    return parseNumericCellValue(value);
-}
-function InlineGaugeCellWithRange({ value, range, fillColor, format }) {
-    if (value === undefined) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-    }
-    let percent = 0;
-    if (range !== undefined) {
-        if (range.max === range.min) {
-            percent = 100;
-        } else {
-            percent = (value - range.min) / (range.max - range.min) * 100;
-        }
-    }
-    percent = Math.max(0, Math.min(100, percent));
-    const trackColor = 'rgba(127,127,127,0.20)';
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        sx: {
-            display: 'flex',
-            alignItems: 'center',
-            width: '100%',
-            gap: 1
-        },
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                sx: {
-                    flexGrow: 1,
-                    borderRadius: 1,
-                    backgroundColor: trackColor,
-                    height: 24,
-                    overflow: 'hidden'
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                    sx: {
-                        width: `${percent}%`,
-                        height: '100%',
-                        backgroundColor: fillColor ?? 'success.main',
-                        borderRadius: 1
-                    }
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                variant: "body2",
-                sx: {
-                    minWidth: 52,
-                    textAlign: 'right'
-                },
-                children: format ? (0, _components.formatValue)(value, format) : value.toFixed(2)
-            })
-        ]
-    });
-}
-function resolveGaugeFillColor(value, globalCellSettings, columnCellSettings) {
-    let cellConfig = (0, _models.evaluateConditionalFormatting)(value, globalCellSettings);
-    if (columnCellSettings?.length) {
-        const columnCellConfig = (0, _models.evaluateConditionalFormatting)(value, columnCellSettings);
-        if (columnCellConfig) {
-            cellConfig = columnCellConfig;
-        }
-    }
-    return cellConfig?.backgroundColor ?? cellConfig?.textColor;
-}
-function generateCellContentConfig(column, gaugeRange, globalCellSettings = []) {
-    const plugin = column.plugin;
-    if (plugin !== undefined) {
-        return {
-            cell: (ctx)=>{
-                const cellValue = ctx.getValue();
-                if (plugin.kind === 'GaugeChart') {
-                    const gaugeValue = getGaugeNumericValue(cellValue);
-                    const gaugeFillColor = resolveGaugeFillColor(gaugeValue, globalCellSettings, column.cellSettings);
-                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(InlineGaugeCellWithRange, {
-                        value: gaugeValue,
-                        range: gaugeRange,
-                        fillColor: gaugeFillColor,
-                        format: plugin.spec?.format ?? column.format
-                    });
-                }
-                const panelData = isPanelData(cellValue) ? cellValue : createSyntheticPanelData(cellValue, column.name);
-                if (!panelData) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_EmbeddedPanel.EmbeddedPanel, {
-                    kind: plugin.kind,
-                    spec: plugin.spec,
-                    queryResults: [
-                        panelData
-                    ]
-                });
-            },
-            cellDescription: column.cellDescription ? ()=>`${column.cellDescription}` : ()=>''
-        };
-    }
-    return {
-        cell: (ctx)=>{
-            const cellValue = ctx.getValue();
-            return typeof cellValue === 'number' && column.format ? (0, _components.formatValue)(cellValue, column.format) : cellValue;
-        },
-        cellDescription: column.cellDescription ? ()=>`${column.cellDescription}` : undefined
-    };
-}
-function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme }) {
-    const [searchTerm, setSearchTerm] = (0, _react.useState)('');
-    const values = [
-        ...new Set(allValues)
-    ].filter((v)=>v !== null).sort();
-    const filteredValues = searchTerm ? values.filter((v)=>String(v).toLowerCase().includes(searchTerm.toLowerCase())) : values;
-    if (values.length === 0) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            "data-filter-dropdown": true,
-            style: {
-                width: 200,
-                padding: 10,
-                backgroundColor: theme.palette.background.paper,
-                border: `1px solid ${theme.palette.divider}`,
-                borderRadius: 4,
-                boxShadow: theme.shadows[4]
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                style: {
-                    color: theme.palette.text.secondary,
-                    fontSize: 14
-                },
-                children: "No values found"
-            })
-        });
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        "data-filter-dropdown": true,
-        style: {
-            width: 200,
-            padding: 10,
-            backgroundColor: theme.palette.background.paper,
-            border: `1px solid ${theme.palette.divider}`,
-            borderRadius: 4,
-            boxShadow: theme.shadows[4],
-            maxHeight: 250,
-            overflowY: 'auto'
-        },
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
-                type: "text",
-                placeholder: "Search...",
-                value: searchTerm,
-                onChange: (e)=>setSearchTerm(e.target.value),
-                style: {
-                    width: '100%',
-                    padding: '6px 8px',
-                    marginBottom: 8,
-                    fontSize: 13,
-                    border: `1px solid ${theme.palette.divider}`,
-                    borderRadius: 4,
-                    backgroundColor: theme.palette.background.default,
-                    color: theme.palette.text.primary,
-                    boxSizing: 'border-box'
-                }
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                style: {
-                    marginBottom: 8,
-                    fontSize: 14,
-                    fontWeight: 'bold'
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
-                    style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        cursor: 'pointer'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
-                            type: "checkbox",
-                            checked: selectedValues.length === values.length && values.length > 0,
-                            onChange: (e)=>onFilterChange(e.target.checked ? values.map((v)=>v.original) : []),
-                            style: {
-                                marginRight: 8
-                            }
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                            style: {
-                                color: theme.palette.text.primary
-                            },
-                            children: [
-                                "Select All (",
-                                values.length,
-                                ")"
-                            ]
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("hr", {
-                style: {
-                    margin: '8px 0',
-                    border: 'none',
-                    borderTop: `1px solid ${theme.palette.divider}`
-                }
-            }),
-            filteredValues.map((value, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    style: {
-                        marginBottom: 4
-                    },
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
-                        style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            cursor: 'pointer',
-                            padding: '2px 0',
-                            borderRadius: 2
-                        },
-                        onMouseEnter: (e)=>{
-                            e.currentTarget.style.backgroundColor = theme.palette.action.hover;
-                        },
-                        onMouseLeave: (e)=>{
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
-                                type: "checkbox",
-                                checked: selectedValues.includes(value.original),
-                                onChange: (e)=>{
-                                    if (e.target.checked) {
-                                        onFilterChange([
-                                            ...selectedValues,
-                                            value.original
-                                        ]);
-                                    } else {
-                                        onFilterChange(selectedValues.filter((v)=>v !== value.original));
-                                    }
-                                },
-                                style: {
-                                    marginRight: 8
-                                }
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                                style: {
-                                    fontSize: 14,
-                                    color: theme.palette.text.primary
-                                },
-                                children: value === null || value === undefined || value.formatted === '' ? '(empty)' : String(value.formatted)
-                            })
-                        ]
-                    })
-                }, `value-${index}`))
-        ]
-    });
-}
-/*
- * Generate column config from column definitions, if a column has multiple definitions, the first one will be used.
- * If column is hidden, return undefined.
- * If column do not have a definition, return a default column config.
- */ function generateColumnConfig(name, columnSettings, allVariables, gaugeRangeByColumn, globalCellSettings = []) {
-    for (const column of columnSettings){
-        if (column.name === name) {
-            if (column.hide) {
-                return undefined;
-            }
-            const { name, header, headerDescription, enableSorting, width, align, dataLink } = column;
-            const modifiedDataLink = dataLink ? {
-                ...dataLink,
-                url: (0, _pluginsystem.replaceVariablesInString)(dataLink.url, allVariables)
-            } : undefined;
-            return {
-                accessorKey: name,
-                header: header ?? name,
-                headerDescription,
-                enableSorting,
-                width,
-                align,
-                dataLink: modifiedDataLink,
-                ...generateCellContentConfig(column, gaugeRangeByColumn[name], globalCellSettings)
-            };
-        }
-    }
-    return {
-        accessorKey: name,
-        header: name
-    };
-}
-function getTablePanelQueryOptions(spec) {
-    // if any cell renders a panel plugin, perform a range query instead of an instant query
-    return {
-        mode: (0, _tabledatautils.getTablePanelQueryMode)(spec)
-    };
-}
-function TablePanel({ contentDimensions, spec, queryResults }) {
-    const theme = (0, _material.useTheme)();
-    const allVariables = (0, _pluginsystem.useAllVariableValues)();
-    const selectionEnabled = spec.selection?.enabled ?? false;
-    const { selectionMap, setSelection, clearSelection } = (0, _components.useSelection)();
-    const itemActionsConfig = spec.actions ? spec.actions : undefined;
-    const itemActionsListConfig = itemActionsConfig?.enabled && itemActionsConfig.displayWithItem ? itemActionsConfig.actionsList : [];
-    const { getItemActionButtons, confirmDialog, actionButtons } = (0, _dashboards.useSelectionItemActions)({
-        actions: itemActionsListConfig,
-        variableState: allVariables
-    });
-    const filteredDataRef = (0, _react.useRef)([]);
-    // Convert selectionMap to TanStack's RowSelectionState format
-    const rowSelection = (0, _react.useMemo)(()=>{
-        const result = {};
-        selectionMap.forEach((_, id)=>{
-            result[id] = true;
-        });
-        return result;
-    }, [
-        selectionMap
-    ]);
-    const handleRowSelectionChange = (0, _react.useCallback)((newRowSelection)=>{
-        const newSelection = [];
-        for (const [id, isSelected] of Object.entries(newRowSelection)){
-            if (isSelected) {
-                const index = parseInt(id, 10);
-                if (filteredDataRef.current[index] !== undefined) {
-                    newSelection.push({
-                        id,
-                        item: filteredDataRef.current[index]
-                    });
-                }
-            }
-        }
-        if (newSelection.length === 0) {
-            clearSelection();
-        } else {
-            setSelection(newSelection);
-        }
-    }, [
-        setSelection,
-        clearSelection
-    ]);
-    // TODO: handle other query types
-    const rawData = (0, _react.useMemo)(()=>{
-        // Transform query results to a tabular format using shared utility
-        return (0, _tabledatautils.buildRawTableData)(queryResults, spec);
-    }, [
-        queryResults,
-        spec
-    ]);
-    // Transform will be applied by their orders on the original data
-    const data = (0, _react.useMemo)(()=>(0, _components.transformData)(rawData, spec.transforms ?? []), [
-        rawData,
-        spec.transforms
-    ]);
-    const keys = (0, _react.useMemo)(()=>{
-        const result = [];
-        for (const entry of data){
-            for (const key of Object.keys(entry)){
-                if (!result.includes(key)) {
-                    result.push(key);
-                }
-            }
-        }
-        // Include column names from columnSettings so that columns with no data
-        // are still extended with undefined for cellSettings evaluation (e.g. N/A for null)
-        for (const col of spec.columnSettings ?? []){
-            if (!result.includes(col.name)) {
-                result.push(col.name);
-            }
-        }
-        return result;
-    }, [
-        data,
-        spec.columnSettings
-    ]);
-    const columnsFormat = (0, _react.useMemo)(()=>{
-        const columnsFormat = {};
-        const settings = spec?.columnSettings;
-        if (settings) {
-            for(let i = 0; i < settings.length; i++){
-                const { name, format } = settings[i] || {};
-                if (name && format) {
-                    columnsFormat[name] = format;
-                }
-            }
-        }
-        return columnsFormat;
-    }, [
-        spec
-    ]);
-    const columnUniqueValues = (0, _react.useMemo)(()=>{
-        const uniqueValues = {};
-        for (const key of keys){
-            const formatOption = columnsFormat?.[key];
-            uniqueValues[key] = [];
-            const usedValues = new Map();
-            for (const row of data){
-                const val = row[key];
-                if (val === '' || val === null || val === undefined) {
-                    continue;
-                }
-                if (usedValues.get(String(val))) {
-                    continue;
-                }
-                if (typeof val === 'string' || typeof val === 'number') {
-                    uniqueValues[key].push({
-                        original: val,
-                        formatted: formatOption && typeof val === 'number' ? (0, _components.formatValue)(val, formatOption) : val
-                    });
-                    usedValues.set(String(val), true);
-                }
-            }
-        }
-        return uniqueValues;
-    }, [
-        data,
-        keys,
-        columnsFormat
-    ]);
-    const gaugeRangeByColumn = (0, _react.useMemo)(()=>{
-        const result = {};
-        for (const key of keys){
-            let min = Number.POSITIVE_INFINITY;
-            let max = Number.NEGATIVE_INFINITY;
-            for (const row of data){
-                const numericValue = getGaugeNumericValue(row[key]);
-                if (numericValue === undefined) {
-                    continue;
-                }
-                min = Math.min(min, numericValue);
-                max = Math.max(max, numericValue);
-            }
-            if (min !== Number.POSITIVE_INFINITY && max !== Number.NEGATIVE_INFINITY) {
-                result[key] = {
-                    min,
-                    max
-                };
-            }
-        }
-        return result;
-    }, [
-        data,
-        keys
-    ]);
-    // Generate columns and map each column accessor to its settings index and data key
-    const columns = (0, _react.useMemo)(()=>{
-        const columns = [];
-        const customizedColumns = new Set();
-        // Process columnSettings if they exist
-        for (const columnSetting of spec.columnSettings ?? []){
-            if (customizedColumns.has(columnSetting.name)) continue; // Skip duplicates
-            const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? [], allVariables, gaugeRangeByColumn, spec.cellSettings ?? []);
-            if (columnConfig !== undefined) {
-                columns.push(columnConfig);
-                customizedColumns.add(columnSetting.name);
-            }
-        }
-        // Add remaining columns if defaultColumnHidden is false
-        if (!spec.defaultColumnHidden) {
-            for (const key of keys){
-                if (!customizedColumns.has(key)) {
-                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? [], allVariables, gaugeRangeByColumn, spec.cellSettings ?? []);
-                    if (columnConfig !== undefined) {
-                        columns.push(columnConfig);
-                    }
-                }
-            }
-        }
-        return columns;
-    }, [
-        keys,
-        spec.columnSettings,
-        spec.defaultColumnHidden,
-        allVariables,
-        gaugeRangeByColumn,
-        spec.cellSettings
-    ]);
-    // Filtering state — declared before cellConfigs so filteredData is available for cell config evaluation
-    const [columnFilters, setColumnFilters] = (0, _react.useState)([]);
-    // filter data based on the current filters
-    const filteredData = (0, _react.useMemo)(()=>{
-        if (!spec.enableFiltering || columnFilters.length === 0) {
-            return data;
-        }
-        return data.filter((row)=>{
-            return columnFilters.every((filter)=>{
-                const value = row[filter.id];
-                const filterValues = filter.value;
-                if (!filterValues || filterValues.length === 0) return true;
-                return filterValues.includes(value);
-            });
-        });
-    }, [
-        data,
-        columnFilters,
-        spec.enableFiltering
-    ]);
-    // Generate cell settings that will be used by the table to render cells (text color, background color, ...)
-    const cellConfigs = (0, _react.useMemo)(()=>{
-        // If there are no cell settings globally or per column, return an empty object
-        if (spec.cellSettings === undefined && !spec.columnSettings?.some((col)=>col.cellSettings !== undefined)) {
-            return {};
-        }
-        const result = {};
-        let index = 0;
-        for (const row of filteredData){
-            // Transforming key to object to extend the row with undefined values if the key is not present
-            // for checking the cell config "Misc" condition with "null"
-            const keysAsObj = keys.reduce((acc, key)=>{
-                acc[key] = undefined;
-                return acc;
-            }, {});
-            const extendRow = {
-                ...keysAsObj,
-                ...row
-            };
-            // Generate cellConfigs for each column (including duplicates with different headers)
-            for (const [key, value] of Object.entries(extendRow)){
-                // First, try to get cell config from global cell settings
-                let cellConfig = (0, _models.evaluateConditionalFormatting)(value, spec.cellSettings ?? []);
-                // Then, try to get cell config from column-specific cell settings
-                const columnSetting = spec.columnSettings?.find((col)=>col.name === key);
-                if (columnSetting?.cellSettings?.length) {
-                    const columnCellConfig = (0, _models.evaluateConditionalFormatting)(value, columnSetting.cellSettings);
-                    // Column-specific settings take precedence over global settings
-                    if (columnCellConfig) {
-                        cellConfig = columnCellConfig;
-                    }
-                }
-                if (cellConfig) {
-                    result[`${index}_${key}`] = cellConfig;
-                }
-            }
-            index++;
-        }
-        return result;
-    }, [
-        filteredData,
-        keys,
-        spec.cellSettings,
-        spec.columnSettings
-    ]);
-    function generateDefaultSortingState() {
-        return spec.columnSettings?.filter((column)=>column.sort !== undefined).map((column)=>{
-            return {
-                id: column.name,
-                desc: column.sort === 'desc'
-            };
-        }) ?? [];
-    }
-    const [sorting, setSorting] = (0, _react.useState)(generateDefaultSortingState());
-    const [filterAnchorEl, setFilterAnchorEl] = (0, _react.useState)({});
-    const [openFilterColumn, setOpenFilterColumn] = (0, _react.useState)(null);
-    // get selected values for a column
-    const getSelectedFilterValues = (columnId)=>{
-        const filter = columnFilters.find((f)=>f.id === columnId);
-        return filter ? filter.value : [];
-    };
-    // update column filter
-    const updateColumnFilter = (columnId, values)=>{
-        const newFilters = columnFilters.filter((f)=>f.id !== columnId);
-        if (values.length > 0) {
-            newFilters.push({
-                id: columnId,
-                value: values
-            });
-        }
-        setColumnFilters(newFilters);
-    };
-    // Handle filter clicks
-    const handleFilterClick = (event, columnId)=>{
-        event.preventDefault();
-        event.stopPropagation();
-        setFilterAnchorEl({
-            ...filterAnchorEl,
-            [columnId]: event.currentTarget
-        });
-        setOpenFilterColumn(columnId);
-    };
-    const handleFilterClose = ()=>{
-        setFilterAnchorEl({});
-        setOpenFilterColumn(null);
-    };
-    // Close filter when clicking outside
-    (0, _react.useEffect)(()=>{
-        if (!openFilterColumn) return;
-        const handleClick = (e)=>{
-            const target = e.target;
-            if (!target.closest('[data-filter-dropdown]') && !target.closest('button')) {
-                handleFilterClose();
-            }
-        };
-        const timer = setTimeout(()=>{
-            document.addEventListener('click', handleClick);
-        }, 100);
-        return ()=>{
-            clearTimeout(timer);
-            document.removeEventListener('click', handleClick);
-        };
-    }, [
-        openFilterColumn
-    ]);
-    // Keep ref in sync with filtered data for use in selection handler
-    filteredDataRef.current = filteredData;
-    const [pagination, setPagination] = (0, _react.useState)(spec.pagination ? {
-        pageIndex: 0,
-        pageSize: 10
-    } : undefined);
-    (0, _react.useEffect)(()=>{
-        // If the pagination setting changes from no pagination to pagination, but the pagination state is undefined, update the pagination state
-        if (spec.pagination && !pagination) {
-            setPagination({
-                pageIndex: 0,
-                pageSize: 10
-            });
-        } else if (!spec.pagination && pagination) {
-            setPagination(undefined);
-        }
-    }, [
-        spec.pagination,
-        pagination
-    ]);
-    if (contentDimensions === undefined) {
-        return null;
-    }
-    if (!data?.length) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-            sx: {
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: '100%'
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                children: "No data"
-            })
-        });
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            confirmDialog,
-            spec.enableFiltering && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                style: {
-                    display: 'flex',
-                    background: theme.palette.background.default,
-                    borderBottom: `1px solid ${theme.palette.divider}`,
-                    width: contentDimensions.width,
-                    boxSizing: 'border-box'
-                },
-                children: columns.map((column, idx)=>{
-                    const filters = getSelectedFilterValues(column.accessorKey);
-                    const columnWidth = column.width || spec.defaultColumnWidth;
-                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                        style: {
-                            padding: '8px',
-                            borderRight: idx < columns.length - 1 ? `1px solid ${theme.palette.divider}` : 'none',
-                            width: columnWidth,
-                            minWidth: columnWidth,
-                            maxWidth: columnWidth,
-                            display: 'flex',
-                            alignItems: 'center',
-                            position: 'relative',
-                            boxSizing: 'border-box',
-                            flex: typeof columnWidth === 'number' ? 'none' : '1 1 auto'
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                                style: {
-                                    marginRight: 8,
-                                    fontSize: '12px',
-                                    color: theme.palette.text.secondary,
-                                    flex: 1,
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap'
-                                },
-                                children: filters.length ? `${filters.length} items` : 'All'
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
-                                onClick: (e)=>{
-                                    handleFilterClick(e, column.accessorKey);
-                                },
-                                style: {
-                                    border: `1px solid ${theme.palette.divider}`,
-                                    background: theme.palette.background.paper,
-                                    cursor: 'pointer',
-                                    fontSize: '12px',
-                                    color: filters.length ? theme.palette.primary.main : theme.palette.text.secondary,
-                                    padding: '4px 8px',
-                                    borderRadius: '4px',
-                                    minWidth: '20px',
-                                    height: '24px',
-                                    flexShrink: 0,
-                                    transition: 'all 0.2s ease'
-                                },
-                                onMouseEnter: (e)=>{
-                                    e.currentTarget.style.background = theme.palette.action.hover;
-                                },
-                                onMouseLeave: (e)=>{
-                                    e.currentTarget.style.background = theme.palette.background.paper;
-                                },
-                                type: "button",
-                                children: "▼"
-                            }),
-                            openFilterColumn === column.accessorKey && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                                style: {
-                                    position: 'absolute',
-                                    top: '100%',
-                                    left: 0,
-                                    zIndex: 1000,
-                                    marginTop: 4
-                                },
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ColumnFilterDropdown, {
-                                    allValues: columnUniqueValues[column.accessorKey] || [],
-                                    selectedValues: filters,
-                                    onFilterChange: (values)=>updateColumnFilter(column.accessorKey, values),
-                                    theme: theme
-                                })
-                            })
-                        ]
-                    }, `filter-${idx}`);
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Table, {
-                data: filteredData,
-                columns: columns,
-                cellConfigs: cellConfigs,
-                height: spec.enableFiltering ? contentDimensions.height - 40 : contentDimensions.height,
-                width: contentDimensions.width,
-                density: spec.density,
-                defaultColumnWidth: spec.defaultColumnWidth,
-                defaultColumnHeight: spec.defaultColumnHeight,
-                sorting: sorting,
-                onSortingChange: setSorting,
-                pagination: pagination,
-                onPaginationChange: setPagination,
-                checkboxSelection: selectionEnabled,
-                rowSelection: rowSelection,
-                onRowSelectionChange: handleRowSelectionChange,
-                getItemActions: ({ id, data })=>getItemActionButtons({
-                        id,
-                        data: data
-                    }),
-                hasItemActions: actionButtons && actionButtons.length > 0
-            })
-        ]
-    });
-}