@feathery/react 2.15.2 → 2.16.0

package/cjs/{fthry_index.ujHj1dvo.js → fthry_index.DLwBzlAm.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.B6zj96av.js');
+var index = require('./fthry_index.CBH-w87m.js');
 var React = require('react');
 var ReactDOM = require('react-dom');
 require('react/jsx-runtime');
@@ -107,7 +107,8 @@ var searchInputStyle = {
     color: colors.gray900,
     fontSize: '14px',
     borderRadius: '8px',
-    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
+    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    boxSizing: 'border-box'
 };
 var tableStyle = {
     width: '100%',
@@ -117,8 +118,7 @@ var tableStyle = {
     color: colors.gray600,
     textIndent: 0,
     borderColor: 'inherit',
-    borderCollapse: 'collapse',
-    tableLayout: 'fixed'
+    borderCollapse: 'collapse'
 };
 var theadStyle = {
     fontSize: '14px',
@@ -255,7 +255,12 @@ function SearchIcon() {
 }
 function Search(_a) {
     var searchQuery = _a.searchQuery, onSearchChange = _a.onSearchChange;
-    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); } })] })) })));
+    var handleKeyDown = function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+        }
+    };
+    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) {
@@ -267,7 +272,8 @@ function SortHeader(_a) {
     return (index.jsx(index.Fragment, { children: columns.map(function (column, index$1) {
             var isSortable = enableSort;
             var isSorted = sortColumn === column.name;
-            return (index.jsx("th", index.__assign({ scope: 'col', onClick: function () { return isSortable && onSort(column.name); }, css: index.__assign(index.__assign(index.__assign({}, thStyle), styles.getTarget('th')), (isSortable ? { cursor: 'pointer' } : {})) }, { children: index.jsxs("div", index.__assign({ css: sortHeaderContentStyle }, { children: [index.jsx("span", { children: column.name }), isSortable && (index.jsx("span", index.__assign({ css: sortIconContainerStyle }, { children: index.jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) })))] })) }), index$1));
+            var isFirstColumn = index$1 === 0;
+            return (index.jsx("th", index.__assign({ scope: 'col', onClick: function () { return isSortable && onSort(column.name); }, css: index.__assign(index.__assign(index.__assign(index.__assign({}, thStyle), (isFirstColumn ? {} : { paddingLeft: 0 })), styles.getTarget('th')), (isSortable ? { cursor: 'pointer' } : {})) }, { children: index.jsxs("div", index.__assign({ css: sortHeaderContentStyle }, { children: [index.jsx("span", { children: column.name }), isSortable && (index.jsx("span", index.__assign({ css: sortIconContainerStyle }, { children: index.jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) })))] })) }), index$1));
         }) }));
 }
 
@@ -315,16 +321,15 @@ function MenuIcon() {
     return (index.jsxs("svg", index.__assign({ css: menuIconStyle, 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 ActionButtons(_a) {
-    var actions = _a.actions, rowIndex = _a.rowIndex, columnData = _a.columnData, onClick = _a.onClick;
+    var actions = _a.actions, rowIndex = _a.rowIndex, columnData = _a.columnData, fieldValuesProp = _a.fieldValues, onClick = _a.onClick, _b = _a.forceInlineButtons, forceInlineButtons = _b === void 0 ? false : _b;
     if (actions.length === 0)
         return null;
-    var _b = index.__read(React.useState(false), 2), isMenuOpen = _b[0], setIsMenuOpen = _b[1];
-    var _c = index.__read(React.useState({ top: 0, left: 0 }), 2), menuPosition = _c[0], setMenuPosition = _c[1];
+    var _c = index.__read(React.useState(false), 2), isMenuOpen = _c[0], setIsMenuOpen = _c[1];
+    var _d = index.__read(React.useState({ top: 0, left: 0 }), 2), menuPosition = _d[0], setMenuPosition = _d[1];
     var containerRef = React.useRef(null);
     var menuRef = React.useRef(null);
     var menuButtonRef = React.useRef(null);
-    // If more than 1 action, show overflow menu; otherwise show inline buttons
-    var useOverflow = actions.length > 1;
+    var useOverflow = !forceInlineButtons && actions.length > 1;
     React.useEffect(function () {
         var handleClickOutside = function (event) {
             if (menuRef.current &&
@@ -343,9 +348,10 @@ function ActionButtons(_a) {
     }, [isMenuOpen]);
     var handleActionClick = function (action) {
         setIsMenuOpen(false);
+        var activeFieldValues = fieldValuesProp || index.fieldValues;
         var rowData = {};
         columnData.forEach(function (col) {
-            var fValue = index.fieldValues[col.field_key];
+            var fValue = activeFieldValues[col.field_key];
             var cValue = Array.isArray(fValue) ? fValue[rowIndex] : fValue;
             rowData[col.name] = cValue;
         });
@@ -483,21 +489,95 @@ function generateExampleData(columns, numRows) {
     return exampleData;
 }
 
+/**
+ * Transpose table data: columns become rows, rows become columns
+ * Returns new columns and transposed field values
+ */
+function transposeTableData(columns, activeFieldValues, numRows, rowIndicesToInclude) {
+    var e_1, _a, e_2, _b, e_3, _c;
+    var includedRowIndices = rowIndicesToInclude || Array.from({ length: numRows }, function (_, i) { return i; });
+    var transposedColumns = [
+        {
+            name: '',
+            field_id: '_transpose_field_name',
+            field_type: 'text',
+            field_key: '_transpose_field_name'
+        }
+    ];
+    try {
+        // Add a column for each original row
+        for (var includedRowIndices_1 = index.__values(includedRowIndices), includedRowIndices_1_1 = includedRowIndices_1.next(); !includedRowIndices_1_1.done; includedRowIndices_1_1 = includedRowIndices_1.next()) {
+            var rowIdx = includedRowIndices_1_1.value;
+            transposedColumns.push({
+                name: '',
+                field_id: "_transpose_row_".concat(rowIdx),
+                field_type: 'text',
+                field_key: "_transpose_row_".concat(rowIdx),
+                originalRowIndex: rowIdx
+            });
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (includedRowIndices_1_1 && !includedRowIndices_1_1.done && (_a = includedRowIndices_1.return)) _a.call(includedRowIndices_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    var transposedFieldValues = {
+        _transpose_field_name: columns.map(function (col) { return col.name; })
+    };
+    try {
+        for (var includedRowIndices_2 = index.__values(includedRowIndices), includedRowIndices_2_1 = includedRowIndices_2.next(); !includedRowIndices_2_1.done; includedRowIndices_2_1 = includedRowIndices_2.next()) {
+            var rowIdx = includedRowIndices_2_1.value;
+            var transposedRowValues = [];
+            try {
+                for (var columns_1 = (e_3 = void 0, index.__values(columns)), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
+                    var column = columns_1_1.value;
+                    var fieldValue = activeFieldValues[column.field_key];
+                    var cellValue = Array.isArray(fieldValue)
+                        ? fieldValue[rowIdx]
+                        : fieldValue;
+                    transposedRowValues.push(cellValue);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (columns_1_1 && !columns_1_1.done && (_c = columns_1.return)) _c.call(columns_1);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            transposedFieldValues["_transpose_row_".concat(rowIdx)] = transposedRowValues;
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (includedRowIndices_2_1 && !includedRowIndices_2_1.done && (_b = includedRowIndices_2.return)) _b.call(includedRowIndices_2);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    return {
+        transposedColumns: transposedColumns,
+        transposedFieldValues: transposedFieldValues,
+        includedRowIndices: includedRowIndices
+    };
+}
 function useTableData(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var element = _a.element, _k = _a.editMode, editMode = _k === void 0 ? false : _k;
+    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 paginationSetting = (_j = (_h = element.properties) === null || _h === void 0 ? void 0 : _h.pagination) !== null && _j !== void 0 ? _j : 0;
+    var enableTranspose = (_j = (_h = element.properties) === null || _h === void 0 ? void 0 : _h.transpose) !== null && _j !== void 0 ? _j : false;
+    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;
     var enablePagination = rowsPerPage > 0;
-    // Use example columns if in edit mode and no columns provided
-    // Also ensure all columns have field_key in edit mode
-    var columns = React.useMemo(function () {
+    var baseColumns = React.useMemo(function () {
         var cols = userColumns;
         // In edit mode, replace field_key with a unique example key
         if (editMode) {
@@ -506,16 +586,112 @@ function useTableData(_a) {
         return cols;
     }, [editMode, userColumns]);
     // Use example data in edit mode
-    var activeFieldValues = React.useMemo(function () {
+    var baseFieldValues = React.useMemo(function () {
         if (editMode) {
-            return generateExampleData(columns);
+            return generateExampleData(baseColumns);
         }
         return index.fieldValues;
-    }, [editMode, columns, userColumns.length]);
-    var _l = index.__read(React.useState(''), 2), searchQuery = _l[0], setSearchQuery = _l[1];
-    var _m = index.__read(React.useState(null), 2), sortColumn = _m[0], setSortColumn = _m[1];
-    var _o = index.__read(React.useState('asc'), 2), sortDirection = _o[0], setSortDirection = _o[1];
-    var _p = index.__read(React.useState(0), 2), currentPage = _p[0], setCurrentPage = _p[1];
+    }, [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(0), 2), currentPage = _r[0], setCurrentPage = _r[1];
+    var baseNumRows = React.useMemo(function () {
+        return baseColumns.reduce(function (maxRows, column) {
+            var fieldValue = baseFieldValues[column.field_key];
+            if (Array.isArray(fieldValue)) {
+                return Math.max(maxRows, fieldValue.length);
+            }
+            return maxRows;
+        }, 0);
+    }, [baseColumns, baseFieldValues]);
+    var allBaseRowIndices = React.useMemo(function () { return Array.from({ length: baseNumRows }, function (_, i) { return i; }); }, [baseNumRows]);
+    var filteredBaseRowIndices = React.useMemo(function () {
+        if (!enableTranspose || !enableSearch || !searchQuery.trim()) {
+            return allBaseRowIndices;
+        }
+        return allBaseRowIndices.filter(function (baseRowIdx) {
+            return baseColumns.some(function (column) {
+                var _a;
+                var fieldValue = baseFieldValues[column.field_key];
+                var cellValue = Array.isArray(fieldValue)
+                    ? fieldValue[baseRowIdx]
+                    : fieldValue;
+                var stringValue = (_a = index.stringifyWithNull(cellValue)) !== null && _a !== void 0 ? _a : '';
+                return stringValue
+                    .toLowerCase()
+                    .includes(searchQuery.toLowerCase().trim());
+            });
+        });
+    }, [
+        enableTranspose,
+        allBaseRowIndices,
+        baseColumns,
+        searchQuery,
+        enableSearch,
+        baseFieldValues
+    ]);
+    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;
+        }
+        var column = baseColumns[sortedColumnIndex];
+        if (!column)
+            return filteredBaseRowIndices;
+        return index.__spreadArray([], index.__read(filteredBaseRowIndices), false).sort(function (aIdx, bIdx) {
+            var fieldValue = baseFieldValues[column.field_key];
+            var aValue = Array.isArray(fieldValue) ? fieldValue[aIdx] : fieldValue;
+            var bValue = Array.isArray(fieldValue) ? fieldValue[bIdx] : fieldValue;
+            var aParsed = parseSortableValue(aValue);
+            var bParsed = parseSortableValue(bValue);
+            var comparison = compareSortableValues(aParsed, bParsed);
+            return sortDirection === 'asc' ? comparison : -comparison;
+        });
+    }, [
+        enableTranspose,
+        filteredBaseRowIndices,
+        sortedColumnIndex,
+        sortDirection,
+        baseColumns,
+        baseFieldValues,
+        enableSort
+    ]);
+    var paginatedBaseRowIndices = React.useMemo(function () {
+        if (!enableTranspose || !enablePagination) {
+            return sortedBaseRowIndices;
+        }
+        var startIdx = currentPage * rowsPerPage;
+        var endIdx = startIdx + rowsPerPage;
+        return sortedBaseRowIndices.slice(startIdx, endIdx);
+    }, [
+        enableTranspose,
+        sortedBaseRowIndices,
+        currentPage,
+        rowsPerPage,
+        enablePagination
+    ]);
+    var _t = React.useMemo(function () {
+        if (!enableTranspose || baseNumRows === 0) {
+            return {
+                columns: baseColumns,
+                activeFieldValues: baseFieldValues,
+                transposedRowIndices: []
+            };
+        }
+        var _a = transposeTableData(baseColumns, baseFieldValues, baseNumRows, paginatedBaseRowIndices), transposedColumns = _a.transposedColumns, transposedFieldValues = _a.transposedFieldValues, includedRowIndices = _a.includedRowIndices;
+        return {
+            columns: transposedColumns,
+            activeFieldValues: transposedFieldValues,
+            transposedRowIndices: includedRowIndices
+        };
+    }, [
+        enableTranspose,
+        baseColumns,
+        baseFieldValues,
+        baseNumRows,
+        paginatedBaseRowIndices
+    ]), 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];
@@ -527,6 +703,8 @@ function useTableData(_a) {
     }, [columns, activeFieldValues]);
     var allRowIndices = React.useMemo(function () { return Array.from({ length: numRows }, function (_, i) { return i; }); }, [numRows]);
     var filteredRowIndices = React.useMemo(function () {
+        if (enableTranspose)
+            return allRowIndices; // Already filtered during transpose
         if (!enableSearch || !searchQuery.trim())
             return allRowIndices;
         return allRowIndices.filter(function (rowIndex) {
@@ -542,8 +720,17 @@ function useTableData(_a) {
                     .includes(searchQuery.toLowerCase().trim());
             });
         });
-    }, [allRowIndices, columns, searchQuery, enableSearch, activeFieldValues]);
+    }, [
+        enableTranspose,
+        allRowIndices,
+        columns,
+        searchQuery,
+        enableSearch,
+        activeFieldValues
+    ]);
     var sortedRowIndices = React.useMemo(function () {
+        if (enableTranspose)
+            return filteredRowIndices; // Already sorted during transpose
         if (!enableSort || !sortColumn)
             return filteredRowIndices;
         var column = columns.find(function (col) { return col.name === sortColumn; });
@@ -559,6 +746,7 @@ function useTableData(_a) {
             return sortDirection === 'asc' ? comparison : -comparison;
         });
     }, [
+        enableTranspose,
         filteredRowIndices,
         sortColumn,
         sortDirection,
@@ -567,19 +755,30 @@ function useTableData(_a) {
         activeFieldValues
     ]);
     var paginatedRowIndices = React.useMemo(function () {
+        if (enableTranspose)
+            return allRowIndices; // Already paginated during transpose
         if (!enablePagination)
             return sortedRowIndices;
         var startIdx = currentPage * rowsPerPage;
         var endIdx = startIdx + rowsPerPage;
         return sortedRowIndices.slice(startIdx, endIdx);
-    }, [sortedRowIndices, currentPage, rowsPerPage, enablePagination]);
+    }, [
+        enableTranspose,
+        allRowIndices,
+        sortedRowIndices,
+        currentPage,
+        rowsPerPage,
+        enablePagination
+    ]);
     // Reset to first page when search or sort changes
     React.useEffect(function () {
         setCurrentPage(0);
     }, [searchQuery, sortColumn, sortDirection]);
-    var totalPages = enablePagination
-        ? Math.ceil(sortedRowIndices.length / rowsPerPage)
-        : 1;
+    // For transposed tables, totalRows and totalPages are based on original rows (now columns)
+    var totalRows = enableTranspose
+        ? sortedBaseRowIndices.length
+        : sortedRowIndices.length;
+    var totalPages = enablePagination ? Math.ceil(totalRows / rowsPerPage) : 1;
     var handleSort = function (columnName) {
         if (!enableSort)
             return;
@@ -598,8 +797,29 @@ function useTableData(_a) {
             setSortDirection('asc');
         }
     };
+    var handleTransposedSort = function (rowIndex) {
+        if (!enableSort || !enableTranspose)
+            return;
+        if (sortedColumnIndex === rowIndex) {
+            // Cycle through: asc → desc → none
+            if (sortDirection === 'asc') {
+                setSortDirection('desc');
+            }
+            else {
+                setSortedColumnIndex(null);
+                setSortDirection('asc');
+            }
+        }
+        else {
+            setSortedColumnIndex(rowIndex);
+            setSortDirection('asc');
+        }
+    };
     var hasData = numRows > 0;
-    var hasSearchResults = filteredRowIndices.length > 0;
+    var hasSearchResults = enableTranspose
+        ? filteredBaseRowIndices.length > 0
+        : filteredRowIndices.length > 0;
+    var isTransposed = enableTranspose && baseNumRows > 0;
     return {
         enableSearch: enableSearch,
         searchQuery: searchQuery,
@@ -608,7 +828,9 @@ function useTableData(_a) {
         enableSort: enableSort,
         sortColumn: sortColumn,
         sortDirection: sortDirection,
+        sortedColumnIndex: sortedColumnIndex,
         handleSort: handleSort,
+        handleTransposedSort: handleTransposedSort,
         enablePagination: enablePagination,
         currentPage: currentPage,
         paginatedRowIndices: paginatedRowIndices,
@@ -616,10 +838,14 @@ function useTableData(_a) {
         setCurrentPage: setCurrentPage,
         columns: columns,
         actions: actions,
-        totalRows: sortedRowIndices.length,
+        isTransposed: isTransposed,
+        transposedRowIndices: transposedRowIndices,
+        totalRows: totalRows,
         totalPages: totalPages,
         hasData: hasData,
-        activeFieldValues: activeFieldValues
+        activeFieldValues: activeFieldValues,
+        baseColumns: baseColumns,
+        baseFieldValues: baseFieldValues
     };
 }
 
@@ -634,36 +860,82 @@ function TableElement(_a) {
     // search
     enableSearch = _d.enableSearch, searchQuery = _d.searchQuery, setSearchQuery = _d.setSearchQuery, 
     // sort
-    enableSort = _d.enableSort, sortColumn = _d.sortColumn, sortDirection = _d.sortDirection, handleSort = _d.handleSort, 
+    enableSort = _d.enableSort, sortColumn = _d.sortColumn, sortDirection = _d.sortDirection, sortedColumnIndex = _d.sortedColumnIndex, handleSort = _d.handleSort, handleTransposedSort = _d.handleTransposedSort, 
     // pagination
     enablePagination = _d.enablePagination, currentPage = _d.currentPage, setCurrentPage = _d.setCurrentPage, paginatedRowIndices = _d.paginatedRowIndices, rowsPerPage = _d.rowsPerPage, 
     // data
-    columns = _d.columns, actions = _d.actions, totalRows = _d.totalRows, totalPages = _d.totalPages, hasData = _d.hasData, hasSearchResults = _d.hasSearchResults, activeFieldValues = _d.activeFieldValues;
+    columns = _d.columns, actions = _d.actions, isTransposed = _d.isTransposed, transposedRowIndices = _d.transposedRowIndices, totalRows = _d.totalRows, totalPages = _d.totalPages, hasData = _d.hasData, hasSearchResults = _d.hasSearchResults, activeFieldValues = _d.activeFieldValues, baseColumns = _d.baseColumns, baseFieldValues = _d.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: [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({}, thStyle), styles.getTarget('th')) }))] }) })), index.jsx("tbody", index.__assign({ css: styles.getTarget('tbody') }, { children: paginatedRowIndices.map(function (rowIndex) {
-                                var rowData = {};
-                                columns.forEach(function (col) {
-                                    var fValue = activeFieldValues[col.field_key];
-                                    var cValue = Array.isArray(fValue)
-                                        ? fValue[rowIndex]
-                                        : fValue;
-                                    rowData[col.name] = cValue;
-                                });
-                                var handleRowClick = function () {
-                                    onClick({
-                                        rowIndex: rowIndex,
-                                        rowData: rowData
-                                    });
-                                };
-                                return (index.jsxs("tr", index.__assign({ css: index.__assign(index.__assign({}, rowStyle), styles.getTarget('tr')), onClick: handleRowClick }, { children: [columns.map(function (column, colIndex) {
-                                            var _a;
-                                            var fieldValue = activeFieldValues[column.field_key];
-                                            var cellValue = Array.isArray(fieldValue)
-                                                ? fieldValue[rowIndex]
-                                                : fieldValue;
-                                            return (index.jsx("td", index.__assign({ css: index.__assign(index.__assign({}, cellStyle), styles.getTarget('td')) }, { children: (_a = index.stringifyWithNull(cellValue)) !== null && _a !== void 0 ? _a : '' }), colIndex));
-                                        }), actions.length > 0 && (index.jsx("td", index.__assign({ css: index.__assign(index.__assign({}, cellStyle), styles.getTarget('td')) }, { children: index.jsx(ActionButtons, { actions: actions, rowIndex: rowIndex, columnData: columns, onClick: onClick }) })))] }), rowIndex));
-                            }) }))] }))), !showEmptyState && enablePagination && (index.jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })) })));
+    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) {
+                                            var fValue = activeFieldValues[col.field_key];
+                                            var cValue = Array.isArray(fValue)
+                                                ? fValue[rowIndex]
+                                                : fValue;
+                                            rowData[col.name] = cValue;
+                                        });
+                                    }
+                                    var handleRowClick = function () {
+                                        if (!isTransposed) {
+                                            onClick({
+                                                rowIndex: rowIndex,
+                                                rowData: rowData
+                                            });
+                                        }
+                                    };
+                                    return (index.jsxs("tr", index.__assign({ css: index.__assign(index.__assign({}, rowStyle), styles.getTarget('tr')), onClick: handleRowClick }, { children: [columns.map(function (column, colIndex) {
+                                                var _a, _b;
+                                                var fieldValue = activeFieldValues[column.field_key];
+                                                var cellValue = Array.isArray(fieldValue)
+                                                    ? fieldValue[rowIndex]
+                                                    : fieldValue;
+                                                var isFirstColInTranspose = isTransposed && colIndex === 0;
+                                                var isSortable = isFirstColInTranspose && enableSort;
+                                                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;
+                                                var cellCss = isFirstColInTranspose
+                                                    ? index.__assign(index.__assign(index.__assign(index.__assign({}, thStyle), { backgroundColor: '#f9fafb', borderRight: '1px solid #e5e7eb', width: '1px', whiteSpace: 'nowrap' }), styles.getTarget('th')), (isSortable ? { cursor: 'pointer' } : {})) : index.__assign(index.__assign(index.__assign(index.__assign({}, cellStyle), (isTransposed
+                                                    ? isSecondColumn
+                                                        ? {}
+                                                        : { paddingLeft: 0 }
+                                                    : isFirstColumn
+                                                        ? {}
+                                                        : { paddingLeft: 0 })), (isTransposed && !isFirstColInTranspose
+                                                    ? { cursor: 'pointer' }
+                                                    : {})), styles.getTarget('td'));
+                                                var CellElement = isFirstColInTranspose ? 'th' : 'td';
+                                                var handleCellClick = function (e) {
+                                                    if (isSortable) {
+                                                        handleTransposedSort(rowIndex);
+                                                    }
+                                                    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) {
+                                                            var fValue = baseFieldValues[col.field_key];
+                                                            var cValue = Array.isArray(fValue)
+                                                                ? fValue[originalRowIndex]
+                                                                : fValue;
+                                                            originalRowData_1[col.name] = cValue;
+                                                        });
+                                                        onClick({
+                                                            rowIndex: originalRowIndex,
+                                                            rowData: originalRowData_1
+                                                        });
+                                                    }
+                                                };
+                                                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 }) })))] }), 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 }) })) }), originalRowIndex)); })] })))] }))] }))), !showEmptyState && enablePagination && (index.jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })) })));
 }
 
 exports.default = TableElement;

package/cjs/{fthry_index.DpwSZaXh.js → fthry_index.DOiXixKa.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.B6zj96av.js');
+var index = require('./fthry_index.CBH-w87m.js');
 var React = require('react');
 require('react/jsx-runtime');
 require('react-dom/client');

package/cjs/{fthry_index.EU1uftki.js → fthry_index.DmsSGjy7.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index$1 = require('./fthry_index.B6zj96av.js');
+var index$1 = require('./fthry_index.CBH-w87m.js');
 var React = require('react');
-var Placeholder = require('./fthry_Placeholder.eggaVDQj.js');
-var InlineTooltip = require('./fthry_InlineTooltip.BLxhhDuP.js');
-var Overlay = require('./fthry_Overlay.DX647lyL.js');
-var useElementSize = require('./fthry_useElementSize.B6qHp4zN.js');
+var Placeholder = require('./fthry_Placeholder.BQbbxB6F.js');
+var InlineTooltip = require('./fthry_InlineTooltip.DzUT7zk0.js');
+var Overlay = require('./fthry_Overlay.BpmW4YfX.js');
+var useElementSize = require('./fthry_useElementSize.BFoAW8dM.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');

package/cjs/{fthry_index.CRDnACxw.js → fthry_index.YRUJ420g.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./fthry_index.B6zj96av.js');
+var index = require('./fthry_index.CBH-w87m.js');
 var React = require('react');
-var InlineTooltip = require('./fthry_InlineTooltip.BLxhhDuP.js');
-var useSalesforceSync = require('./fthry_useSalesforceSync.DP3b2FKu.js');
+var InlineTooltip = require('./fthry_InlineTooltip.DzUT7zk0.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.CGHmB1Kd.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_Overlay.DX647lyL.js');
+require('./fthry_Overlay.BpmW4YfX.js');
 
 var ae = [
     { name: 'Abu Dhabi', code: 'AZ' },

package/cjs/{fthry_index.DB4KHK9K.js → fthry_index.cplrWgvC.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-var index$1 = require('./fthry_index.B6zj96av.js');
+var index$1 = require('./fthry_index.CBH-w87m.js');
 var React = require('react');
-var Placeholder = require('./fthry_Placeholder.eggaVDQj.js');
-var InlineTooltip = require('./fthry_InlineTooltip.BLxhhDuP.js');
-var ShowEyeIcon = require('./fthry_ShowEyeIcon.CUX7pJin.js');
+var Placeholder = require('./fthry_Placeholder.BQbbxB6F.js');
+var InlineTooltip = require('./fthry_InlineTooltip.DzUT7zk0.js');
+var ShowEyeIcon = require('./fthry_ShowEyeIcon.hB_ow6JC.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_Overlay.DX647lyL.js');
+require('./fthry_Overlay.BpmW4YfX.js');
 
 function PasswordField(_a) {
     var _b;

package/cjs/{fthry_index.BDTST35w.js → fthry_index.lqNJzzej.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.B6zj96av.js');
+var index = require('./fthry_index.CBH-w87m.js');
 var React = require('react');
 require('react/jsx-runtime');
 require('react-dom/client');