@trackunit/react-table 1.14.16 → 1.14.18-alpha-ae1ff73fc64.0

package/index.cjs.js

@@ -475,7 +475,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
     const resetColumnState = react.useCallback(() => {
         const sizes = {};
         columns.forEach(column => {
-            if (column.columnDef.size) {
+            if (column.columnDef.size !== undefined) {
                 sizes[column.id] = column.columnDef.size;
             }
             if (column.columnDef.meta?.hiddenByDefault === true && column.getIsVisible()) {
@@ -543,7 +543,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSort
     return (jsxRuntime.jsx("div", { className: "flex max-h-full max-w-[400px] flex-col overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns.map((column, index) => {
             const { columnDef } = column;
             if (!columnDef.meta?.columnFilterLabel &&
-                (!columnDef.header || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
+                (columnDef.header === undefined || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
                 return null;
             }
             const isVisible = column.getIsVisible();
@@ -568,8 +568,10 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSort
 const Sorting = ({ columns, }) => {
     const [t] = useTranslation();
     const sortableColumns = columns.filter(column => column.getCanSort());
-    const currentSortValue = sortableColumns.find(column => column.getIsSorted())?.id;
-    const currentSortDirection = sortableColumns.find(column => column.getIsSorted())?.getIsSorted() || "desc";
+    const sortedColumn = sortableColumns.find(column => column.getIsSorted() !== false);
+    const currentSortValue = sortedColumn?.id;
+    const sortDirection = sortedColumn?.getIsSorted();
+    const currentSortDirection = sortDirection === "asc" || sortDirection === "desc" ? sortDirection : "desc";
     if (sortableColumns.length === 0) {
         return null;
     }
@@ -972,8 +974,8 @@ const ColumnActions = ({ header, visibleColumnsCount, setSorting, getColumn }) =
     const sortByKey = header.column.columnDef.meta?.sortByKey;
     const sortByColumn = react.useMemo(() => (sortByKey ? getColumn(sortByKey) : undefined), [sortByKey, getColumn]);
     const isSortedByKey = sortByKey ? sortByColumn?.getIsSorted() : undefined;
-    const showSortAscending = canSort && (sortByKey ? isSortedByKey === "desc" || !isSortedByKey : isSorted === "desc" || !isSorted);
-    const showSortDescending = canSort && (sortByKey ? isSortedByKey === "asc" || !isSortedByKey : isSorted === "asc" || !isSorted);
+    const showSortAscending = canSort && (sortByKey ? isSortedByKey !== "asc" : isSorted !== "asc");
+    const showSortDescending = canSort && (sortByKey ? isSortedByKey !== "desc" : isSorted !== "desc");
     const showClearSorting = canSort && (sortByKey ? isSortedByKey : isSorted);
     const handleSortAscending = react.useCallback(() => {
         if (sortByKey) {
@@ -999,10 +1001,10 @@ const ColumnActions = ({ header, visibleColumnsCount, setSorting, getColumn }) =
     if (!isAnyActionAvailable) {
         return null;
     }
-    return (jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.IconButton, { className: "h-8 w-5 p-0", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "EllipsisVertical", size: "small" }), onClick: event => event.stopPropagation(), variant: "ghost-neutral" }), children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { children: [showSortAscending ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.sortAscending"), onClick: handleSortAscending, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowUp", size: "medium" }) })) : null, showSortDescending ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.sortDescending"), onClick: handleSortDescending, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowDown", size: "medium" }) })) : null, showClearSorting ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.clearSorting"), onClick: handleClearSorting, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowsUpDown", size: "medium" }) })) : null, showHideColumn ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.hideColumn"), onClick: () => header.column.toggleVisibility(false), prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "EyeSlash", size: "medium" }) })) : null, canPin ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t(isPinned ? "table.columnActions.unPinColumn" : "table.columnActions.pinColumn"), onClick: () => {
-                        header.column.pin(isPinned ? false : "left");
+    return (jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.IconButton, { className: "h-8 w-5 p-0", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "EllipsisVertical", size: "small" }), onClick: event => event.stopPropagation(), variant: "ghost-neutral" }), children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { children: [showSortAscending ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.sortAscending"), onClick: handleSortAscending, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowUp", size: "medium" }) })) : null, showSortDescending ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.sortDescending"), onClick: handleSortDescending, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowDown", size: "medium" }) })) : null, showClearSorting !== false && showClearSorting !== undefined ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.clearSorting"), onClick: handleClearSorting, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowsUpDown", size: "medium" }) })) : null, showHideColumn ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.hideColumn"), onClick: () => header.column.toggleVisibility(false), prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "EyeSlash", size: "medium" }) })) : null, canPin ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t(isPinned !== false ? "table.columnActions.unPinColumn" : "table.columnActions.pinColumn"), onClick: () => {
+                        header.column.pin(isPinned !== false ? false : "left");
                         close();
-                    }, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: isPinned ? "Unpin" : "Pin", size: "medium" }) })) : null] })) }));
+                    }, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: isPinned !== false ? "Unpin" : "Pin", size: "medium" }) })) : null] })) }));
 };
 
 /**
@@ -1018,7 +1020,7 @@ const ColumnActions = ({ header, visibleColumnsCount, setSorting, getColumn }) =
  * @returns {ReactElement | null} A React element representing the sorting indicator.
  */
 const ColumnSorting = ({ canSort, sortingState = false }) => {
-    if (!canSort || !sortingState) {
+    if (!canSort || sortingState === false) {
         return null;
     }
     return (jsxRuntime.jsx("div", { className: "flex items-center", children: jsxRuntime.jsx(reactComponents.Icon, { className: "text-neutral-800", name: sortingState === "asc" ? "ArrowUp" : "ArrowDown", size: "small" }) }));
@@ -1192,7 +1194,12 @@ const Table = ({ rowHeight = 50, ...props }) => {
             header.column.getToggleSortingHandler()?.(event);
         }
     }, [props]);
-    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, props.subHeaderActions, jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", !props.subHeaderActions && (props.headerLeftActions || props.headerRightActions) ? "border-t" : ""), ref: tableScrollElementRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
+    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [(props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
+                (props.headerRightActions !== undefined && props.headerRightActions !== null) ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, props.subHeaderActions, jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", (props.subHeaderActions === undefined || props.subHeaderActions === null) &&
+                    ((props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
+                        (props.headerRightActions !== undefined && props.headerRightActions !== null))
+                    ? "border-t"
+                    : ""), ref: tableScrollElementRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
@@ -1216,11 +1223,13 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                             renderDropIndicator(header.id),
                                             header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { ...getDragHandleProps(header.id, header.isPlaceholder, pinned), className: tailwindMerge.twMerge(cvaColumnHeaderContainer({
                                                     sortable: canSort,
-                                                })), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 items-center truncate", onClick: event => handleColumnClick(event, header), children: [header.column.columnDef.header || header.column.columnDef.meta?.subHeader ? (jsxRuntime.jsxs("span", { className: "subtle min-w-0 text-xs", children: [jsxRuntime.jsx(TextWithTooltip, { tooltipLabel: tooltipLabel, weight: "bold", children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }), header.column.columnDef.meta?.subHeader
+                                                })), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 items-center truncate", onClick: event => handleColumnClick(event, header), children: [header.column.columnDef.header !== undefined ||
+                                                                header.column.columnDef.meta?.subHeader !== undefined ? (jsxRuntime.jsxs("span", { className: "subtle min-w-0 text-xs", children: [jsxRuntime.jsx(TextWithTooltip, { tooltipLabel: tooltipLabel, weight: "bold", children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }), header.column.columnDef.meta?.subHeader
                                                                         ? header.column.columnDef.meta.subHeader
                                                                         : null] })) : null, jsxRuntime.jsx(ColumnSorting, { canSort: canSort, sortingState: header.column.columnDef.meta?.sortByKey
                                                                     ? props.getColumn(header.column.columnDef.meta.sortByKey)?.getIsSorted()
-                                                                    : header.column.getIsSorted() })] }), jsxRuntime.jsxs("div", { className: "flex flex-none items-center", children: [props.renderFilterButton && header.column.columnDef.meta?.filterName
+                                                                    : header.column.getIsSorted() })] }), jsxRuntime.jsxs("div", { className: "flex flex-none items-center", children: [props.renderFilterButton !== undefined &&
+                                                                header.column.columnDef.meta?.filterName !== undefined
                                                                 ? props.renderFilterButton(header.column.columnDef.meta.filterName)
                                                                 : null, jsxRuntime.jsx(ColumnActions, { getColumn: props.getColumn, header: header, setSorting: props.setSorting, visibleColumnsCount: visibleColumnsCount })] })] })),
                                             !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null));
@@ -1280,7 +1289,9 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                                 jsxRuntime.jsx("div", { className: "grid h-full items-center p-0", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) })));
                                         }) }, `${row.id}-${index}`));
                                 }
-                            }) })) : (jsxRuntime.jsx("tbody", { className: cvaTBody({ emptyState: !props.loading && !props.noDataMessage }), children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: props.loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0", "data-testid": "table-loading-spinner" })) : props.noDataMessage ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), props.hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", "data-testid": "table-footer", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: props.pagination?.pageInfo?.count
+                            }) })) : (jsxRuntime.jsx("tbody", { className: cvaTBody({
+                                emptyState: !props.loading && (props.noDataMessage === undefined || props.noDataMessage === ""),
+                            }), children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: props.loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0", "data-testid": "table-loading-spinner" })) : props.noDataMessage !== undefined && props.noDataMessage !== "" ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), props.hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", "data-testid": "table-footer", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: props.pagination?.pageInfo?.count !== undefined
                             ? t(props.pagination.pageInfo.isCountCapped ? "table.pagination.full.capped" : "table.pagination.full", {
                                 count: props.getRowModel().rows.length,
                                 total: props.pagination.pageInfo.count,
@@ -1288,7 +1299,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
                             : t(props.pagination?.pageInfo?.hasNextPage ? "table.pagination.full.capped" : "table.pagination.full", {
                                 count: props.getRowModel().rows.length,
                                 total: props.getRowModel().rows.length,
-                            }) }), props.pagination?.isLoading ? (jsxRuntime.jsx("span", { className: "ml-2", children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));
+                            }) }), props.pagination?.isLoading ? (jsxRuntime.jsx("span", { className: "ml-2", children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, props.footerRightActions !== undefined && props.footerRightActions !== null ? (jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })) : null] }))] }));
 };
 const cvaTBody = cssClassVarianceUtilities.cvaMerge(["min-h-[40dvh]"], {
     variants: {
@@ -1445,12 +1456,14 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
         }
     }, [initialState, updatedInitialColumnOrder, stableUpdatedInitialColumnPinning, updatedInitialColumnVisibility]);
     react.useEffect(() => {
-        const mergedLeft = initialState?.columnPinning?.left?.length
-            ? [...initialState.columnPinning.left]
-            : [...(stableUpdatedInitialColumnPinning.left || [])];
-        const mergedRight = initialState?.columnPinning?.right?.length
-            ? [...initialState.columnPinning.right]
-            : [...(stableUpdatedInitialColumnPinning.right || [])];
+        const leftPinning = initialState?.columnPinning?.left;
+        const mergedLeft = leftPinning !== undefined && leftPinning.length > 0
+            ? [...leftPinning]
+            : [...(stableUpdatedInitialColumnPinning.left ?? [])];
+        const rightPinning = initialState?.columnPinning?.right;
+        const mergedRight = rightPinning !== undefined && rightPinning.length > 0
+            ? [...rightPinning]
+            : [...(stableUpdatedInitialColumnPinning.right ?? [])];
         const filteredRight = mergedRight.filter(column => !mergedLeft.includes(column));
         const mergedPinningState = {
             left: mergedLeft,
@@ -1583,7 +1596,7 @@ const useTableSelection = ({ data, idKey, defaultSelectedIds, enableRowSelection
             if (!hasRowSelection) {
                 return null;
             }
-            const isRowSelectionDisabled = !table.options.enableRowSelection || !data.length;
+            const isRowSelectionDisabled = table.options.enableRowSelection === false || table.options.enableRowSelection === undefined || data.length === 0;
             return (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "flex justify-center",
                 checked: table.getIsAllRowsSelected(),
                 indeterminate: table.getIsSomeRowsSelected(),

package/index.esm.js

@@ -474,7 +474,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
     const resetColumnState = useCallback(() => {
         const sizes = {};
         columns.forEach(column => {
-            if (column.columnDef.size) {
+            if (column.columnDef.size !== undefined) {
                 sizes[column.id] = column.columnDef.size;
             }
             if (column.columnDef.meta?.hiddenByDefault === true && column.getIsVisible()) {
@@ -542,7 +542,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSort
     return (jsx("div", { className: "flex max-h-full max-w-[400px] flex-col overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns.map((column, index) => {
             const { columnDef } = column;
             if (!columnDef.meta?.columnFilterLabel &&
-                (!columnDef.header || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
+                (columnDef.header === undefined || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
                 return null;
             }
             const isVisible = column.getIsVisible();
@@ -567,8 +567,10 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSort
 const Sorting = ({ columns, }) => {
     const [t] = useTranslation();
     const sortableColumns = columns.filter(column => column.getCanSort());
-    const currentSortValue = sortableColumns.find(column => column.getIsSorted())?.id;
-    const currentSortDirection = sortableColumns.find(column => column.getIsSorted())?.getIsSorted() || "desc";
+    const sortedColumn = sortableColumns.find(column => column.getIsSorted() !== false);
+    const currentSortValue = sortedColumn?.id;
+    const sortDirection = sortedColumn?.getIsSorted();
+    const currentSortDirection = sortDirection === "asc" || sortDirection === "desc" ? sortDirection : "desc";
     if (sortableColumns.length === 0) {
         return null;
     }
@@ -971,8 +973,8 @@ const ColumnActions = ({ header, visibleColumnsCount, setSorting, getColumn }) =
     const sortByKey = header.column.columnDef.meta?.sortByKey;
     const sortByColumn = useMemo(() => (sortByKey ? getColumn(sortByKey) : undefined), [sortByKey, getColumn]);
     const isSortedByKey = sortByKey ? sortByColumn?.getIsSorted() : undefined;
-    const showSortAscending = canSort && (sortByKey ? isSortedByKey === "desc" || !isSortedByKey : isSorted === "desc" || !isSorted);
-    const showSortDescending = canSort && (sortByKey ? isSortedByKey === "asc" || !isSortedByKey : isSorted === "asc" || !isSorted);
+    const showSortAscending = canSort && (sortByKey ? isSortedByKey !== "asc" : isSorted !== "asc");
+    const showSortDescending = canSort && (sortByKey ? isSortedByKey !== "desc" : isSorted !== "desc");
     const showClearSorting = canSort && (sortByKey ? isSortedByKey : isSorted);
     const handleSortAscending = useCallback(() => {
         if (sortByKey) {
@@ -998,10 +1000,10 @@ const ColumnActions = ({ header, visibleColumnsCount, setSorting, getColumn }) =
     if (!isAnyActionAvailable) {
         return null;
     }
-    return (jsx(MoreMenu, { customButton: jsx(IconButton, { className: "h-8 w-5 p-0", icon: jsx(Icon, { name: "EllipsisVertical", size: "small" }), onClick: event => event.stopPropagation(), variant: "ghost-neutral" }), children: close => (jsxs(MenuList, { children: [showSortAscending ? (jsx(MenuItem, { label: t("table.columnActions.sortAscending"), onClick: handleSortAscending, prefix: jsx(Icon, { name: "ArrowUp", size: "medium" }) })) : null, showSortDescending ? (jsx(MenuItem, { label: t("table.columnActions.sortDescending"), onClick: handleSortDescending, prefix: jsx(Icon, { name: "ArrowDown", size: "medium" }) })) : null, showClearSorting ? (jsx(MenuItem, { label: t("table.columnActions.clearSorting"), onClick: handleClearSorting, prefix: jsx(Icon, { name: "ArrowsUpDown", size: "medium" }) })) : null, showHideColumn ? (jsx(MenuItem, { label: t("table.columnActions.hideColumn"), onClick: () => header.column.toggleVisibility(false), prefix: jsx(Icon, { name: "EyeSlash", size: "medium" }) })) : null, canPin ? (jsx(MenuItem, { label: t(isPinned ? "table.columnActions.unPinColumn" : "table.columnActions.pinColumn"), onClick: () => {
-                        header.column.pin(isPinned ? false : "left");
+    return (jsx(MoreMenu, { customButton: jsx(IconButton, { className: "h-8 w-5 p-0", icon: jsx(Icon, { name: "EllipsisVertical", size: "small" }), onClick: event => event.stopPropagation(), variant: "ghost-neutral" }), children: close => (jsxs(MenuList, { children: [showSortAscending ? (jsx(MenuItem, { label: t("table.columnActions.sortAscending"), onClick: handleSortAscending, prefix: jsx(Icon, { name: "ArrowUp", size: "medium" }) })) : null, showSortDescending ? (jsx(MenuItem, { label: t("table.columnActions.sortDescending"), onClick: handleSortDescending, prefix: jsx(Icon, { name: "ArrowDown", size: "medium" }) })) : null, showClearSorting !== false && showClearSorting !== undefined ? (jsx(MenuItem, { label: t("table.columnActions.clearSorting"), onClick: handleClearSorting, prefix: jsx(Icon, { name: "ArrowsUpDown", size: "medium" }) })) : null, showHideColumn ? (jsx(MenuItem, { label: t("table.columnActions.hideColumn"), onClick: () => header.column.toggleVisibility(false), prefix: jsx(Icon, { name: "EyeSlash", size: "medium" }) })) : null, canPin ? (jsx(MenuItem, { label: t(isPinned !== false ? "table.columnActions.unPinColumn" : "table.columnActions.pinColumn"), onClick: () => {
+                        header.column.pin(isPinned !== false ? false : "left");
                         close();
-                    }, prefix: jsx(Icon, { name: isPinned ? "Unpin" : "Pin", size: "medium" }) })) : null] })) }));
+                    }, prefix: jsx(Icon, { name: isPinned !== false ? "Unpin" : "Pin", size: "medium" }) })) : null] })) }));
 };
 
 /**
@@ -1017,7 +1019,7 @@ const ColumnActions = ({ header, visibleColumnsCount, setSorting, getColumn }) =
  * @returns {ReactElement | null} A React element representing the sorting indicator.
  */
 const ColumnSorting = ({ canSort, sortingState = false }) => {
-    if (!canSort || !sortingState) {
+    if (!canSort || sortingState === false) {
         return null;
     }
     return (jsx("div", { className: "flex items-center", children: jsx(Icon, { className: "text-neutral-800", name: sortingState === "asc" ? "ArrowUp" : "ArrowDown", size: "small" }) }));
@@ -1191,7 +1193,12 @@ const Table = ({ rowHeight = 50, ...props }) => {
             header.column.getToggleSortingHandler()?.(event);
         }
     }, [props]);
-    return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, props.subHeaderActions, jsx("div", { className: twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", !props.subHeaderActions && (props.headerLeftActions || props.headerRightActions) ? "border-t" : ""), ref: tableScrollElementRef, children: jsxs(TableRoot, { style: {
+    return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [(props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
+                (props.headerRightActions !== undefined && props.headerRightActions !== null) ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, props.subHeaderActions, jsx("div", { className: twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", (props.subHeaderActions === undefined || props.subHeaderActions === null) &&
+                    ((props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
+                        (props.headerRightActions !== undefined && props.headerRightActions !== null))
+                    ? "border-t"
+                    : ""), ref: tableScrollElementRef, children: jsxs(TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
@@ -1215,11 +1222,13 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                             renderDropIndicator(header.id),
                                             header.isPlaceholder ? null : (jsxs("div", { ...getDragHandleProps(header.id, header.isPlaceholder, pinned), className: twMerge(cvaColumnHeaderContainer({
                                                     sortable: canSort,
-                                                })), children: [jsxs("div", { className: "flex flex-1 items-center truncate", onClick: event => handleColumnClick(event, header), children: [header.column.columnDef.header || header.column.columnDef.meta?.subHeader ? (jsxs("span", { className: "subtle min-w-0 text-xs", children: [jsx(TextWithTooltip, { tooltipLabel: tooltipLabel, weight: "bold", children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.columnDef.meta?.subHeader
+                                                })), children: [jsxs("div", { className: "flex flex-1 items-center truncate", onClick: event => handleColumnClick(event, header), children: [header.column.columnDef.header !== undefined ||
+                                                                header.column.columnDef.meta?.subHeader !== undefined ? (jsxs("span", { className: "subtle min-w-0 text-xs", children: [jsx(TextWithTooltip, { tooltipLabel: tooltipLabel, weight: "bold", children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.columnDef.meta?.subHeader
                                                                         ? header.column.columnDef.meta.subHeader
                                                                         : null] })) : null, jsx(ColumnSorting, { canSort: canSort, sortingState: header.column.columnDef.meta?.sortByKey
                                                                     ? props.getColumn(header.column.columnDef.meta.sortByKey)?.getIsSorted()
-                                                                    : header.column.getIsSorted() })] }), jsxs("div", { className: "flex flex-none items-center", children: [props.renderFilterButton && header.column.columnDef.meta?.filterName
+                                                                    : header.column.getIsSorted() })] }), jsxs("div", { className: "flex flex-none items-center", children: [props.renderFilterButton !== undefined &&
+                                                                header.column.columnDef.meta?.filterName !== undefined
                                                                 ? props.renderFilterButton(header.column.columnDef.meta.filterName)
                                                                 : null, jsx(ColumnActions, { getColumn: props.getColumn, header: header, setSorting: props.setSorting, visibleColumnsCount: visibleColumnsCount })] })] })),
                                             !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null));
@@ -1279,7 +1288,9 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                                 jsx("div", { className: "grid h-full items-center p-0", children: flexRender(cell.column.columnDef.cell, cell.getContext()) })));
                                         }) }, `${row.id}-${index}`));
                                 }
-                            }) })) : (jsx("tbody", { className: cvaTBody({ emptyState: !props.loading && !props.noDataMessage }), children: jsx("tr", { children: jsx("td", { className: "b-0", children: props.loading ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0", "data-testid": "table-loading-spinner" })) : props.noDataMessage ? (props.noDataMessage) : (jsx(EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), props.hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", "data-testid": "table-footer", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: props.pagination?.pageInfo?.count
+                            }) })) : (jsx("tbody", { className: cvaTBody({
+                                emptyState: !props.loading && (props.noDataMessage === undefined || props.noDataMessage === ""),
+                            }), children: jsx("tr", { children: jsx("td", { className: "b-0", children: props.loading ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0", "data-testid": "table-loading-spinner" })) : props.noDataMessage !== undefined && props.noDataMessage !== "" ? (props.noDataMessage) : (jsx(EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), props.hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", "data-testid": "table-footer", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: props.pagination?.pageInfo?.count !== undefined
                             ? t(props.pagination.pageInfo.isCountCapped ? "table.pagination.full.capped" : "table.pagination.full", {
                                 count: props.getRowModel().rows.length,
                                 total: props.pagination.pageInfo.count,
@@ -1287,7 +1298,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
                             : t(props.pagination?.pageInfo?.hasNextPage ? "table.pagination.full.capped" : "table.pagination.full", {
                                 count: props.getRowModel().rows.length,
                                 total: props.getRowModel().rows.length,
-                            }) }), props.pagination?.isLoading ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));
+                            }) }), props.pagination?.isLoading ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions !== undefined && props.footerRightActions !== null ? (jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })) : null] }))] }));
 };
 const cvaTBody = cvaMerge(["min-h-[40dvh]"], {
     variants: {
@@ -1444,12 +1455,14 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
         }
     }, [initialState, updatedInitialColumnOrder, stableUpdatedInitialColumnPinning, updatedInitialColumnVisibility]);
     useEffect(() => {
-        const mergedLeft = initialState?.columnPinning?.left?.length
-            ? [...initialState.columnPinning.left]
-            : [...(stableUpdatedInitialColumnPinning.left || [])];
-        const mergedRight = initialState?.columnPinning?.right?.length
-            ? [...initialState.columnPinning.right]
-            : [...(stableUpdatedInitialColumnPinning.right || [])];
+        const leftPinning = initialState?.columnPinning?.left;
+        const mergedLeft = leftPinning !== undefined && leftPinning.length > 0
+            ? [...leftPinning]
+            : [...(stableUpdatedInitialColumnPinning.left ?? [])];
+        const rightPinning = initialState?.columnPinning?.right;
+        const mergedRight = rightPinning !== undefined && rightPinning.length > 0
+            ? [...rightPinning]
+            : [...(stableUpdatedInitialColumnPinning.right ?? [])];
         const filteredRight = mergedRight.filter(column => !mergedLeft.includes(column));
         const mergedPinningState = {
             left: mergedLeft,
@@ -1582,7 +1595,7 @@ const useTableSelection = ({ data, idKey, defaultSelectedIds, enableRowSelection
             if (!hasRowSelection) {
                 return null;
             }
-            const isRowSelectionDisabled = !table.options.enableRowSelection || !data.length;
+            const isRowSelectionDisabled = table.options.enableRowSelection === false || table.options.enableRowSelection === undefined || data.length === 0;
             return (jsx(Checkbox, { className: "flex justify-center",
                 checked: table.getIsAllRowsSelected(),
                 indeterminate: table.getIsSomeRowsSelected(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.14.16",
+  "version": "1.14.18-alpha-ae1ff73fc64.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,14 +14,14 @@
     "react-dnd-html5-backend": "16.0.1",
     "@tanstack/react-router": "1.114.29",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.18.9",
-    "@trackunit/shared-utils": "1.13.68",
-    "@trackunit/css-class-variance-utilities": "1.11.68",
-    "@trackunit/ui-icons": "1.11.66",
-    "@trackunit/react-table-base-components": "1.14.9",
-    "@trackunit/react-form-components": "1.15.9",
-    "@trackunit/i18n-library-translation": "1.12.59",
-    "@trackunit/iris-app-runtime-core-api": "1.12.51",
+    "@trackunit/react-components": "1.18.10-alpha-ae1ff73fc64.0",
+    "@trackunit/shared-utils": "1.13.69-alpha-ae1ff73fc64.0",
+    "@trackunit/css-class-variance-utilities": "1.11.69-alpha-ae1ff73fc64.0",
+    "@trackunit/ui-icons": "1.11.67-alpha-ae1ff73fc64.0",
+    "@trackunit/react-table-base-components": "1.14.10-alpha-ae1ff73fc64.0",
+    "@trackunit/react-form-components": "1.15.10-alpha-ae1ff73fc64.0",
+    "@trackunit/i18n-library-translation": "1.12.60-alpha-ae1ff73fc64.0",
+    "@trackunit/iris-app-runtime-core-api": "1.12.52-alpha-ae1ff73fc64.0",
     "graphql": "^16.10.0"
   },
   "module": "./index.esm.js",

package/src/ActionSheet/ActionSheet.variants.d.ts

@@ -1,8 +1,8 @@
-export declare const cvaActionSheet: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaDivider: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaActionSheet: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaDivider: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaActionContainerAndOverflow: (props?: ({
     isDropdown?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaMoreContainer: (props?: ({
     isDropdown?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/menus/ColumnFIlter.variants.d.ts

@@ -1,3 +1,3 @@
 export declare const cvaColumnFilterGrabbable: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;