@trackunit/react-table 0.0.481 → 0.0.484

package/index.cjs.js

@@ -336,6 +336,12 @@ const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "it
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, }) => {
     const [t] = useTranslation();
     const numberOfHiddenColumns = columns.filter(column => !column.getIsVisible()).length;
+    React.useEffect(() => {
+        if (defaultColumnOrder.length > 0) {
+            setColumnOrder(defaultColumnOrder);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); //This should only run once, at page load
     const resetHiddenColumns = React__namespace.useCallback(() => {
         columns.forEach(column => { var _a; return column.toggleVisibility(!((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)); });
         setColumnOrder(defaultColumnOrder);
@@ -355,16 +361,22 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
         }
         return t("table.columnFilters.columns");
     };
-    return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: getColumnButtonText() }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: t("table.columnFilters.title") }), jsxRuntime.jsx(reactComponents.Button, { className: "p-0", onClick: () => resetHiddenColumns(), size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder })] })) })] }) }) }));
+    return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: getColumnButtonText() }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: t("table.columnFilters.title") }), jsxRuntime.jsx(reactComponents.Button, { className: "p-0", onClick: () => resetHiddenColumns(), size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, defaultColumnOrder: defaultColumnOrder, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder })] })) })] }) }) }));
 };
-const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
+const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaultColumnOrder, }) => {
     const [localColumns, setLocalColumns] = React__namespace.useState(columns);
     React__namespace.useEffect(() => {
         setLocalColumns(columns);
     }, [columns]);
     const onColumDrop = React__namespace.useCallback(() => {
-        setColumnOrder(localColumns.map(column => column.id));
-    }, [localColumns, setColumnOrder]);
+        var _a;
+        const firstElement = defaultColumnOrder[0];
+        const firstLocalColumnId = (_a = localColumns[0]) === null || _a === void 0 ? void 0 : _a.id;
+        const newColumnOrder = firstElement === firstLocalColumnId
+            ? localColumns.map(column => column.id)
+            : [firstElement, ...localColumns.map(column => column.id)].filter((id) => id !== undefined);
+        setColumnOrder(newColumnOrder);
+    }, [localColumns, setColumnOrder, defaultColumnOrder]);
     const onCancelColumDrop = React__namespace.useCallback(() => {
         setLocalColumns(columns);
     }, [columns]);

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
 import { MenuItem, Icon, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, cvaInteractableItem, Spinner, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
 import { objectValues, truthy, objectKeys, objectEntries } from '@trackunit/shared-utils';
 import * as React from 'react';
-import { useMemo, Children, cloneElement, useRef, useState, useEffect, useCallback } from 'react';
+import { useMemo, Children, cloneElement, useRef, useEffect, useState, useCallback } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Link } from '@tanstack/react-router';
 import { flexRender, useReactTable, getSortedRowModel, getCoreRowModel, createColumnHelper } from '@tanstack/react-table';
@@ -317,6 +317,12 @@ const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-cent
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, }) => {
     const [t] = useTranslation();
     const numberOfHiddenColumns = columns.filter(column => !column.getIsVisible()).length;
+    useEffect(() => {
+        if (defaultColumnOrder.length > 0) {
+            setColumnOrder(defaultColumnOrder);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); //This should only run once, at page load
     const resetHiddenColumns = React.useCallback(() => {
         columns.forEach(column => { var _a; return column.toggleVisibility(!((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)); });
         setColumnOrder(defaultColumnOrder);
@@ -336,16 +342,22 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
         }
         return t("table.columnFilters.columns");
     };
-    return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: getColumnButtonText() }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsx(Text, { size: "small", subtle: true, children: t("table.columnFilters.title") }), jsx(Button, { className: "p-0", onClick: () => resetHiddenColumns(), size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder })] })) })] }) }) }));
+    return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: getColumnButtonText() }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsx(Text, { size: "small", subtle: true, children: t("table.columnFilters.title") }), jsx(Button, { className: "p-0", onClick: () => resetHiddenColumns(), size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, defaultColumnOrder: defaultColumnOrder, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder })] })) })] }) }) }));
 };
-const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
+const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaultColumnOrder, }) => {
     const [localColumns, setLocalColumns] = React.useState(columns);
     React.useEffect(() => {
         setLocalColumns(columns);
     }, [columns]);
     const onColumDrop = React.useCallback(() => {
-        setColumnOrder(localColumns.map(column => column.id));
-    }, [localColumns, setColumnOrder]);
+        var _a;
+        const firstElement = defaultColumnOrder[0];
+        const firstLocalColumnId = (_a = localColumns[0]) === null || _a === void 0 ? void 0 : _a.id;
+        const newColumnOrder = firstElement === firstLocalColumnId
+            ? localColumns.map(column => column.id)
+            : [firstElement, ...localColumns.map(column => column.id)].filter((id) => id !== undefined);
+        setColumnOrder(newColumnOrder);
+    }, [localColumns, setColumnOrder, defaultColumnOrder]);
     const onCancelColumDrop = React.useCallback(() => {
         setLocalColumns(columns);
     }, [columns]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.481",
+  "version": "0.0.484",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/menus/ColumnFilter.d.ts

@@ -19,4 +19,5 @@ export interface ColumnFiltersDragAndDropProps<TColumnFiltersDragAndDrop extends
     columns: Column<TColumnFiltersDragAndDrop, TColumnFiltersDragAndDropValue>[];
     setColumnOrder: (updater: Updater<ColumnOrderState>) => void;
     onUserEvent?: (event: "Column Reordering" | "Column Filter", payload: Record<string, unknown>) => void;
+    defaultColumnOrder: ColumnOrderState;
 }