@feathery/react 2.32.0 → 2.32.1

package/cjs/{fthry_index.Z6a5kUfj.js → fthry_index.NnMUv723.js}

@@ -1,17 +1,12 @@
 'use strict';
 
-var index = require('./fthry_index.CiXHBkVl.js');
+var index = require('./fthry_index.DQL_RNQ5.js');
 var React = require('react');
 var ReactDOM = require('react-dom');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 
-function TrashIcon(_a) {
-    var _b = _a.width, width = _b === void 0 ? 16 : _b, _c = _a.height, height = _c === void 0 ? 16 : _c, props = index.__rest(_a, ["width", "height"]);
-    return (index.jsx("svg", index.__assign({ width: width, height: height, fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2, xmlns: 'http://www.w3.org/2000/svg' }, props, { children: index.jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16' }) })));
-}
-
 var colors = {
     white: '#ffffff',
     gray50: '#f9fafb',
@@ -23,9 +18,7 @@ var colors = {
     gray700: '#374151',
     gray900: '#111827',
     blue50: '#eff6ff',
-    blue700: '#1d4ed8',
-    red500: '#ef4444',
-    red600: '#dc2626'
+    blue700: '#1d4ed8'
 };
 var searchIconStyle = {
     width: '16px',
@@ -84,9 +77,12 @@ var emptyStateTextStyle = {
     fontWeight: '500',
     margin: 0
 };
+var searchContainerStyle = {
+    padding: '16px',
+    borderBottom: "1px solid ".concat(colors.gray200)
+};
 var searchWrapperStyle = {
-    position: 'relative',
-    flex: 1
+    position: 'relative'
 };
 var searchIconWrapperStyle = {
     position: 'absolute',
@@ -133,8 +129,7 @@ var theadStyle = {
 var thStyle = {
     padding: '12px 24px',
     fontWeight: '500',
-    userSelect: 'none',
-    whiteSpace: 'nowrap'
+    userSelect: 'none'
 };
 var rowStyle = {
     backgroundColor: colors.white,
@@ -242,14 +237,6 @@ var actionMenuItemStyle = {
         borderBottomRightRadius: '4px'
     }
 };
-var actionMenuSeparatorStyle = {
-    borderTop: "1px solid ".concat(colors.gray200),
-    margin: '4px 0'
-};
-var actionMenuDeleteItemStyle = index.__assign(index.__assign({}, actionMenuItemStyle), { color: colors.red500, '&:hover': {
-        backgroundColor: colors.gray100,
-        color: colors.red600
-    } });
 var actionIconButtonStyle = index.__assign(index.__assign({}, actionButtonStyle), { aspectRatio: 1, paddingLeft: 0, paddingRight: 0 });
 var actionContainerStyle = {
     display: 'flex',
@@ -274,111 +261,6 @@ var overflowSelectStyle = index.__assign(index.__assign({}, pageButtonStyle), {
         color: colors.gray900
     }, '&:focus': {
         outline: 'none'
-    } });
-// Editing styles
-var toolbarStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '16px',
-    borderBottom: "1px solid ".concat(colors.gray200),
-    gap: '12px'
-};
-var addRowButtonStyle = index.__assign(index.__assign({}, buttonStyle), { borderRadius: '8px', paddingLeft: '12px', paddingRight: '12px', whiteSpace: 'nowrap' });
-var clickToEditStyle = {
-    color: colors.gray400,
-    cursor: 'pointer',
-    userSelect: 'none',
-    fontSize: '14px'
-};
-var cellInputStyle = {
-    width: '100%',
-    padding: '4px 8px',
-    border: "1px solid ".concat(colors.blue700),
-    borderRadius: '4px',
-    fontSize: '14px',
-    color: colors.gray900,
-    outline: 'none',
-    boxSizing: 'border-box'
-};
-var editableCellContentStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px'
-};
-var overflowIconStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '24px',
-    height: '24px',
-    borderRadius: '4px',
-    border: 'none',
-    backgroundColor: 'transparent',
-    color: colors.gray400,
-    cursor: 'pointer',
-    opacity: 0,
-    transition: 'opacity 0.15s',
-    flexShrink: 0,
-    padding: 0,
-    'tr:hover &, &[aria-expanded="true"]': {
-        opacity: 1
-    },
-    '&:hover': {
-        backgroundColor: colors.gray100,
-        color: colors.gray600
-    }
-};
-var deleteColumnStyle = {
-    width: '40px',
-    padding: '0 8px'
-};
-var deleteIconStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '28px',
-    height: '28px',
-    borderRadius: '4px',
-    border: 'none',
-    backgroundColor: 'transparent',
-    color: colors.gray400,
-    cursor: 'pointer',
-    opacity: 0,
-    transition: 'opacity 0.15s',
-    padding: 0,
-    'tr:hover &': {
-        opacity: 1
-    },
-    '&:hover': {
-        backgroundColor: colors.gray100,
-        color: colors.red500
-    }
-};
-var confirmPopoverStyle = {
-    position: 'fixed',
-    backgroundColor: colors.white,
-    border: "1px solid ".concat(colors.gray300),
-    borderRadius: '8px',
-    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
-    zIndex: 9999,
-    padding: '12px 16px'
-};
-var confirmTextStyle = {
-    margin: '0 0 12px 0',
-    fontSize: '14px',
-    fontWeight: '500',
-    color: colors.gray900
-};
-var confirmButtonRowStyle = {
-    display: 'flex',
-    gap: '8px',
-    justifyContent: 'flex-end'
-};
-var confirmCancelButtonStyle = index.__assign(index.__assign({}, buttonStyle), { borderRadius: '6px', paddingLeft: '12px', paddingRight: '12px', height: '32px' });
-var confirmDeleteButtonStyle = index.__assign(index.__assign({}, buttonStyle), { borderRadius: '6px', paddingLeft: '12px', paddingRight: '12px', height: '32px', backgroundColor: colors.red500, color: colors.white, border: "1px solid ".concat(colors.red500), '&:hover': {
-        backgroundColor: colors.red600,
-        color: colors.white
     } });
 
 function SearchIcon() {
@@ -391,7 +273,7 @@ function Search(_a) {
             e.preventDefault();
         }
     };
-    return (index.jsxs("div", index.__assign({ css: searchWrapperStyle }, { children: [index.jsx("div", index.__assign({ css: searchIconWrapperStyle }, { children: index.jsx(SearchIcon, {}) })), index.jsx("input", { type: 'text', css: searchInputStyle, placeholder: 'Search', value: searchQuery, onChange: function (e) { return onSearchChange(e.target.value); }, onKeyDown: handleKeyDown })] })));
+    return (index.jsx("div", index.__assign({ css: searchContainerStyle }, { children: index.jsxs("div", index.__assign({ css: searchWrapperStyle }, { children: [index.jsx("div", index.__assign({ css: searchIconWrapperStyle }, { children: index.jsx(SearchIcon, {}) })), index.jsx("input", { type: 'text', css: searchInputStyle, placeholder: 'Search', value: searchQuery, onChange: function (e) { return onSearchChange(e.target.value); }, onKeyDown: handleKeyDown })] })) })));
 }
 
 function SortIcon(_a) {
@@ -476,11 +358,11 @@ function MenuIcon() {
 }
 function ActionButtons(_a) {
     var _b, _c, _d;
-    var actions = _a.actions, rowIndex = _a.rowIndex, columnData = _a.columnData, fieldValuesProp = _a.fieldValues, onClick = _a.onClick, _e = _a.forceInlineButtons, forceInlineButtons = _e === void 0 ? false : _e, _f = _a.tableId, tableId = _f === void 0 ? '' : _f, _g = _a.buttonLoaders, buttonLoaders = _g === void 0 ? {} : _g, _h = _a.canDeleteRows, canDeleteRows = _h === void 0 ? false : _h, onDeleteRow = _a.onDeleteRow;
+    var actions = _a.actions, rowIndex = _a.rowIndex, columnData = _a.columnData, fieldValuesProp = _a.fieldValues, onClick = _a.onClick, _e = _a.forceInlineButtons, forceInlineButtons = _e === void 0 ? false : _e, _f = _a.tableId, tableId = _f === void 0 ? '' : _f, _g = _a.buttonLoaders, buttonLoaders = _g === void 0 ? {} : _g;
     if (actions.length === 0)
         return null;
-    var _j = index.__read(React.useState(false), 2), isMenuOpen = _j[0], setIsMenuOpen = _j[1];
-    var _k = index.__read(React.useState({ top: 0, left: 0 }), 2), menuPosition = _k[0], setMenuPosition = _k[1];
+    var _h = index.__read(React.useState(false), 2), isMenuOpen = _h[0], setIsMenuOpen = _h[1];
+    var _j = index.__read(React.useState({ top: 0, left: 0 }), 2), menuPosition = _j[0], setMenuPosition = _j[1];
     var containerRef = React.useRef(null);
     var menuRef = React.useRef(null);
     var menuButtonRef = React.useRef(null);
@@ -547,17 +429,13 @@ function ActionButtons(_a) {
                             alignItems: 'center',
                             justifyContent: 'center'
                         } }, { children: overflowLoader }))) : (index.jsx(MenuIcon, {})) })), isMenuOpen &&
-                    ReactDOM.createPortal(index.jsxs("div", index.__assign({ ref: menuRef, css: index.__assign(index.__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: [actions.map(function (action, index$1) {
-                                var disabled = Object.keys(buttonLoaders).length > 0;
-                                return (index.jsx("button", index.__assign({ type: 'button', onClick: function (e) {
-                                        e.stopPropagation();
-                                        handleActionClick(action);
-                                    }, css: actionMenuItemStyle, disabled: disabled }, { children: action.label }), index$1));
-                            }), canDeleteRows && onDeleteRow && (index.jsxs(index.Fragment, { children: [index.jsx("div", { css: actionMenuSeparatorStyle }), index.jsx("button", index.__assign({ type: 'button', onClick: function (e) {
-                                            e.stopPropagation();
-                                            setIsMenuOpen(false);
-                                            onDeleteRow(rowIndex);
-                                        }, css: actionMenuDeleteItemStyle }, { children: "Delete" }))] }))] })), index.featheryDoc().body)] })) : (actions.map(function (action, index$1) {
+                    ReactDOM.createPortal(index.jsx("div", index.__assign({ ref: menuRef, css: index.__assign(index.__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: actions.map(function (action, index$1) {
+                            var disabled = Object.keys(buttonLoaders).length > 0;
+                            return (index.jsx("button", index.__assign({ type: 'button', onClick: function (e) {
+                                    e.stopPropagation();
+                                    handleActionClick(action);
+                                }, css: actionMenuItemStyle, disabled: disabled }, { children: action.label }), index$1));
+                        }) })), index.featheryDoc().body)] })) : (actions.map(function (action, index$1) {
             var _a;
             var buttonKey = "".concat(tableId, "_").concat(rowIndex, "_").concat(action.label);
             var loader = (_a = buttonLoaders[buttonKey]) === null || _a === void 0 ? void 0 : _a.loader;
@@ -586,153 +464,6 @@ function EmptyState(_a) {
                 }, fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 1.5 }, { children: index.jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' }) }))), index.jsx("p", index.__assign({ css: emptyStateTextStyle }, { children: hasSearchQuery ? 'No results found' : 'No data available' })), hasSearchQuery && (index.jsx("p", index.__assign({ css: index.__assign(index.__assign({}, emptyStateTextStyle), { fontSize: '14px', marginTop: '8px' }) }, { children: "Try adjusting your search query" })))] })));
 }
 
-function DeleteConfirm(_a) {
-    var anchorEl = _a.anchorEl, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.message, message = _b === void 0 ? 'Delete this row?' : _b, _c = _a.confirmLabel, confirmLabel = _c === void 0 ? 'Delete' : _c;
-    var popoverRef = React.useRef(null);
-    if (!anchorEl)
-        return null;
-    var anchorRect = anchorEl.getBoundingClientRect();
-    var top = anchorRect.bottom + 4;
-    var left = anchorRect.right;
-    React.useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (popoverRef.current &&
-                !popoverRef.current.contains(event.target) &&
-                anchorEl &&
-                !anchorEl.contains(event.target)) {
-                onCancel();
-            }
-        };
-        var handleScroll = function () { return onCancel(); };
-        var handleKeyDown = function (event) {
-            if (event.key === 'Escape')
-                onCancel();
-        };
-        var doc = index.featheryDoc();
-        doc.addEventListener('mousedown', handleClickOutside);
-        doc.addEventListener('scroll', handleScroll, true);
-        doc.addEventListener('keydown', handleKeyDown);
-        return function () {
-            doc.removeEventListener('mousedown', handleClickOutside);
-            doc.removeEventListener('scroll', handleScroll, true);
-            doc.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [onCancel, anchorEl]);
-    return ReactDOM.createPortal(index.jsxs("div", index.__assign({ ref: popoverRef, role: 'alertdialog', "aria-label": message, css: index.__assign(index.__assign({}, confirmPopoverStyle), { top: "".concat(top, "px"), left: "".concat(left, "px"), transform: 'translateX(-100%)' }) }, { children: [index.jsx("p", index.__assign({ css: confirmTextStyle }, { children: message })), index.jsxs("div", index.__assign({ css: confirmButtonRowStyle }, { children: [index.jsx("button", index.__assign({ type: 'button', css: confirmCancelButtonStyle, onClick: function (e) {
-                            e.stopPropagation();
-                            onCancel();
-                        } }, { children: "Cancel" })), index.jsx("button", index.__assign({ type: 'button', css: confirmDeleteButtonStyle, onClick: function (e) {
-                            e.stopPropagation();
-                            onConfirm();
-                        } }, { children: confirmLabel }))] }))] })), index.featheryDoc().body);
-}
-
-function OverflowIcon() {
-    return (index.jsxs("svg", index.__assign({ width: '16', height: '16', fill: 'currentColor', viewBox: '0 0 24 24' }, { children: [index.jsx("circle", { cx: '12', cy: '5', r: '2' }), index.jsx("circle", { cx: '12', cy: '12', r: '2' }), index.jsx("circle", { cx: '12', cy: '19', r: '2' })] })));
-}
-function EditableCell(_a) {
-    var _b;
-    var value = _a.value, fieldKey = _a.fieldKey, rowIndex = _a.rowIndex, onEdit = _a.onEdit, onClear = _a.onClear;
-    var _c = index.__read(React.useState(false), 2), isEditing = _c[0], setIsEditing = _c[1];
-    var _d = index.__read(React.useState(''), 2), editValue = _d[0], setEditValue = _d[1];
-    var _e = index.__read(React.useState(false), 2), isMenuOpen = _e[0], setIsMenuOpen = _e[1];
-    var _f = index.__read(React.useState(false), 2), showClearConfirm = _f[0], setShowClearConfirm = _f[1];
-    var _g = index.__read(React.useState({ top: 0, left: 0 }), 2), menuPosition = _g[0], setMenuPosition = _g[1];
-    var inputRef = React.useRef(null);
-    var menuButtonRef = React.useRef(null);
-    var menuRef = React.useRef(null);
-    var shouldSaveRef = React.useRef(true);
-    var closeClearConfirm = React.useCallback(function () { return setShowClearConfirm(false); }, []);
-    var displayValue = (_b = index.stringifyWithNull(value)) !== null && _b !== void 0 ? _b : '';
-    var isEmpty = displayValue === '';
-    React.useEffect(function () {
-        if (isEditing && inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [isEditing]);
-    React.useEffect(function () {
-        if (!isMenuOpen)
-            return;
-        var handleClickOutside = function (event) {
-            if (menuRef.current &&
-                !menuRef.current.contains(event.target) &&
-                menuButtonRef.current &&
-                !menuButtonRef.current.contains(event.target)) {
-                setIsMenuOpen(false);
-            }
-        };
-        var handleScroll = function () { return setIsMenuOpen(false); };
-        var doc = index.featheryDoc();
-        doc.addEventListener('mousedown', handleClickOutside);
-        doc.addEventListener('scroll', handleScroll, true);
-        return function () {
-            doc.removeEventListener('mousedown', handleClickOutside);
-            doc.removeEventListener('scroll', handleScroll, true);
-        };
-    }, [isMenuOpen]);
-    var startEditing = function () {
-        setEditValue(displayValue);
-        setIsEditing(true);
-        setIsMenuOpen(false);
-    };
-    var saveEdit = function () {
-        if (editValue !== displayValue) {
-            onEdit(fieldKey, rowIndex, editValue);
-        }
-        setIsEditing(false);
-    };
-    var cancelEdit = function () {
-        shouldSaveRef.current = false;
-        setIsEditing(false);
-    };
-    var handleBlur = function () {
-        if (shouldSaveRef.current)
-            saveEdit();
-        shouldSaveRef.current = true;
-    };
-    var handleKeyDown = function (e) {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            shouldSaveRef.current = false;
-            saveEdit();
-        }
-        else if (e.key === 'Escape') {
-            e.preventDefault();
-            cancelEdit();
-        }
-        else if (e.key === 'Tab') {
-            shouldSaveRef.current = false;
-            saveEdit();
-        }
-    };
-    var handleMenuToggle = function (e) {
-        e.stopPropagation();
-        if (!isMenuOpen && menuButtonRef.current) {
-            var rect = menuButtonRef.current.getBoundingClientRect();
-            setMenuPosition({ top: rect.bottom + 4, left: rect.right });
-        }
-        setIsMenuOpen(!isMenuOpen);
-    };
-    if (isEditing) {
-        return (index.jsx("input", { ref: inputRef, type: 'text', value: editValue, onChange: function (e) { return setEditValue(e.target.value); }, onBlur: handleBlur, onKeyDown: handleKeyDown, css: cellInputStyle, onClick: function (e) { return e.stopPropagation(); } }));
-    }
-    if (isEmpty) {
-        return (index.jsx("span", index.__assign({ css: clickToEditStyle, onClick: startEditing }, { children: "Click to edit" })));
-    }
-    return (index.jsxs("div", index.__assign({ css: editableCellContentStyle }, { children: [index.jsx("span", index.__assign({ css: { flex: 1, minWidth: 0 } }, { children: displayValue })), index.jsx("button", index.__assign({ ref: menuButtonRef, type: 'button', "aria-expanded": isMenuOpen, "aria-haspopup": 'menu', css: overflowIconStyle, onClick: handleMenuToggle }, { children: index.jsx(OverflowIcon, {}) })), isMenuOpen &&
-                ReactDOM.createPortal(index.jsxs("div", index.__assign({ ref: menuRef, role: 'menu', css: index.__assign(index.__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: [index.jsx("button", index.__assign({ type: 'button', role: 'menuitem', css: actionMenuItemStyle, onClick: function (e) {
-                                e.stopPropagation();
-                                startEditing();
-                            } }, { children: "Edit Value" })), index.jsx("button", index.__assign({ type: 'button', role: 'menuitem', css: actionMenuItemStyle, onClick: function (e) {
-                                e.stopPropagation();
-                                setIsMenuOpen(false);
-                                setShowClearConfirm(true);
-                            } }, { children: "Clear Field" }))] })), index.featheryDoc().body), showClearConfirm && (index.jsx(DeleteConfirm, { anchorEl: menuButtonRef.current, message: 'Clear this field?', confirmLabel: 'Clear', onConfirm: function () {
-                    closeClearConfirm();
-                    onClear(fieldKey, rowIndex);
-                }, onCancel: closeClearConfirm }))] })));
-}
-
 // Utility functions for sorting strings as numbers and dates
 function tryParseNumber(value) {
     if (value === null || value === undefined || value === '')
@@ -923,16 +654,14 @@ function setCachedPage(elementId, page) {
     sessionStorage.setItem(key, page.toString());
 }
 function useTableData(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    var element = _a.element, _r = _a.editMode, editMode = _r === void 0 ? false : _r, _s = _a.dataVersion, dataVersion = _s === void 0 ? 0 : _s;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var element = _a.element, _m = _a.editMode, editMode = _m === void 0 ? false : _m;
     var userColumns = ((_b = element.properties) === null || _b === void 0 ? void 0 : _b.columns) || [];
     var actions = (((_c = element.properties) === null || _c === void 0 ? void 0 : _c.actions) || []).filter(function (action) { return action.label && action.label.trim() !== ''; });
     var enableSearch = (_e = (_d = element.properties) === null || _d === void 0 ? void 0 : _d.search) !== null && _e !== void 0 ? _e : false;
     var enableSort = (_g = (_f = element.properties) === null || _f === void 0 ? void 0 : _f.sort) !== null && _g !== void 0 ? _g : false;
     var enableTranspose = (_j = (_h = element.properties) === null || _h === void 0 ? void 0 : _h.transpose) !== null && _j !== void 0 ? _j : false;
-    var enableEditing = (_l = (_k = element.properties) === null || _k === void 0 ? void 0 : _k.enable_editing) !== null && _l !== void 0 ? _l : false;
-    var enableAddDeleteRows = (_o = (_m = element.properties) === null || _m === void 0 ? void 0 : _m.add_delete_rows) !== null && _o !== void 0 ? _o : false;
-    var paginationSetting = (_q = (_p = element.properties) === null || _p === void 0 ? void 0 : _p.pagination) !== null && _q !== void 0 ? _q : 0;
+    var paginationSetting = (_l = (_k = element.properties) === null || _k === void 0 ? void 0 : _k.pagination) !== null && _l !== void 0 ? _l : 0;
     var rowsPerPage = typeof paginationSetting === 'number' && paginationSetting > 0
         ? Math.floor(paginationSetting)
         : 0;
@@ -945,20 +674,19 @@ function useTableData(_a) {
         }
         return cols;
     }, [editMode, userColumns]);
-    // fieldValues is mutated outside React state, so we need dataVersion
-    // as a manual dirty flag to trigger re-snapshots
+    // Use example data in edit mode
     var baseFieldValues = React.useMemo(function () {
         if (editMode) {
             return generateExampleData(baseColumns);
         }
-        return index.__assign({}, index.fieldValues);
-    }, [editMode, baseColumns, dataVersion]);
-    var _t = index.__read(React.useState(''), 2), searchQuery = _t[0], setSearchQuery = _t[1];
-    var _u = index.__read(React.useState(null), 2), sortColumn = _u[0], setSortColumn = _u[1];
-    var _v = index.__read(React.useState('asc'), 2), sortDirection = _v[0], setSortDirection = _v[1];
-    var _w = index.__read(React.useState(function () {
+        return index.fieldValues;
+    }, [editMode, baseColumns, userColumns.length]);
+    var _o = index.__read(React.useState(''), 2), searchQuery = _o[0], setSearchQuery = _o[1];
+    var _p = index.__read(React.useState(null), 2), sortColumn = _p[0], setSortColumn = _p[1];
+    var _q = index.__read(React.useState('asc'), 2), sortDirection = _q[0], setSortDirection = _q[1];
+    var _r = index.__read(React.useState(function () {
         return getCachedPage(element.id);
-    }), 2), currentPage = _w[0], setCurrentPage = _w[1];
+    }), 2), currentPage = _r[0], setCurrentPage = _r[1];
     var baseNumRows = React.useMemo(function () {
         return baseColumns.reduce(function (maxRows, column) {
             var fieldValue = baseFieldValues[column.field_key];
@@ -994,7 +722,7 @@ function useTableData(_a) {
         enableSearch,
         baseFieldValues
     ]);
-    var _x = index.__read(React.useState(null), 2), sortedColumnIndex = _x[0], setSortedColumnIndex = _x[1];
+    var _s = index.__read(React.useState(null), 2), sortedColumnIndex = _s[0], setSortedColumnIndex = _s[1];
     var sortedBaseRowIndices = React.useMemo(function () {
         if (!enableTranspose || !enableSort || sortedColumnIndex === null) {
             return filteredBaseRowIndices;
@@ -1034,7 +762,7 @@ function useTableData(_a) {
         rowsPerPage,
         enablePagination
     ]);
-    var _y = React.useMemo(function () {
+    var _t = React.useMemo(function () {
         if (!enableTranspose || baseNumRows === 0) {
             return {
                 columns: baseColumns,
@@ -1054,7 +782,7 @@ function useTableData(_a) {
         baseFieldValues,
         baseNumRows,
         paginatedBaseRowIndices
-    ]), columns = _y.columns, activeFieldValues = _y.activeFieldValues, transposedRowIndices = _y.transposedRowIndices;
+    ]), columns = _t.columns, activeFieldValues = _t.activeFieldValues, transposedRowIndices = _t.transposedRowIndices;
     var numRows = React.useMemo(function () {
         return columns.reduce(function (maxRows, column) {
             var fieldValue = activeFieldValues[column.field_key];
@@ -1235,8 +963,6 @@ function useTableData(_a) {
         actions: actions,
         isTransposed: isTransposed,
         transposedRowIndices: transposedRowIndices,
-        enableEditing: enableEditing,
-        enableAddDeleteRows: enableAddDeleteRows,
         totalRows: totalRows,
         totalPages: totalPages,
         hasData: hasData,
@@ -1246,209 +972,24 @@ function useTableData(_a) {
     };
 }
 
-function useTableMutations(_a) {
-    var columns = _a.columns, updateFieldValues = _a.updateFieldValues, submitCustom = _a.submitCustom, editMode = _a.editMode, editModeFieldValues = _a.editModeFieldValues, enablePagination = _a.enablePagination, setCurrentPage = _a.setCurrentPage, setSearchQuery = _a.setSearchQuery, searchQuery = _a.searchQuery, onMutate = _a.onMutate;
-    var editModeFieldValuesRef = React.useRef(editModeFieldValues);
-    editModeFieldValuesRef.current = editModeFieldValues;
-    var getFieldArray = React.useCallback(function (fieldKey) {
-        var source = editMode ? editModeFieldValuesRef.current : index.fieldValues;
-        var val = source[fieldKey];
-        return Array.isArray(val) ? val : [];
-    }, [editMode]);
-    var handleAddRow = React.useCallback(function () {
-        var updates = {};
-        columns.forEach(function (col) {
-            var existing = getFieldArray(col.field_key);
-            updates[col.field_key] = index.__spreadArray([''], index.__read(existing), false);
-        });
-        // Clear search so the new row is visible
-        if (searchQuery)
-            setSearchQuery('');
-        // No submitCustom — new rows are provisional until the user edits a cell,
-        // avoiding empty-row noise in the backend
-        updateFieldValues(updates);
-        onMutate();
-        // Navigate to first page where the new row appears
-        if (enablePagination)
-            setCurrentPage(0);
-    }, [
-        columns,
-        getFieldArray,
-        updateFieldValues,
-        onMutate,
-        enablePagination,
-        setCurrentPage,
-        setSearchQuery,
-        searchQuery
-    ]);
-    var buildRowRemovalUpdates = React.useCallback(function (rowIndex) {
-        var updates = {};
-        columns.forEach(function (col) {
-            var existing = getFieldArray(col.field_key);
-            updates[col.field_key] = existing.filter(function (_, i) { return i !== rowIndex; });
-        });
-        return updates;
-    }, [columns, getFieldArray]);
-    var handleDeleteRow = React.useCallback(function (rowIndex) {
-        var updates = buildRowRemovalUpdates(rowIndex);
-        updateFieldValues(updates);
-        if (!editMode)
-            submitCustom(updates);
-        onMutate();
-    }, [
-        buildRowRemovalUpdates,
-        updateFieldValues,
-        submitCustom,
-        editMode,
-        onMutate
-    ]);
-    var handleRemoveRowLocal = React.useCallback(function (rowIndex) {
-        var updates = buildRowRemovalUpdates(rowIndex);
-        updateFieldValues(updates);
-        onMutate();
-    }, [buildRowRemovalUpdates, updateFieldValues, onMutate]);
-    var handleCellEdit = React.useCallback(function (fieldKey, rowIndex, newValue) {
-        var _a;
-        var existing = getFieldArray(fieldKey);
-        var updated = index.__spreadArray([], index.__read(existing), false);
-        updated[rowIndex] = newValue;
-        var values = (_a = {}, _a[fieldKey] = updated, _a);
-        updateFieldValues(values);
-        if (!editMode)
-            submitCustom(values);
-        onMutate();
-    }, [getFieldArray, updateFieldValues, submitCustom, editMode, onMutate]);
-    var handleCellClear = React.useCallback(function (fieldKey, rowIndex) {
-        handleCellEdit(fieldKey, rowIndex, '');
-    }, [handleCellEdit]);
-    return {
-        handleAddRow: handleAddRow,
-        handleDeleteRow: handleDeleteRow,
-        handleRemoveRowLocal: handleRemoveRowLocal,
-        handleCellEdit: handleCellEdit,
-        handleCellClear: handleCellClear
-    };
-}
-
-/**
- * Measures column widths from the browser's auto layout, then locks them
- * for use with table-layout: fixed. Re-measures when columnCount changes.
- */
-function useColumnWidths(tableRef, columnCount) {
-    var _a = index.__read(React.useState(null), 2), widths = _a[0], setWidths = _a[1];
-    var prevColumnCount = React.useRef(columnCount);
-    if (prevColumnCount.current !== columnCount) {
-        prevColumnCount.current = columnCount;
-        setWidths(null);
-    }
-    React.useLayoutEffect(function () {
-        var _a;
-        if (widths !== null)
-            return;
-        var win = index.featheryWindow();
-        if (!win || typeof win.getComputedStyle !== 'function')
-            return;
-        var table = tableRef.current;
-        if (!table)
-            return;
-        var headerRow = (_a = table.querySelector('thead tr')) !== null && _a !== void 0 ? _a : table.querySelector('tbody tr');
-        if (!headerRow)
-            return;
-        var measured = [];
-        for (var i = 0; i < headerRow.children.length; i++) {
-            measured.push(headerRow.children[i].getBoundingClientRect().width);
-        }
-        if (measured.length > 0)
-            setWidths(measured);
-    }, [widths, columnCount]);
-    return widths;
-}
-
 function applyTableStyles(responsiveStyles) {
     responsiveStyles.addTargets('table', 'thead', 'tbody', 'th', 'td', 'tr');
     return responsiveStyles;
 }
 function TableElement(_a) {
-    var element = _a.element, responsiveStyles = _a.responsiveStyles, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.updateFieldValues, updateFieldValues = _c === void 0 ? function () { } : _c, _d = _a.submitCustom, submitCustom = _d === void 0 ? function () { } : _d, _e = _a.editMode, editMode = _e === void 0 ? false : _e, _f = _a.buttonLoaders, buttonLoaders = _f === void 0 ? {} : _f;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.editMode, editMode = _c === void 0 ? false : _c, _d = _a.buttonLoaders, buttonLoaders = _d === void 0 ? {} : _d;
     var styles = React.useMemo(function () { return applyTableStyles(responsiveStyles); }, [responsiveStyles]);
-    var _g = index.__read(React.useState(0), 2), dataVersion = _g[0], setDataVersion = _g[1];
-    var onMutate = React.useCallback(function () { return setDataVersion(function (v) { return v + 1; }); }, []);
-    var _h = useTableData({ element: element, editMode: editMode, dataVersion: dataVersion }), 
+    var _e = useTableData({ element: element, editMode: editMode }), 
     // search
-    enableSearch = _h.enableSearch, searchQuery = _h.searchQuery, setSearchQuery = _h.setSearchQuery, 
+    enableSearch = _e.enableSearch, searchQuery = _e.searchQuery, setSearchQuery = _e.setSearchQuery, 
     // sort
-    enableSort = _h.enableSort, sortColumn = _h.sortColumn, sortDirection = _h.sortDirection, sortedColumnIndex = _h.sortedColumnIndex, handleSort = _h.handleSort, handleTransposedSort = _h.handleTransposedSort, 
+    enableSort = _e.enableSort, sortColumn = _e.sortColumn, sortDirection = _e.sortDirection, sortedColumnIndex = _e.sortedColumnIndex, handleSort = _e.handleSort, handleTransposedSort = _e.handleTransposedSort, 
     // pagination
-    enablePagination = _h.enablePagination, currentPage = _h.currentPage, setCurrentPage = _h.setCurrentPage, paginatedRowIndices = _h.paginatedRowIndices, rowsPerPage = _h.rowsPerPage, 
-    // editing
-    enableEditing = _h.enableEditing, enableAddDeleteRows = _h.enableAddDeleteRows, 
+    enablePagination = _e.enablePagination, currentPage = _e.currentPage, setCurrentPage = _e.setCurrentPage, paginatedRowIndices = _e.paginatedRowIndices, rowsPerPage = _e.rowsPerPage, 
     // data
-    columns = _h.columns, actions = _h.actions, isTransposed = _h.isTransposed, transposedRowIndices = _h.transposedRowIndices, totalRows = _h.totalRows, totalPages = _h.totalPages, hasData = _h.hasData, hasSearchResults = _h.hasSearchResults, activeFieldValues = _h.activeFieldValues, baseColumns = _h.baseColumns, baseFieldValues = _h.baseFieldValues;
-    var _j = useTableMutations({
-        columns: baseColumns,
-        updateFieldValues: updateFieldValues,
-        submitCustom: submitCustom,
-        editMode: editMode,
-        editModeFieldValues: activeFieldValues,
-        enablePagination: enablePagination,
-        setCurrentPage: setCurrentPage,
-        setSearchQuery: setSearchQuery,
-        searchQuery: searchQuery,
-        onMutate: onMutate
-    }), handleAddRow = _j.handleAddRow, handleDeleteRow = _j.handleDeleteRow, handleCellEdit = _j.handleCellEdit, handleCellClear = _j.handleCellClear;
-    var canEdit = enableEditing && !isTransposed;
-    var showAddRow = canEdit && enableAddDeleteRows;
-    var canDeleteRows = canEdit && enableAddDeleteRows;
-    var hasOverflowMenu = actions.length > 1;
-    var showStandaloneDeleteColumn = canDeleteRows && !hasOverflowMenu;
-    var _k = index.__read(React.useState(new Set()), 2), pendingAddRows = _k[0], setPendingAddRows = _k[1];
-    var pendingAddRowsRef = React.useRef(pendingAddRows);
-    pendingAddRowsRef.current = pendingAddRows;
-    var wrappedHandleCellEdit = React.useCallback(function (fieldKey, rowIndex, newValue) {
-        if (pendingAddRowsRef.current.has(rowIndex)) {
-            setPendingAddRows(function (prev) {
-                var next = new Set(prev);
-                next.delete(rowIndex);
-                return next;
-            });
-        }
-        handleCellEdit(fieldKey, rowIndex, newValue);
-    }, [handleCellEdit]);
-    var _l = index.__read(React.useState(null), 2), deleteRowIndex = _l[0], setDeleteRowIndex = _l[1];
-    var prevPageRef = React.useRef(currentPage);
-    if (prevPageRef.current !== currentPage) {
-        prevPageRef.current = currentPage;
-        setDeleteRowIndex(null);
-    }
-    var handleCancelDelete = React.useCallback(function () { return setDeleteRowIndex(null); }, []);
-    var deleteIconRefs = React.useRef(new Map());
-    var actionCellRefs = React.useRef(new Map());
-    var showEmptyState = !hasData || !hasSearchResults;
-    var showToolbar = enableSearch || showAddRow;
-    var tableRef = React.useRef(null);
-    var visibleColumnCount = columns.length +
-        (!isTransposed && actions.length > 0 ? 1 : 0) +
-        (showStandaloneDeleteColumn ? 1 : 0);
-    var columnWidths = useColumnWidths(tableRef, visibleColumnCount);
-    return (index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({}, containerStyle), styles.getTarget('container')) }, { children: [showToolbar && (index.jsxs("div", index.__assign({ css: toolbarStyle }, { children: [enableSearch ? (index.jsx(Search, { searchQuery: searchQuery, onSearchChange: setSearchQuery })) : (index.jsx("div", {})), showAddRow && (index.jsx("button", index.__assign({ type: 'button', css: addRowButtonStyle, onClick: function () {
-                            setDeleteRowIndex(null);
-                            handleAddRow();
-                            setPendingAddRows(function (prev) {
-                                var next = new Set();
-                                next.add(0);
-                                prev.forEach(function (idx) { return next.add(idx + 1); });
-                                return next;
-                            });
-                        } }, { children: "+ Add Row" })))] }))), showEmptyState ? (index.jsx(EmptyState, { hasSearchQuery: searchQuery.trim().length > 0 })) : (index.jsx("div", index.__assign({ css: { overflowX: 'auto' } }, { children: index.jsxs("table", index.__assign({ ref: tableRef, css: index.__assign(index.__assign(index.__assign({}, tableStyle), (columnWidths
-                        ? {
-                            tableLayout: 'fixed',
-                            minWidth: "".concat(columnWidths.reduce(function (a, b) { return a + b; }, 0), "px")
-                        }
-                        : {
-                            tableLayout: 'auto',
-                            width: 'max-content'
-                        })), styles.getTarget('table')) }, { children: [columnWidths && (index.jsx("colgroup", { children: columnWidths.map(function (w, i) { return (index.jsx("col", { style: { width: "".concat(w, "px") } }, i)); }) })), !isTransposed && (index.jsx("thead", index.__assign({ css: theadStyle }, { children: index.jsxs("tr", { children: [index.jsx(SortHeader, { columns: columns, enableSort: enableSort, sortColumn: sortColumn, sortDirection: sortDirection, onSort: handleSort, styles: styles }), actions.length > 0 && (index.jsx("th", { scope: 'col', css: index.__assign(index.__assign(index.__assign({}, thStyle), { paddingLeft: 0 }), styles.getTarget('th')) })), showStandaloneDeleteColumn && (index.jsx("th", { scope: 'col', css: index.__assign(index.__assign(index.__assign({}, thStyle), deleteColumnStyle), styles.getTarget('th')) }))] }) }))), index.jsxs("tbody", index.__assign({ css: styles.getTarget('tbody') }, { children: [paginatedRowIndices.map(function (rowIndex) {
-                                    var _a, _b;
+    columns = _e.columns, actions = _e.actions, isTransposed = _e.isTransposed, transposedRowIndices = _e.transposedRowIndices, totalRows = _e.totalRows, totalPages = _e.totalPages, hasData = _e.hasData, hasSearchResults = _e.hasSearchResults, activeFieldValues = _e.activeFieldValues, baseColumns = _e.baseColumns, baseFieldValues = _e.baseFieldValues;
+    var showEmptyState = !hasData || (hasData && !hasSearchResults);
+    return (index.jsx("div", index.__assign({ css: index.__assign(index.__assign({}, containerStyle), styles.getTarget('container')) }, { children: index.jsxs("div", index.__assign({ css: { minWidth: 'fit-content' } }, { children: [enableSearch && (index.jsx(Search, { searchQuery: searchQuery, onSearchChange: setSearchQuery })), showEmptyState ? (index.jsx(EmptyState, { hasSearchQuery: searchQuery.trim().length > 0 })) : (index.jsxs("table", index.__assign({ css: index.__assign(index.__assign({}, tableStyle), styles.getTarget('table')) }, { children: [!isTransposed && (index.jsx("thead", index.__assign({ css: theadStyle }, { children: index.jsxs("tr", { children: [index.jsx(SortHeader, { columns: columns, enableSort: enableSort, sortColumn: sortColumn, sortDirection: sortDirection, onSort: handleSort, styles: styles }), actions.length > 0 && (index.jsx("th", { scope: 'col', css: index.__assign(index.__assign(index.__assign({}, thStyle), { paddingLeft: 0 }), styles.getTarget('th')) }))] }) }))), index.jsxs("tbody", index.__assign({ css: styles.getTarget('tbody') }, { children: [paginatedRowIndices.map(function (rowIndex) {
                                     var rowData = {};
                                     if (!isTransposed) {
                                         columns.forEach(function (col) {
@@ -1460,7 +1001,7 @@ function TableElement(_a) {
                                         });
                                     }
                                     var handleRowClick = function () {
-                                        if (!isTransposed && !canEdit) {
+                                        if (!isTransposed) {
                                             onClick({
                                                 rowIndex: rowIndex,
                                                 rowData: rowData
@@ -1478,6 +1019,7 @@ function TableElement(_a) {
                                                 var isSorted = sortedColumnIndex === rowIndex;
                                                 var isFirstColumn = colIndex === 0;
                                                 var isSecondColumn = colIndex === 1;
+                                                // In transposed mode, get the original row index from the column
                                                 var originalRowIndex = isTransposed && !isFirstColInTranspose
                                                     ? column.originalRowIndex
                                                     : undefined;
@@ -1498,6 +1040,7 @@ function TableElement(_a) {
                                                     }
                                                     else if (isTransposed &&
                                                         originalRowIndex !== undefined) {
+                                                        // In transposed mode, clicking a cell triggers with original row data
                                                         e.stopPropagation();
                                                         var originalRowData_1 = {};
                                                         baseColumns.forEach(function (col) {
@@ -1513,32 +1056,9 @@ function TableElement(_a) {
                                                         });
                                                     }
                                                 };
-                                                return (index.jsx(CellElement, index.__assign({ css: cellCss, onClick: handleCellClick }, (isFirstColInTranspose ? { scope: 'row' } : {}), { children: isFirstColInTranspose && isSortable ? (index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({}, sortHeaderContentStyle), { justifyContent: 'space-between' }) }, { children: [index.jsx("span", { children: (_a = index.stringifyWithNull(cellValue)) !== null && _a !== void 0 ? _a : '' }), index.jsx("span", index.__assign({ css: sortIconContainerStyle }, { children: index.jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) }))] }))) : canEdit ? (index.jsx(EditableCell, { value: cellValue, fieldKey: column.field_key, rowIndex: rowIndex, onEdit: wrappedHandleCellEdit, onClear: handleCellClear })) : ((_b = index.stringifyWithNull(cellValue)) !== null && _b !== void 0 ? _b : '') }), colIndex));
-                                            }), !isTransposed && actions.length > 0 && (index.jsxs("td", index.__assign({ ref: function (el) {
-                                                    if (el)
-                                                        actionCellRefs.current.set(rowIndex, el);
-                                                    else
-                                                        actionCellRefs.current.delete(rowIndex);
-                                                }, css: index.__assign(index.__assign(index.__assign({}, cellStyle), { paddingLeft: 0 }), styles.getTarget('td')) }, { children: [index.jsx(ActionButtons, { actions: actions, rowIndex: rowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, tableId: element.id, buttonLoaders: buttonLoaders, canDeleteRows: canDeleteRows && hasOverflowMenu, onDeleteRow: function (ri) { return setDeleteRowIndex(ri); } }), hasOverflowMenu &&
-                                                        canDeleteRows &&
-                                                        deleteRowIndex === rowIndex && (index.jsx(DeleteConfirm, { anchorEl: (_a = actionCellRefs.current.get(rowIndex)) !== null && _a !== void 0 ? _a : null, onConfirm: function () {
-                                                            handleDeleteRow(rowIndex);
-                                                            setDeleteRowIndex(null);
-                                                        }, onCancel: handleCancelDelete }))] }))), showStandaloneDeleteColumn && (index.jsxs("td", index.__assign({ css: index.__assign(index.__assign({}, deleteColumnStyle), styles.getTarget('td')) }, { children: [index.jsx("button", index.__assign({ type: 'button', ref: function (el) {
-                                                            if (el)
-                                                                deleteIconRefs.current.set(rowIndex, el);
-                                                            else
-                                                                deleteIconRefs.current.delete(rowIndex);
-                                                        }, css: index.__assign(index.__assign({}, deleteIconStyle), (deleteRowIndex === rowIndex && {
-                                                            opacity: 1
-                                                        })), onClick: function (e) {
-                                                            e.stopPropagation();
-                                                            setDeleteRowIndex(deleteRowIndex === rowIndex ? null : rowIndex);
-                                                        } }, { children: index.jsx(TrashIcon, {}) })), deleteRowIndex === rowIndex && (index.jsx(DeleteConfirm, { anchorEl: (_b = deleteIconRefs.current.get(rowIndex)) !== null && _b !== void 0 ? _b : null, onConfirm: function () {
-                                                            handleDeleteRow(rowIndex);
-                                                            setDeleteRowIndex(null);
-                                                        }, onCancel: handleCancelDelete }))] })))] }), rowIndex));
-                                }), isTransposed && actions.length > 0 && (index.jsxs("tr", index.__assign({ css: index.__assign(index.__assign({}, rowStyle), styles.getTarget('tr')) }, { children: [index.jsx("th", { scope: 'row', css: index.__assign(index.__assign(index.__assign({}, thStyle), { backgroundColor: '#f9fafb', borderRight: '1px solid #e5e7eb', width: '1px', whiteSpace: 'nowrap' }), styles.getTarget('th')) }), transposedRowIndices.map(function (originalRowIndex, idx) { return (index.jsx("td", index.__assign({ css: index.__assign(index.__assign(index.__assign({}, cellStyle), (idx === 0 ? {} : { paddingLeft: 0 })), styles.getTarget('td')) }, { children: index.jsx("div", index.__assign({ css: { display: 'flex', justifyContent: 'flex-start' } }, { children: index.jsx(ActionButtons, { actions: actions, rowIndex: originalRowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, forceInlineButtons: true, tableId: element.id, buttonLoaders: buttonLoaders }) })) }), originalRowIndex)); })] })))] }))] })) }))), !showEmptyState && enablePagination && (index.jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })));
+                                                return (index.jsx(CellElement, index.__assign({ css: cellCss, onClick: handleCellClick }, (isFirstColInTranspose ? { scope: 'row' } : {}), { children: isFirstColInTranspose && isSortable ? (index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({}, sortHeaderContentStyle), { justifyContent: 'space-between' }) }, { children: [index.jsx("span", { children: (_a = index.stringifyWithNull(cellValue)) !== null && _a !== void 0 ? _a : '' }), index.jsx("span", index.__assign({ css: sortIconContainerStyle }, { children: index.jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) }))] }))) : ((_b = index.stringifyWithNull(cellValue)) !== null && _b !== void 0 ? _b : '') }), colIndex));
+                                            }), !isTransposed && actions.length > 0 && (index.jsx("td", index.__assign({ css: index.__assign(index.__assign(index.__assign({}, cellStyle), { paddingLeft: 0 }), styles.getTarget('td')) }, { children: index.jsx(ActionButtons, { actions: actions, rowIndex: rowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, tableId: element.id, buttonLoaders: buttonLoaders }) })))] }), rowIndex));
+                                }), isTransposed && actions.length > 0 && (index.jsxs("tr", index.__assign({ css: index.__assign(index.__assign({}, rowStyle), styles.getTarget('tr')) }, { children: [index.jsx("th", { scope: 'row', css: index.__assign(index.__assign(index.__assign({}, thStyle), { backgroundColor: '#f9fafb', borderRight: '1px solid #e5e7eb', width: '1px', whiteSpace: 'nowrap' }), styles.getTarget('th')) }), transposedRowIndices.map(function (originalRowIndex, idx) { return (index.jsx("td", index.__assign({ css: index.__assign(index.__assign(index.__assign({}, cellStyle), (idx === 0 ? {} : { paddingLeft: 0 })), styles.getTarget('td')) }, { children: index.jsx("div", index.__assign({ css: { display: 'flex', justifyContent: 'flex-start' } }, { children: index.jsx(ActionButtons, { actions: actions, rowIndex: originalRowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, forceInlineButtons: true, tableId: element.id, buttonLoaders: buttonLoaders }) })) }), originalRowIndex)); })] })))] }))] }))), !showEmptyState && enablePagination && (index.jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })) })));
 }
 
 exports.default = TableElement;