@perses-dev/components 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/StatusHistoryChart/StatusHistoryTooltip.js

@@ -0,0 +1,55 @@
+// Copyright 2024 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
+});
+Object.defineProperty(exports, "generateTooltipHTML", {
+    enumerable: true,
+    get: function() {
+        return generateTooltipHTML;
+    }
+});
+const _material = require("@mui/material");
+const _utils = require("../utils");
+function generateTooltipHTML({ data, label, marker, xAxisCategories, yAxisCategories, theme }) {
+    const [x, y] = data;
+    const xAxisLabel = xAxisCategories[x];
+    const { formattedDate, formattedTime } = (0, _utils.getDateAndTime)(xAxisLabel);
+    const tooltipHeader = (0, _material.css)`
+    border-bottom: 1px solid ${theme.palette.grey[500]};
+    padding-bottom: 8px;
+  `;
+    const tooltipContentStyles = (0, _material.css)`
+    display: flex;
+    justify-content: space-between;
+    padding-top: 8px;
+  `;
+    const labelStyles = (0, _material.css)`
+    margin-right: 16px;
+  `;
+    return `
+    <div>
+      <div style="${tooltipHeader.styles}">${formattedDate} ${formattedTime}</div>
+      <div style="${tooltipContentStyles.styles}">
+        <div style="${labelStyles.styles}">
+          ${marker}
+          <strong>${yAxisCategories[y]}</strong>
+        </div>
+        <div>
+          ${label}
+        </div>
+      </div>
+    </div>
+  `;
+}

package/dist/cjs/StatusHistoryChart/get-formatted-axis-label.js

@@ -0,0 +1,48 @@
+// Copyright 2024 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
+});
+Object.defineProperty(exports, "getFormattedStatusHistoryAxisLabel", {
+    enumerable: true,
+    get: function() {
+        return getFormattedStatusHistoryAxisLabel;
+    }
+});
+const _utils = require("../utils");
+function getFormattedStatusHistoryAxisLabel(rangeMs, timezone) {
+    return function(value) {
+        const dayMs = 86400000;
+        const monthMs = 2629440000;
+        const yearMs = 31536000000;
+        const timeStamp = new Date(Number(value));
+        // more than 5 years
+        if (rangeMs > yearMs * 5) {
+            return (0, _utils.formatWithTimeZone)(timeStamp, 'yyy', timezone);
+        }
+        // more than 2 years
+        if (rangeMs > yearMs * 2) {
+            return (0, _utils.formatWithTimeZone)(timeStamp, 'MMM yyy', timezone);
+        }
+        // between 5 days to 6 months
+        if (rangeMs > dayMs * 10 && rangeMs < monthMs * 6) {
+            return (0, _utils.formatWithTimeZone)(timeStamp, 'dd.MM', timezone); // 12-01
+        }
+        // between 2 and 10 days
+        if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 10) {
+            return (0, _utils.formatWithTimeZone)(timeStamp, 'dd.MM HH:mm', timezone); // 12-01; // 12-01 12:30
+        }
+        return (0, _utils.formatWithTimeZone)(timeStamp, 'HH:mm', timezone);
+    };
+}

package/dist/cjs/StatusHistoryChart/index.js

@@ -0,0 +1,31 @@
+// Copyright 2023 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
+});
+_export_star(require("./StatusHistoryChart"), exports);
+_export_star(require("./utils/get-color"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/StatusHistoryChart/utils/get-color.js

@@ -0,0 +1,125 @@
+// Copyright 2024 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: all[name]
+    });
+}
+_export(exports, {
+    FALLBACK_COLOR: function() {
+        return FALLBACK_COLOR;
+    },
+    getColorForValue: function() {
+        return getColorForValue;
+    },
+    getColorsForValues: function() {
+        return getColorsForValues;
+    },
+    hexToHSL: function() {
+        return hexToHSL;
+    },
+    hslToHex: function() {
+        return hslToHex;
+    }
+});
+const FALLBACK_COLOR = '#1f77b4';
+function getColorForValue(value, baseColor) {
+    // Validate base color
+    if (!baseColor.match(/^#[0-9A-Fa-f]{6}$/)) {
+        baseColor = FALLBACK_COLOR;
+    }
+    try {
+        const [baseH, baseS, baseL] = hexToHSL(baseColor);
+        // Ensure numeric values are valid
+        if (isNaN(baseH) || isNaN(baseS) || isNaN(baseL)) {
+            throw new Error('Invalid HSL values');
+        }
+        // Create deterministic hash
+        const hash = String(value).split('').reduce((acc, char)=>acc + char.charCodeAt(0), 0);
+        const hueStep = 60;
+        const lightnessVariation = 15;
+        const hueOffset = hash % 6 * hueStep; // 6 segments of 60° each
+        const newH = (baseH + hueOffset) % 360;
+        const newL = baseL + (hash % 2 ? lightnessVariation : -lightnessVariation);
+        // Keep saturation high for better distinction
+        const newS = Math.min(baseS + 10, 90);
+        const color = hslToHex(Math.abs(newH), Math.min(Math.max(newS, 50), 90), Math.min(Math.max(newL, 30), 70) // Keep lightness 30-70%
+        );
+        // Validate generated color
+        if (!color.match(/^#[0-9A-Fa-f]{6}$/)) {
+            throw new Error('Invalid generated color');
+        }
+        return color;
+    } catch (_) {
+        return FALLBACK_COLOR;
+    }
+}
+function getColorsForValues(uniqueValues, themeColors) {
+    // If we have enough theme colors, use them
+    if (themeColors.length >= uniqueValues.length) {
+        return themeColors.slice(0, uniqueValues.length);
+    }
+    // Use theme colors first, then generate additional ones
+    return uniqueValues.map((value, index)=>{
+        if (index < themeColors.length) {
+            return themeColors[index] || FALLBACK_COLOR;
+        }
+        return getColorForValue(value, themeColors[0] || FALLBACK_COLOR);
+    });
+}
+function hexToHSL(hex) {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch(max){
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return [
+        h * 360,
+        s * 100,
+        l * 100
+    ];
+}
+function hslToHex(h, s, l) {
+    l /= 100;
+    const a = s * Math.min(l, 1 - l) / 100;
+    const f = (n)=>{
+        const k = (n + h / 30) % 12;
+        const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        return Math.round(255 * color).toString(16).padStart(2, '0');
+    };
+    return `#${f(0)}${f(8)}${f(4)}`;
+}

package/dist/cjs/StatusHistoryChart/utils/get-tooltip-position.js

@@ -0,0 +1,35 @@
+// Copyright 2024 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
+});
+Object.defineProperty(exports, "getTooltipPosition", {
+    enumerable: true,
+    get: function() {
+        return getTooltipPosition;
+    }
+});
+const getTooltipPosition = (...data)=>{
+    const point = data[0];
+    const size = data[4];
+    // calculate the position to avoid overflow
+    const [x, y] = point;
+    const { contentSize, viewSize } = size;
+    const posX = x + contentSize[0] > viewSize[0] ? x - contentSize[0] : x;
+    const posY = y + contentSize[1] > viewSize[1] ? y - contentSize[1] : y;
+    return [
+        posX,
+        posY
+    ];
+};

package/dist/cjs/Table/InnerTable.js

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "InnerTable", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
-const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme  })=>({
+const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme })=>({
         // This value is needed to have a consistent table layout when scrolling.
         tableLayout: 'fixed',
         borderCollapse: 'separate',
@@ -31,9 +31,10 @@ const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme  })=>({
     }));
 const TABLE_DENSITY_CONFIG = {
     compact: 'small',
-    standard: 'medium'
+    standard: 'medium',
+    comfortable: 'medium'
 };
-const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density , ...otherProps }, ref) {
+const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density, ...otherProps }, ref) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledMuiTable, {
         ...otherProps,
         tabIndex: -1,

package/dist/cjs/Table/Table.js

@@ -35,11 +35,11 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
 // does not do deep equality checking for objects and arrays.
 const DEFAULT_ROW_SELECTION = {};
 const DEFAULT_SORTING = [];
-function Table({ data , columns , density ='standard' , checkboxSelection , onRowSelectionChange , onSortingChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection =DEFAULT_ROW_SELECTION , sorting =DEFAULT_SORTING , rowSelectionVariant ='standard' , ...otherProps }) {
+function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = _tablemodel.DEFAULT_COLUMN_WIDTH, checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, rowSelectionVariant = 'standard', ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
-        onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(newRowSelection);
+        onRowSelectionChange?.(newRowSelection);
     };
     const handleRowSelectionEvent = (0, _react.useCallback)((table, row, isModified)=>{
         if (rowSelectionVariant === 'standard' || isModified) {
@@ -53,7 +53,7 @@ function Table({ data , columns , density ='standard' , checkboxSelection , onRo
                 table.toggleAllRowsSelected();
             } else {
                 // Focus the selected row.
-                onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange({
+                onRowSelectionChange?.({
                     [row.id]: true
                 });
             }
@@ -64,20 +64,20 @@ function Table({ data , columns , density ='standard' , checkboxSelection , onRo
     ]);
     const handleCheckboxChange = (0, _react.useCallback)((e, table, row)=>{
         const nativePointerEvent = e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent) ? e.nativeEvent : undefined;
-        const isModifed = !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.metaKey) || !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.shiftKey);
+        const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;
         handleRowSelectionEvent(table, row, isModifed);
     }, [
         handleRowSelectionEvent
     ]);
     const handleSortingChange = (sortingUpdater)=>{
         const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;
-        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(newSorting);
+        onSortingChange?.(newSorting);
     };
     const checkboxColumn = (0, _react.useMemo)(()=>{
         return {
             id: 'checkboxRowSelect',
             size: 28,
-            header: ({ table  })=>{
+            header: ({ table })=>{
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCheckbox.TableCheckbox, {
                     checked: table.getIsAllRowsSelected(),
                     indeterminate: table.getIsSomeRowsSelected(),
@@ -86,14 +86,14 @@ function Table({ data , columns , density ='standard' , checkboxSelection , onRo
                     density: density
                 });
             },
-            cell: ({ row , table  })=>{
+            cell: ({ row, table })=>{
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCheckbox.TableCheckbox, {
                     checked: row.getIsSelected(),
                     indeterminate: row.getIsSomeSelected(),
                     onChange: (e)=>{
                         handleCheckboxChange(e, table, row);
                     },
-                    color: getCheckboxColor === null || getCheckboxColor === void 0 ? void 0 : getCheckboxColor(row.original),
+                    color: getCheckboxColor?.(row.original),
                     density: density
                 });
             },
@@ -144,9 +144,11 @@ function Table({ data , columns , density ='standard' , checkboxSelection , onRo
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VirtualizedTable.VirtualizedTable, {
         ...otherProps,
         density: density,
+        defaultColumnWidth: defaultColumnWidth,
         onRowClick: handleRowClick,
         rows: table.getRowModel().rows,
         columns: table.getAllFlatColumns(),
-        headers: table.getHeaderGroups()
+        headers: table.getHeaderGroups(),
+        cellConfigs: cellConfigs
     });
 }

package/dist/cjs/Table/TableCell.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
 const _tablemodel = require("./model/table-model");
-const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme  })=>({
+const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
         padding: 0,
         backgroundColor: 'inherit',
         '&.MuiTableCell-head': {
@@ -39,7 +39,7 @@ const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme
             borderRadius: 0
         }
     }));
-function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , description , ...otherProps }) {
+function TableCell({ children, density, variant, width, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, align, color, backgroundColor, ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const elRef = (0, _react.useRef)();
     const isHeader = variant === 'head';
@@ -51,9 +51,8 @@ function TableCell({ children , density , variant , width , focusState ='none' ,
         focusState
     ]);
     const handleFocus = (e)=>{
-        var _e_currentTarget;
         // From https://zellwk.com/blog/keyboard-focusable-elements/
-        const nestedFocusTarget = (_e_currentTarget = e.currentTarget) === null || _e_currentTarget === void 0 ? void 0 : _e_currentTarget.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
+        const nestedFocusTarget = e.currentTarget?.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
         if (nestedFocusTarget) {
             // If the cell has a focusable child, focus it instead. Mostly used for
             // checkbox cells, but could have other uses.
@@ -66,7 +65,7 @@ function TableCell({ children , density , variant , width , focusState ='none' ,
         // plays with the triggering of focus with keyboard interactions.
         // These report that a focus event happened, so we can adjust the current
         // tabindex and focuses to the right cell.
-        onFocusTrigger === null || onFocusTrigger === void 0 ? void 0 : onFocusTrigger(e);
+        onFocusTrigger?.(e);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledMuiTableCell, {
         ...otherProps,
@@ -78,12 +77,29 @@ function TableCell({ children , density , variant , width , focusState ='none' ,
         onFocus: handleFocus,
         onClick: handleInteractionFocusTrigger,
         onKeyUp: handleInteractionFocusTrigger,
+        style: {
+            width: width
+        },
         sx: {
-            width: width,
-            borderBottom: isHeader ? (theme)=>`solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`
+            position: 'relative',
+            borderBottom: isHeader ? `solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`,
+            '&:hover #original-cell': {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                zIndex: 10,
+                width: 'fit-content',
+                minWidth: '100%',
+                whiteSpace: 'nowrap',
+                overflow: 'visible',
+                backgroundColor: `${backgroundColor ?? theme.palette.background.default} !important`,
+                outline: `solid 1px ${theme.palette.info.main}`,
+                outlineOffset: '-1px'
+            }
         },
         ref: elRef,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+            id: "original-cell",
             sx: {
                 ...(0, _tablemodel.getTableCellLayout)(theme, density, {
                     isLastColumn,
@@ -100,7 +116,13 @@ function TableCell({ children , density , variant , width , focusState ='none' ,
                 // in headers.
                 flexDirection: 'inherit'
             },
+            style: {
+                backgroundColor: backgroundColor ?? 'inherit',
+                color: color ?? 'inherit'
+            },
             title: description,
+            "aria-label": description,
+            textAlign: align,
             children: children
         })
     });

package/dist/cjs/Table/TableCheckbox.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "TableCheckbox", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-function TableCheckbox({ color , density , ...otherProps }) {
+function TableCheckbox({ color, density, ...otherProps }) {
     const isCompact = density === 'compact';
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
         size: isCompact ? 'small' : 'medium',

package/dist/cjs/Table/TableHeaderCell.js

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "TableHeaderCell", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _TableCell = require("./TableCell");
-function TableHeaderCell({ onSort , sortDirection , nextSortDirection , children , ...cellProps }) {
+function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }) {
     const showSortLabel = !!onSort;
     const headerText = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
         noWrap: true,

package/dist/cjs/Table/VirtualizedTable.js

@@ -33,7 +33,7 @@ const _TableHeaderCell = require("./TableHeaderCell");
 const _TableCell = require("./TableCell");
 const _VirtualizedTableContainer = require("./VirtualizedTableContainer");
 const _useVirtualizedTableKeyboardNav = require("./hooks/useVirtualizedTableKeyboardNav");
-function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOver , onRowMouseOut , rows , columns , headers  }) {
+function VirtualizedTable({ width, height, density, defaultColumnWidth, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs }) {
     const virtuosoRef = (0, _react.useRef)(null);
     // Use a ref for these values because they are only needed for keyboard
     // focus interactions and setting them on state will lead to a significant
@@ -71,7 +71,7 @@ function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOv
             },
             TableHead: _TableHead.TableHead,
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            TableRow: ({ item , ...props })=>{
+            TableRow: ({ item, ...props })=>{
                 const index = props['data-index'];
                 const row = rows[index];
                 if (!row) {
@@ -86,10 +86,10 @@ function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOv
                     onClick: (e)=>onRowClick(e, row.id),
                     density: density,
                     onMouseOver: (e)=>{
-                        onRowMouseOver === null || onRowMouseOver === void 0 ? void 0 : onRowMouseOver(e, rowEventOpts);
+                        onRowMouseOver?.(e, rowEventOpts);
                     },
                     onMouseOut: (e)=>{
-                        onRowMouseOut === null || onRowMouseOut === void 0 ? void 0 : onRowMouseOut(e, rowEventOpts);
+                        onRowMouseOut?.(e, rowEventOpts);
                     }
                 });
             },
@@ -105,7 +105,7 @@ function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOv
         width
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        sx: {
+        style: {
             width,
             height
         },
@@ -123,7 +123,6 @@ function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOv
                         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableRow.TableRow, {
                             density: density,
                             children: headerGroup.headers.map((header, i, headers)=>{
-                                var _column_columnDef_meta, _column_columnDef_meta1;
                                 const column = header.column;
                                 const position = {
                                     row: 0,
@@ -135,11 +134,11 @@ function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOv
                                     onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
                                     sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
                                     nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
-                                    width: column.getSize() || 'auto',
-                                    align: (_column_columnDef_meta = column.columnDef.meta) === null || _column_columnDef_meta === void 0 ? void 0 : _column_columnDef_meta.align,
+                                    width: column.getSize() || defaultColumnWidth,
+                                    align: column.columnDef.meta?.align,
                                     variant: "head",
                                     density: density,
-                                    description: (_column_columnDef_meta1 = column.columnDef.meta) === null || _column_columnDef_meta1 === void 0 ? void 0 : _column_columnDef_meta1.headerDescription,
+                                    description: column.columnDef.meta?.headerDescription,
                                     focusState: getFocusState(position),
                                     onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                                     isFirstColumn: i === 0,
@@ -158,16 +157,16 @@ function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOv
                 }
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
                     children: row.getVisibleCells().map((cell, i, cells)=>{
-                        var _cell_column_columnDef_meta, _cell_column_columnDef_meta1;
                         const position = {
                             // Add 1 to the row index because the header is row 0
                             row: index + 1,
                             column: i
                         };
                         const cellContext = cell.getContext();
+                        const cellConfig = cellConfigs?.[cellContext.cell.id];
                         const cellRenderFn = cell.column.columnDef.cell;
-                        const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;
-                        const cellDescriptionDef = (_cell_column_columnDef_meta = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : _cell_column_columnDef_meta.cellDescription;
+                        const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
+                        const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
                         let description = undefined;
                         if (typeof cellDescriptionDef === 'function') {
                             // If the cell description is a function, set the value using
@@ -180,15 +179,19 @@ function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOv
                             description = cellContent;
                         }
                         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCell.TableCell, {
-                            width: cell.column.getSize() || 'auto',
-                            align: (_cell_column_columnDef_meta1 = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta1 === void 0 ? void 0 : _cell_column_columnDef_meta1.align,
+                            "data-testid": cell.id,
+                            title: description || cellConfig?.text || cellContent,
+                            width: cell.column.getSize() || defaultColumnWidth,
+                            align: cell.column.columnDef.meta?.align,
                             density: density,
                             focusState: getFocusState(position),
                             onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                             isFirstColumn: i === 0,
                             isLastColumn: i === cells.length - 1,
                             description: description,
-                            children: cellContent
+                            color: cellConfig?.textColor ?? undefined,
+                            backgroundColor: cellConfig?.backgroundColor ?? undefined,
+                            children: cellConfig?.text || cellContent
                         }, cell.id);
                     })
                 });

package/dist/cjs/Table/hooks/useTableKeyboardNav.js

@@ -34,7 +34,7 @@ const ARROW_KEYS = [
 function isArrowKey(key) {
     return ARROW_KEYS.includes(key);
 }
-function useTableKeyboardNav({ maxRows , maxColumns , onActiveCellChange  }) {
+function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }) {
     const [activeCell, setActiveCell] = (0, _react.useState)(DEFAULT_ACTIVE_CELL);
     const [isActive, setIsActive] = (0, _react.useState)(false);
     const handleCellFocus = (cellPosition)=>{
@@ -78,7 +78,7 @@ function useTableKeyboardNav({ maxRows , maxColumns , onActiveCellChange  }) {
                     column: nextColumn,
                     row: nextRow
                 };
-                const newPosition = (onActiveCellChange === null || onActiveCellChange === void 0 ? void 0 : onActiveCellChange(e, curActiveCell, defaultNewPosition)) || defaultNewPosition;
+                const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;
                 if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {
                     // Return original to avoid creating a new object if nothing
                     // changed.