@trackunit/react-table 0.0.4 → 0.0.6

package/index.cjs.js

@@ -8950,37 +8950,41 @@ const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "it
  * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
-const ColumnFilter = ({ columns, setColumnOrder, onUserEvent, }) => {
+const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }) => {
     var _a;
     const [t] = useTranslation();
     const numberOfHiddenColumns = (_a = columns === null || columns === void 0 ? void 0 : columns.filter(column => !column.getIsVisible())) === null || _a === void 0 ? void 0 : _a.length;
-    const resetHiddenColumns = React__namespace.useCallback((closePopover) => {
-        columns === null || columns === void 0 ? void 0 : columns.forEach(column => column.toggleVisibility(true));
-        setColumnOrder([]);
-        closePopover === null || closePopover === void 0 ? void 0 : closePopover();
-    }, [columns, setColumnOrder]);
+    const resetHiddenColumns = React__namespace.useCallback(() => {
+        columns === null || columns === void 0 ? void 0 : columns.forEach(column => { var _a, _b; return column.toggleVisibility((_b = !((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)) !== null && _b !== void 0 ? _b : true); });
+        setColumnOrder(defaultColumnOrder || []);
+    }, [columns, defaultColumnOrder, setColumnOrder]);
+    const sortedColumns = React.useMemo(() => {
+        const result = columnOrder && ((columnOrder === null || columnOrder === void 0 ? void 0 : columnOrder.length) || 0) > 0
+            ? columns === null || columns === void 0 ? void 0 : columns.sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
+            : columns;
+        return result;
+    }, [columnOrder, columns]);
     if (!columns) {
         return null;
     }
     return (jsxRuntime.jsx(DndProvider, { backend: HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom-start", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ViewColumnsIcon", size: "small" }), color: "secondary", variant: "transparent", size: "small", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: numberOfHiddenColumns > 0
                                     ? t("table.columnFilters.hiddenColumnCount", { count: numberOfHiddenColumns })
-                                    : t("table.columnFilters.columns") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsxRuntime.jsx(reactComponents.Text, { subtle: true, size: "small", children: t("table.columnFilters.title") }), jsxRuntime.jsx(reactComponents.Button, { className: "p-0", color: "secondary", variant: "transparent", size: "small", onClick: () => resetHiddenColumns(close), children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: columns, setColumnOrder: setColumnOrder, onUserEvent: onUserEvent })] })) })] }) }) }));
+                                    : t("table.columnFilters.columns") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "max-h-[55vh] w-72 overflow-y-auto relative pr-4", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsxRuntime.jsx(reactComponents.Text, { subtle: true, size: "small", children: t("table.columnFilters.title") }), jsxRuntime.jsx(reactComponents.Button, { className: "p-0", color: "secondary", variant: "transparent", size: "small", onClick: () => resetHiddenColumns(), children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, setColumnOrder: setColumnOrder, onUserEvent: onUserEvent })] })) })] }) }) }));
 };
 const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
     const [localColumns, setLocalColumns] = React__namespace.useState(columns);
-    const debouncedColumns = reactComponents.useDebounce(localColumns, 300);
     React__namespace.useEffect(() => {
-        if (columns !== localColumns) {
-            setColumnOrder(debouncedColumns.map(column => column.id));
-        }
-    }, [debouncedColumns, setColumnOrder, localColumns, columns]);
+        setLocalColumns(columns);
+    }, [columns]);
+    const onColumDrop = React__namespace.useCallback(() => {
+        setColumnOrder(localColumns.map(column => column.id));
+    }, [localColumns, setColumnOrder]);
+    const onCancelColumDrop = React__namespace.useCallback(() => {
+        setLocalColumns(columns);
+    }, [columns]);
     const moveColumn = React__namespace.useCallback((dragIndex, hoverIndex) => {
-        var _a, _b, _c;
+        var _a;
         const dragColumn = localColumns[dragIndex];
-        const hoveredColumn = localColumns[hoverIndex];
-        if ((_b = (_a = hoveredColumn.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.required) {
-            return;
-        }
         setLocalColumns(update(localColumns, {
             $splice: [
                 [dragIndex, 1],
@@ -8988,7 +8992,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
             ],
         }));
         onUserEvent === null || onUserEvent === void 0 ? void 0 : onUserEvent("Column Reordering", {
-            columnReordered: (_c = dragColumn === null || dragColumn === void 0 ? void 0 : dragColumn.columnDef.header) !== null && _c !== void 0 ? _c : "",
+            columnReordered: (_a = dragColumn === null || dragColumn === void 0 ? void 0 : dragColumn.columnDef.header) !== null && _a !== void 0 ? _a : "",
         });
     }, [localColumns, onUserEvent]);
     return (jsxRuntime.jsx("div", { className: "flex flex-col gap-2 max-h-full max-w-[400px] overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns === null || localColumns === void 0 ? void 0 : localColumns.map((column, index) => {
@@ -8997,7 +9001,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
             if (!columnDef.header || ((_a = columnDef.header) === null || _a === void 0 ? void 0 : _a.length) === 0) {
                 return null;
             }
-            return (jsxRuntime.jsx(ColumnFilterItem, { id: column.id, index: index, moveColumn: moveColumn, name: columnDef.header.toString(), toggled: column.getIsVisible(), disabled: !!((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.required), onToggle: (toggled, event) => {
+            return (jsxRuntime.jsx(ColumnFilterItem, { id: column.id, index: index, moveColumn: moveColumn, onDrop: onColumDrop, onCancelDrop: onCancelColumDrop, name: columnDef.header.toString(), toggled: column.getIsVisible(), disabled: !!((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.required), onToggle: (toggled, event) => {
                     column.getToggleVisibilityHandler()(event);
                     onUserEvent === null || onUserEvent === void 0 ? void 0 : onUserEvent("Column Filter", {
                         columnName: column.id,
@@ -9009,7 +9013,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
 const ItemTypes = {
     COLUMN: "column",
 };
-const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, id }) => {
+const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, }) => {
     const ref = React__namespace.useRef(null);
     const [, drop] = useDrop({
         accept: ItemTypes.COLUMN,
@@ -9036,18 +9040,26 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
             moveColumn(dragIndex, hoverIndex);
             item.index = hoverIndex;
         },
+        drop(item, monitor) {
+            onDrop();
+        },
     });
     const [{ isDragging }, drag] = useDrag({
         type: ItemTypes.COLUMN,
         item: { type: ItemTypes.COLUMN, id, index },
-        canDrag: !disabled,
+        canDrag: true,
         collect: (monitor) => ({
             isDragging: monitor.isDragging(),
         }),
+        end(draggedItem, monitor) {
+            if (!monitor.didDrop()) {
+                onCancelDrop();
+            }
+        },
     });
     const opacity = isDragging ? 0 : 1;
     drag(drop(ref));
-    return (jsxRuntime.jsxs("div", { className: "items-center w-full grid grid-cols-[min-content,1fr,min-content] gap-2", ref: ref, style: { opacity: opacity }, children: [jsxRuntime.jsx("div", { className: cvaColumnFilterGrabbable({ disabled }), children: disabled ? jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosedIcon", size: "small" }) : jsxRuntime.jsx(reactComponents.Icon, { name: "Bars3Icon", size: "small" }) }), jsxRuntime.jsx(reactComponents.Text, { className: "overflow-hidden whitespace-nowrap text-ellipsis", children: name }), jsxRuntime.jsx(reactFormComponents.Toggle, { id: name, toggled: toggled, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", disabled: disabled })] }));
+    return (jsxRuntime.jsxs("div", { className: "items-center w-full grid grid-cols-[min-content,1fr,min-content] gap-2", ref: ref, style: { opacity: opacity }, children: [jsxRuntime.jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsxRuntime.jsx(reactComponents.Icon, { name: "Bars3Icon", size: "small" }) }), jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content]", children: [jsxRuntime.jsx(reactComponents.Text, { className: "overflow-hidden whitespace-nowrap text-ellipsis", children: name }), disabled ? jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosedIcon", size: "small" }) : null] }), jsxRuntime.jsx(reactFormComponents.Toggle, { id: id, toggled: toggled, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", disabled: disabled })] }));
 };
 
 /**
@@ -9103,7 +9115,7 @@ const Sorting = ({ columns }) => {
         const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
         chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
     };
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.sorting.toolip"), placement: "bottom-start", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: currentSortDirection === "asc" ? (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowUpIcon", size: "small" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowDownIcon", size: "small" })), color: "secondary", variant: "transparent", size: "small", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsxs(reactComponents.MenuList, { showDivider: true, children: [jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.sorting.toolip"), placement: "bottom-start", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: currentSortDirection === "asc" ? (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowUpIcon", size: "small" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowDownIcon", size: "small" })), color: "secondary", variant: "transparent", size: "small", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsxs(reactComponents.MenuList, { showDivider: true, className: "max-h-full h-96 overflow-y-auto", children: [jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
                                     var _a, _b, _c;
                                     return (jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: (_c = (_b = (_a = column === null || column === void 0 ? void 0 : column.columnDef) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : "", value: column.id }, column.id));
                                 }) }), jsxRuntime.jsxs(reactFormComponents.RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
@@ -9173,14 +9185,19 @@ const useTable = (_a) => {
     const [columnOrder, setColumnOrder] = React.useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || []);
     const [sorting, setSorting] = React.useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
     const [columnSizing, setColumnSizing] = React.useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
+    const hiddenByDefaultState = React.useMemo(() => {
+        return Object.fromEntries(reactTableProps.columns.map(column => { var _a, _b; return [column.id, (_b = (_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault) !== null && _b !== void 0 ? _b : true]; }));
+    }, [reactTableProps.columns]);
     React.useEffect(() => {
         if (initialState) {
-            setColumnVisibility(initialState.columnVisibility || {});
+            setColumnVisibility(Object.keys(initialState.columnVisibility || {}).length > 0
+                ? initialState.columnVisibility
+                : hiddenByDefaultState || {});
             setColumnOrder(initialState.columnOrder || []);
             setSorting(initialState.sorting || []);
             setColumnSizing(initialState.columnSizing || {});
         }
-    }, [initialState]);
+    }, [hiddenByDefaultState, initialState]);
     const state = React.useMemo(() => {
         return Object.assign({ sorting,
             columnVisibility,

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { useContainerProps, IconButton, Icon, Text, MoreMenu, MenuList, Button, Card, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent, useDebounce } from '@trackunit/react-components';
+import { useContainerProps, IconButton, Icon, Text, MoreMenu, MenuList, Button, Card, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
 import * as React from 'react';
 import React__default, { useState, useEffect, useCallback, useRef, createContext, memo as memo$1, isValidElement, cloneElement, useLayoutEffect, useMemo, useContext } from 'react';
 import { Link } from 'react-router-dom';
@@ -8924,37 +8924,41 @@ const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-cent
  * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
-const ColumnFilter = ({ columns, setColumnOrder, onUserEvent, }) => {
+const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }) => {
     var _a;
     const [t] = useTranslation();
     const numberOfHiddenColumns = (_a = columns === null || columns === void 0 ? void 0 : columns.filter(column => !column.getIsVisible())) === null || _a === void 0 ? void 0 : _a.length;
-    const resetHiddenColumns = React.useCallback((closePopover) => {
-        columns === null || columns === void 0 ? void 0 : columns.forEach(column => column.toggleVisibility(true));
-        setColumnOrder([]);
-        closePopover === null || closePopover === void 0 ? void 0 : closePopover();
-    }, [columns, setColumnOrder]);
+    const resetHiddenColumns = React.useCallback(() => {
+        columns === null || columns === void 0 ? void 0 : columns.forEach(column => { var _a, _b; return column.toggleVisibility((_b = !((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)) !== null && _b !== void 0 ? _b : true); });
+        setColumnOrder(defaultColumnOrder || []);
+    }, [columns, defaultColumnOrder, setColumnOrder]);
+    const sortedColumns = useMemo(() => {
+        const result = columnOrder && ((columnOrder === null || columnOrder === void 0 ? void 0 : columnOrder.length) || 0) > 0
+            ? columns === null || columns === void 0 ? void 0 : columns.sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
+            : columns;
+        return result;
+    }, [columnOrder, columns]);
     if (!columns) {
         return null;
     }
     return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom-start", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumnsIcon", size: "small" }), color: "secondary", variant: "transparent", size: "small", children: jsx("span", { className: "hidden sm:block", children: numberOfHiddenColumns > 0
                                     ? t("table.columnFilters.hiddenColumnCount", { count: numberOfHiddenColumns })
-                                    : t("table.columnFilters.columns") }) }) }), jsx(PopoverContent, { children: close => (jsxs(MenuList, { children: [jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsx(Text, { subtle: true, size: "small", children: t("table.columnFilters.title") }), jsx(Button, { className: "p-0", color: "secondary", variant: "transparent", size: "small", onClick: () => resetHiddenColumns(close), children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: columns, setColumnOrder: setColumnOrder, onUserEvent: onUserEvent })] })) })] }) }) }));
+                                    : t("table.columnFilters.columns") }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "max-h-[55vh] w-72 overflow-y-auto relative pr-4", children: [jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsx(Text, { subtle: true, size: "small", children: t("table.columnFilters.title") }), jsx(Button, { className: "p-0", color: "secondary", variant: "transparent", size: "small", onClick: () => resetHiddenColumns(), children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, setColumnOrder: setColumnOrder, onUserEvent: onUserEvent })] })) })] }) }) }));
 };
 const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
     const [localColumns, setLocalColumns] = React.useState(columns);
-    const debouncedColumns = useDebounce(localColumns, 300);
     React.useEffect(() => {
-        if (columns !== localColumns) {
-            setColumnOrder(debouncedColumns.map(column => column.id));
-        }
-    }, [debouncedColumns, setColumnOrder, localColumns, columns]);
+        setLocalColumns(columns);
+    }, [columns]);
+    const onColumDrop = React.useCallback(() => {
+        setColumnOrder(localColumns.map(column => column.id));
+    }, [localColumns, setColumnOrder]);
+    const onCancelColumDrop = React.useCallback(() => {
+        setLocalColumns(columns);
+    }, [columns]);
     const moveColumn = React.useCallback((dragIndex, hoverIndex) => {
-        var _a, _b, _c;
+        var _a;
         const dragColumn = localColumns[dragIndex];
-        const hoveredColumn = localColumns[hoverIndex];
-        if ((_b = (_a = hoveredColumn.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.required) {
-            return;
-        }
         setLocalColumns(update(localColumns, {
             $splice: [
                 [dragIndex, 1],
@@ -8962,7 +8966,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
             ],
         }));
         onUserEvent === null || onUserEvent === void 0 ? void 0 : onUserEvent("Column Reordering", {
-            columnReordered: (_c = dragColumn === null || dragColumn === void 0 ? void 0 : dragColumn.columnDef.header) !== null && _c !== void 0 ? _c : "",
+            columnReordered: (_a = dragColumn === null || dragColumn === void 0 ? void 0 : dragColumn.columnDef.header) !== null && _a !== void 0 ? _a : "",
         });
     }, [localColumns, onUserEvent]);
     return (jsx("div", { className: "flex flex-col gap-2 max-h-full max-w-[400px] overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns === null || localColumns === void 0 ? void 0 : localColumns.map((column, index) => {
@@ -8971,7 +8975,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
             if (!columnDef.header || ((_a = columnDef.header) === null || _a === void 0 ? void 0 : _a.length) === 0) {
                 return null;
             }
-            return (jsx(ColumnFilterItem, { id: column.id, index: index, moveColumn: moveColumn, name: columnDef.header.toString(), toggled: column.getIsVisible(), disabled: !!((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.required), onToggle: (toggled, event) => {
+            return (jsx(ColumnFilterItem, { id: column.id, index: index, moveColumn: moveColumn, onDrop: onColumDrop, onCancelDrop: onCancelColumDrop, name: columnDef.header.toString(), toggled: column.getIsVisible(), disabled: !!((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.required), onToggle: (toggled, event) => {
                     column.getToggleVisibilityHandler()(event);
                     onUserEvent === null || onUserEvent === void 0 ? void 0 : onUserEvent("Column Filter", {
                         columnName: column.id,
@@ -8983,7 +8987,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
 const ItemTypes = {
     COLUMN: "column",
 };
-const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, id }) => {
+const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, }) => {
     const ref = React.useRef(null);
     const [, drop] = useDrop({
         accept: ItemTypes.COLUMN,
@@ -9010,18 +9014,26 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
             moveColumn(dragIndex, hoverIndex);
             item.index = hoverIndex;
         },
+        drop(item, monitor) {
+            onDrop();
+        },
     });
     const [{ isDragging }, drag] = useDrag({
         type: ItemTypes.COLUMN,
         item: { type: ItemTypes.COLUMN, id, index },
-        canDrag: !disabled,
+        canDrag: true,
         collect: (monitor) => ({
             isDragging: monitor.isDragging(),
         }),
+        end(draggedItem, monitor) {
+            if (!monitor.didDrop()) {
+                onCancelDrop();
+            }
+        },
     });
     const opacity = isDragging ? 0 : 1;
     drag(drop(ref));
-    return (jsxs("div", { className: "items-center w-full grid grid-cols-[min-content,1fr,min-content] gap-2", ref: ref, style: { opacity: opacity }, children: [jsx("div", { className: cvaColumnFilterGrabbable({ disabled }), children: disabled ? jsx(Icon, { name: "LockClosedIcon", size: "small" }) : jsx(Icon, { name: "Bars3Icon", size: "small" }) }), jsx(Text, { className: "overflow-hidden whitespace-nowrap text-ellipsis", children: name }), jsx(Toggle, { id: name, toggled: toggled, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", disabled: disabled })] }));
+    return (jsxs("div", { className: "items-center w-full grid grid-cols-[min-content,1fr,min-content] gap-2", ref: ref, style: { opacity: opacity }, children: [jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsx(Icon, { name: "Bars3Icon", size: "small" }) }), jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content]", children: [jsx(Text, { className: "overflow-hidden whitespace-nowrap text-ellipsis", children: name }), disabled ? jsx(Icon, { name: "LockClosedIcon", size: "small" }) : null] }), jsx(Toggle, { id: id, toggled: toggled, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", disabled: disabled })] }));
 };
 
 /**
@@ -9077,7 +9089,7 @@ const Sorting = ({ columns }) => {
         const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
         chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
     };
-    return (jsx(Tooltip, { label: t("table.sorting.toolip"), placement: "bottom-start", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: currentSortDirection === "asc" ? (jsx(Icon, { name: "BarsArrowUpIcon", size: "small" })) : (jsx(Icon, { name: "BarsArrowDownIcon", size: "small" })), color: "secondary", variant: "transparent", size: "small", children: jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsx(PopoverContent, { children: jsxs(MenuList, { showDivider: true, children: [jsx(RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
+    return (jsx(Tooltip, { label: t("table.sorting.toolip"), placement: "bottom-start", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: currentSortDirection === "asc" ? (jsx(Icon, { name: "BarsArrowUpIcon", size: "small" })) : (jsx(Icon, { name: "BarsArrowDownIcon", size: "small" })), color: "secondary", variant: "transparent", size: "small", children: jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsx(PopoverContent, { children: jsxs(MenuList, { showDivider: true, className: "max-h-full h-96 overflow-y-auto", children: [jsx(RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
                                     var _a, _b, _c;
                                     return (jsx(RadioItem, { className: "w-full", label: (_c = (_b = (_a = column === null || column === void 0 ? void 0 : column.columnDef) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : "", value: column.id }, column.id));
                                 }) }), jsxs(RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsx(RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsx(RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
@@ -9147,14 +9159,19 @@ const useTable = (_a) => {
     const [columnOrder, setColumnOrder] = useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || []);
     const [sorting, setSorting] = useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
     const [columnSizing, setColumnSizing] = useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
+    const hiddenByDefaultState = useMemo(() => {
+        return Object.fromEntries(reactTableProps.columns.map(column => { var _a, _b; return [column.id, (_b = (_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault) !== null && _b !== void 0 ? _b : true]; }));
+    }, [reactTableProps.columns]);
     useEffect(() => {
         if (initialState) {
-            setColumnVisibility(initialState.columnVisibility || {});
+            setColumnVisibility(Object.keys(initialState.columnVisibility || {}).length > 0
+                ? initialState.columnVisibility
+                : hiddenByDefaultState || {});
             setColumnOrder(initialState.columnOrder || []);
             setSorting(initialState.sorting || []);
             setColumnSizing(initialState.columnSizing || {});
         }
-    }, [initialState]);
+    }, [hiddenByDefaultState, initialState]);
     const state = useMemo(() => {
         return Object.assign({ sorting,
             columnVisibility,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -12,12 +12,12 @@
     "@trackunit/css-class-variance-utilities": "0.0.12",
     "@trackunit/css-core": "0.0.93",
     "@trackunit/i18n-library-translation": "0.0.72",
-    "@trackunit/react-components": "0.1.150",
+    "@trackunit/react-components": "0.1.151",
     "@trackunit/react-core-contexts-api": "0.2.53",
-    "@trackunit/react-core-contexts-test": "0.1.98",
-    "@trackunit/react-form-components": "0.0.128",
+    "@trackunit/react-core-contexts-test": "0.1.100",
+    "@trackunit/react-form-components": "0.0.129",
     "@trackunit/react-table-base-components": "0.0.1",
-    "@trackunit/shared-utils": "0.0.3",
+    "@trackunit/shared-utils": "0.0.4",
     "@trackunit/ui-icons": "0.0.73",
     "immutability-helper": "3.1.1",
     "react": "18.2.0",

package/src/menus/ColumnFilter.d.ts

@@ -2,6 +2,8 @@
 import { Column, ColumnOrderState, Updater } from "@tanstack/react-table";
 export interface IColumnFilterProps<T extends object, V> {
     columns: Column<T, V>[];
+    defaultColumnOrder: ColumnOrderState;
+    columnOrder?: ColumnOrderState;
     className?: string;
     setColumnOrder: (updater: Updater<ColumnOrderState>) => void;
     onUserEvent?: (event: "Column Reordering" | "Column Filter", payload: Record<string, unknown>) => void;
@@ -14,7 +16,7 @@ export interface IColumnFilterProps<T extends object, V> {
  * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
-export declare const ColumnFilter: <T extends Object, V>({ columns, setColumnOrder, onUserEvent, }: IColumnFilterProps<T, V>) => JSX.Element | null;
+export declare const ColumnFilter: <T extends Object, V>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: IColumnFilterProps<T, V>) => JSX.Element | null;
 export interface ColumnFiltersDragAndDropProps<T extends object, V> {
     columns: Column<T, V>[];
     setColumnOrder: (updater: Updater<ColumnOrderState>) => void;

package/src/types.d.ts

@@ -5,6 +5,7 @@ declare module "@tanstack/table-core" {
         alignment?: Alignment;
         required?: boolean;
         subHeader?: string;
+        hiddenByDefault?: boolean;
     }
 }
 export interface RelayPageInfo {