@trackunit/react-table 0.0.586 → 0.0.590

package/index.cjs.js

@@ -7,14 +7,14 @@ var sharedUtils = require('@trackunit/shared-utils');
 var React = require('react');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactRouter = require('@tanstack/react-router');
-var reactTable = require('@tanstack/react-table');
-var reactTableBaseComponents = require('@trackunit/react-table-base-components');
-var reactTablePagination = require('@trackunit/react-table-pagination');
-var tailwindMerge = require('tailwind-merge');
 var reactFormComponents = require('@trackunit/react-form-components');
 var update = require('immutability-helper');
 var reactDnd = require('react-dnd');
 var reactDndHtml5Backend = require('react-dnd-html5-backend');
+var reactTable = require('@tanstack/react-table');
+var reactTableBaseComponents = require('@trackunit/react-table-base-components');
+var reactTablePagination = require('@trackunit/react-table-pagination');
+var tailwindMerge = require('tailwind-merge');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
 
 function _interopNamespaceDefault(e) {
@@ -289,94 +289,6 @@ const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, r
                 moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
 };
 
-/**
- * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
- *
- * @param {ReactTable} props - The props for the Table component
- * @returns {JSX.Element} Table component
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Table = ({ rowHeight = 75, ...props }) => {
-    var _a, _b, _c;
-    //we need a reference to the scrolling element for logic down below
-    const tableContainerRef = React.useRef(null);
-    const [t] = useTranslation();
-    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize } = reactTablePagination.useInfiniteScroll({
-        pagination: props.pagination || reactTablePagination.noPagination,
-        containerRef: tableContainerRef,
-        rowSize: props.getRowModel().rows.length || 0,
-        rowHeight,
-    });
-    const hasResults = props.getRowModel().rows.length > 0;
-    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, 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", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
-                        height: hasResults ? "auto" : "100%",
-                        width: "100%",
-                        position: "relative",
-                    }, children: [jsxRuntime.jsx(reactTableBaseComponents.Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: "flex", children: headerGroup.headers.map(header => {
-                                    var _a, _b, _c, _d, _e, _f;
-                                    const tooltipLabel = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.tootipLabel) !== null && _b !== void 0 ? _b : (typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
-                                    return (jsxRuntime.jsxs(reactTableBaseComponents.Th, { className: "relative", style: {
-                                            width: header.getSize(),
-                                            minWidth: header.column.columnDef.minSize,
-                                            maxWidth: header.column.columnDef.maxSize,
-                                            textAlign: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.alignment) || "left",
-                                            flexGrow: ((_d = header.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.shouldGrow) ? 1 : 0,
-                                        }, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : "flex"} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
-                                                onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), ((_e = header.column.columnDef.meta) === null || _e === void 0 ? void 0 : _e.subHeader) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: header.column.columnDef.meta.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !((_f = header.column.columnDef.meta) === null || _f === void 0 ? void 0 : _f.shouldGrow) && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
-                                }) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
-                                height: `${getTotalSize()}px`,
-                                flexGrow: 1,
-                            }, children: getVirtualItems().map((virtualRow, index) => {
-                                const row = props.getRowModel().rows[virtualRow.index];
-                                if (!row) {
-                                    return null;
-                                }
-                                else {
-                                    return (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: reactComponents.cvaInteractableItem({
-                                            cursor: !!props.onRowClick || row.getCanSelect() ? "pointer" : "default",
-                                            selected: "auto",
-                                        }), dataTestId: `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
-                                            if (props.onRowClick) {
-                                                props.onRowClick(row);
-                                            }
-                                            else if (row.getCanSelect()) {
-                                                row.toggleSelected();
-                                            }
-                                        }, style: {
-                                            height: `${virtualRow.size}px`,
-                                            transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
-                                        }, children: row.getVisibleCells().map(cell => {
-                                            var _a, _b;
-                                            return (jsxRuntime.jsx(reactTableBaseComponents.Td, { onClick: event => {
-                                                    // prevent onRowClick action when clicking on a "selectable" cell with checkbox
-                                                    if (props.selectionColId && cell.column.id === props.selectionColId) {
-                                                        event.stopPropagation();
-                                                    }
-                                                }, style: {
-                                                    width: cell.column.getSize(),
-                                                    minWidth: cell.column.columnDef.minSize,
-                                                    maxWidth: cell.column.columnDef.maxSize,
-                                                    textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
-                                                    flexGrow: ((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.shouldGrow) ? 1 : 0,
-                                                }, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
-                                        }) }, row.id));
-                                }
-                            }) })) : (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" })) : 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", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
-                            count: props.getRowModel().rows.length,
-                            total: ((_b = (_a = props.pagination) === null || _a === void 0 ? void 0 : _a.pageInfo) === null || _b === void 0 ? void 0 : _b.count) || 0,
-                        }) }), ((_c = props.pagination) === null || _c === void 0 ? void 0 : _c.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] }))] }));
-};
-const cvaTBody = cssClassVarianceUtilities.cvaMerge(["min-h-[40dvh]"], {
-    variants: {
-        emptyState: {
-            true: "min-h-[400px]",
-        },
-    },
-    defaultVariants: {
-        emptyState: false,
-    },
-});
-
 const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-center"], {
     variants: {
         disabled: {
@@ -582,6 +494,103 @@ const Sorting = ({ columns, }) => {
                                 }) }), 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" })] })] }) })] }) }));
 };
 
+/**
+ * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
+ *
+ * @param {ReactTable} props - The props for the Table component
+ * @returns {JSX.Element} Table component
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Table = ({ rowHeight = 75, ...props }) => {
+    var _a, _b, _c;
+    //we need a reference to the scrolling element for logic down below
+    const tableContainerRef = React.useRef(null);
+    const [t] = useTranslation();
+    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize } = reactTablePagination.useInfiniteScroll({
+        pagination: props.pagination || reactTablePagination.noPagination,
+        containerRef: tableContainerRef,
+        rowSize: props.getRowModel().rows.length || 0,
+        rowHeight,
+    });
+    const hasResults = props.getRowModel().rows.length > 0;
+    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, 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", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
+                        height: hasResults ? "auto" : "100%",
+                        width: "100%",
+                        position: "relative",
+                    }, children: [jsxRuntime.jsx(reactTableBaseComponents.Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: "flex", children: headerGroup.headers.map(header => {
+                                    var _a, _b, _c, _d, _e, _f;
+                                    const tooltipLabel = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.tootipLabel) !== null && _b !== void 0 ? _b : (typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
+                                    return (jsxRuntime.jsxs(reactTableBaseComponents.Th, { className: "relative", style: {
+                                            width: header.getSize(),
+                                            minWidth: header.column.columnDef.minSize,
+                                            maxWidth: header.column.columnDef.maxSize,
+                                            textAlign: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.alignment) || "left",
+                                            flexGrow: ((_d = header.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.shouldGrow) ? 1 : 0,
+                                        }, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : "flex"} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
+                                                onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), ((_e = header.column.columnDef.meta) === null || _e === void 0 ? void 0 : _e.subHeader) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: header.column.columnDef.meta.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !((_f = header.column.columnDef.meta) === null || _f === void 0 ? void 0 : _f.shouldGrow) && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
+                                }) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
+                                height: `${getTotalSize()}px`,
+                                flexGrow: 1,
+                            }, children: getVirtualItems().map((virtualRow, index) => {
+                                const row = props.getRowModel().rows[virtualRow.index];
+                                if (!row) {
+                                    return null;
+                                }
+                                else {
+                                    return (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: reactComponents.cvaInteractableItem({
+                                            cursor: !!props.onRowClick || row.getCanSelect() ? "pointer" : "default",
+                                            selected: "auto",
+                                        }), dataTestId: `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
+                                            if (props.onRowClick) {
+                                                props.onRowClick(row);
+                                            }
+                                            else if (row.getCanSelect()) {
+                                                row.toggleSelected();
+                                            }
+                                        }, style: {
+                                            height: `${virtualRow.size}px`,
+                                            transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
+                                        }, children: row.getVisibleCells().map(cell => {
+                                            var _a, _b;
+                                            return (jsxRuntime.jsx(reactTableBaseComponents.Td, { onClick: event => {
+                                                    // prevent onRowClick action when clicking on a "selectable" cell with checkbox
+                                                    if (props.selectionColId && cell.column.id === props.selectionColId) {
+                                                        event.stopPropagation();
+                                                    }
+                                                }, style: {
+                                                    width: cell.column.getSize(),
+                                                    minWidth: cell.column.columnDef.minSize,
+                                                    maxWidth: cell.column.columnDef.maxSize,
+                                                    textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
+                                                    flexGrow: ((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.shouldGrow) ? 1 : 0,
+                                                }, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
+                                        }) }, row.id));
+                                }
+                            }) })) : (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" })) : 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", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
+                            count: props.getRowModel().rows.length,
+                            total: ((_b = (_a = props.pagination) === null || _a === void 0 ? void 0 : _a.pageInfo) === null || _b === void 0 ? void 0 : _b.count) || 0,
+                        }) }), ((_c = props.pagination) === null || _c === void 0 ? void 0 : _c.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] }))] }));
+};
+const cvaTBody = cssClassVarianceUtilities.cvaMerge(["min-h-[40dvh]"], {
+    variants: {
+        emptyState: {
+            true: "min-h-[400px]",
+        },
+    },
+    defaultVariants: {
+        emptyState: false,
+    },
+});
+
+/**
+ * Creates and returns a memoized instance of a columnHelper
+ */
+const useColumnHelper = () => {
+    return React.useMemo(() => {
+        return reactTable.createColumnHelper();
+    }, []);
+};
+
 /**
  * Hook for managing and controlling a table's state and behavior.
  *
@@ -627,12 +636,12 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
     const [columnSizing, setColumnSizing] = React.useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
     React.useEffect(() => {
         if (initialState && sharedUtils.objectKeys(initialState).length > 0) {
-            setColumnVisibility(initialState.columnVisibility || {});
-            setColumnOrder(initialState.columnOrder || []);
+            setColumnVisibility(updatedInitialColumnVisibility);
+            setColumnOrder(updatedInitialColumnOrder);
             setSorting(initialState.sorting || []);
             setColumnSizing(initialState.columnSizing || {});
         }
-    }, [initialState, initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility, initialState === null || initialState === void 0 ? void 0 : initialState.sorting, initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing]);
+    }, [initialState, updatedInitialColumnOrder, updatedInitialColumnVisibility]);
     const state = React.useMemo(() => {
         return {
             sorting,
@@ -817,5 +826,6 @@ exports.Sorting = Sorting;
 exports.Table = Table;
 exports.fromTUSortToTanStack = fromTUSortToTanStack;
 exports.fromTanStackToTUSort = fromTanStackToTUSort;
+exports.useColumnHelper = useColumnHelper;
 exports.useTable = useTable;
 exports.useTableSelection = useTableSelection;

package/index.esm.js

@@ -1,20 +1,20 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { MenuItem, Icon, Button, useOverflowItems, MoreMenu, MenuList, Spacer, Card, Text, cvaInteractableItem, Spinner, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
+import { MenuItem, Icon, Button, useOverflowItems, MoreMenu, MenuList, Spacer, Tooltip, Popover, PopoverTrigger, PopoverContent, Text, Card, cvaInteractableItem, Spinner, EmptyState } from '@trackunit/react-components';
 import { objectValues, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
 import * as React from 'react';
-import { useMemo, Children, cloneElement, useRef, useEffect, useState, useCallback } from 'react';
+import { useMemo, Children, cloneElement, useEffect, useRef, 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';
-export { createColumnHelper } from '@tanstack/react-table';
-import { TableRoot, Thead, Tr, Th, SortIndicator, ResizeHandle, Tbody, Td } from '@trackunit/react-table-base-components';
-import { useInfiniteScroll, noPagination } from '@trackunit/react-table-pagination';
-import { twMerge } from 'tailwind-merge';
 import { Toggle, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
 import update from 'immutability-helper';
 import { DndProvider, useDrop, useDrag } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { flexRender, createColumnHelper, useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
+export { createColumnHelper } from '@tanstack/react-table';
+import { TableRoot, Thead, Tr, Th, SortIndicator, ResizeHandle, Tbody, Td } from '@trackunit/react-table-base-components';
+import { useInfiniteScroll, noPagination } from '@trackunit/react-table-pagination';
+import { twMerge } from 'tailwind-merge';
 import { SortOrder, validateStringAsAssetSortByProperty } from '@trackunit/react-core-contexts-api';
 
 var defaultTranslations = {
@@ -270,94 +270,6 @@ const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, r
                 moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
 };
 
-/**
- * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
- *
- * @param {ReactTable} props - The props for the Table component
- * @returns {JSX.Element} Table component
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Table = ({ rowHeight = 75, ...props }) => {
-    var _a, _b, _c;
-    //we need a reference to the scrolling element for logic down below
-    const tableContainerRef = useRef(null);
-    const [t] = useTranslation();
-    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize } = useInfiniteScroll({
-        pagination: props.pagination || noPagination,
-        containerRef: tableContainerRef,
-        rowSize: props.getRowModel().rows.length || 0,
-        rowHeight,
-    });
-    const hasResults = props.getRowModel().rows.length > 0;
-    return (jsxs(Card, { className: twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center", children: props.headerLeftActions }), jsx("div", { className: "flex items-center", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxs(TableRoot, { style: {
-                        height: hasResults ? "auto" : "100%",
-                        width: "100%",
-                        position: "relative",
-                    }, children: [jsx(Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
-                                    var _a, _b, _c, _d, _e, _f;
-                                    const tooltipLabel = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.tootipLabel) !== null && _b !== void 0 ? _b : (typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
-                                    return (jsxs(Th, { className: "relative", style: {
-                                            width: header.getSize(),
-                                            minWidth: header.column.columnDef.minSize,
-                                            maxWidth: header.column.columnDef.maxSize,
-                                            textAlign: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.alignment) || "left",
-                                            flexGrow: ((_d = header.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.shouldGrow) ? 1 : 0,
-                                        }, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : "flex"} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
-                                                onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_e = header.column.columnDef.meta) === null || _e === void 0 ? void 0 : _e.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: header.column.columnDef.meta.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !((_f = header.column.columnDef.meta) === null || _f === void 0 ? void 0 : _f.shouldGrow) && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
-                                }) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {
-                                height: `${getTotalSize()}px`,
-                                flexGrow: 1,
-                            }, children: getVirtualItems().map((virtualRow, index) => {
-                                const row = props.getRowModel().rows[virtualRow.index];
-                                if (!row) {
-                                    return null;
-                                }
-                                else {
-                                    return (jsx(Tr, { className: cvaInteractableItem({
-                                            cursor: !!props.onRowClick || row.getCanSelect() ? "pointer" : "default",
-                                            selected: "auto",
-                                        }), dataTestId: `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
-                                            if (props.onRowClick) {
-                                                props.onRowClick(row);
-                                            }
-                                            else if (row.getCanSelect()) {
-                                                row.toggleSelected();
-                                            }
-                                        }, style: {
-                                            height: `${virtualRow.size}px`,
-                                            transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
-                                        }, children: row.getVisibleCells().map(cell => {
-                                            var _a, _b;
-                                            return (jsx(Td, { onClick: event => {
-                                                    // prevent onRowClick action when clicking on a "selectable" cell with checkbox
-                                                    if (props.selectionColId && cell.column.id === props.selectionColId) {
-                                                        event.stopPropagation();
-                                                    }
-                                                }, style: {
-                                                    width: cell.column.getSize(),
-                                                    minWidth: cell.column.columnDef.minSize,
-                                                    maxWidth: cell.column.columnDef.maxSize,
-                                                    textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
-                                                    flexGrow: ((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.shouldGrow) ? 1 : 0,
-                                                }, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
-                                        }) }, row.id));
-                                }
-                            }) })) : (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" })) : 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", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
-                            count: props.getRowModel().rows.length,
-                            total: ((_b = (_a = props.pagination) === null || _a === void 0 ? void 0 : _a.pageInfo) === null || _b === void 0 ? void 0 : _b.count) || 0,
-                        }) }), ((_c = props.pagination) === null || _c === void 0 ? void 0 : _c.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] }))] }));
-};
-const cvaTBody = cvaMerge(["min-h-[40dvh]"], {
-    variants: {
-        emptyState: {
-            true: "min-h-[400px]",
-        },
-    },
-    defaultVariants: {
-        emptyState: false,
-    },
-});
-
 const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-center"], {
     variants: {
         disabled: {
@@ -563,6 +475,103 @@ const Sorting = ({ columns, }) => {
                                 }) }), 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" })] })] }) })] }) }));
 };
 
+/**
+ * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
+ *
+ * @param {ReactTable} props - The props for the Table component
+ * @returns {JSX.Element} Table component
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Table = ({ rowHeight = 75, ...props }) => {
+    var _a, _b, _c;
+    //we need a reference to the scrolling element for logic down below
+    const tableContainerRef = useRef(null);
+    const [t] = useTranslation();
+    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize } = useInfiniteScroll({
+        pagination: props.pagination || noPagination,
+        containerRef: tableContainerRef,
+        rowSize: props.getRowModel().rows.length || 0,
+        rowHeight,
+    });
+    const hasResults = props.getRowModel().rows.length > 0;
+    return (jsxs(Card, { className: twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center", children: props.headerLeftActions }), jsx("div", { className: "flex items-center", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxs(TableRoot, { style: {
+                        height: hasResults ? "auto" : "100%",
+                        width: "100%",
+                        position: "relative",
+                    }, children: [jsx(Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
+                                    var _a, _b, _c, _d, _e, _f;
+                                    const tooltipLabel = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.tootipLabel) !== null && _b !== void 0 ? _b : (typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
+                                    return (jsxs(Th, { className: "relative", style: {
+                                            width: header.getSize(),
+                                            minWidth: header.column.columnDef.minSize,
+                                            maxWidth: header.column.columnDef.maxSize,
+                                            textAlign: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.alignment) || "left",
+                                            flexGrow: ((_d = header.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.shouldGrow) ? 1 : 0,
+                                        }, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : "flex"} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
+                                                onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_e = header.column.columnDef.meta) === null || _e === void 0 ? void 0 : _e.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: header.column.columnDef.meta.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !((_f = header.column.columnDef.meta) === null || _f === void 0 ? void 0 : _f.shouldGrow) && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
+                                }) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {
+                                height: `${getTotalSize()}px`,
+                                flexGrow: 1,
+                            }, children: getVirtualItems().map((virtualRow, index) => {
+                                const row = props.getRowModel().rows[virtualRow.index];
+                                if (!row) {
+                                    return null;
+                                }
+                                else {
+                                    return (jsx(Tr, { className: cvaInteractableItem({
+                                            cursor: !!props.onRowClick || row.getCanSelect() ? "pointer" : "default",
+                                            selected: "auto",
+                                        }), dataTestId: `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
+                                            if (props.onRowClick) {
+                                                props.onRowClick(row);
+                                            }
+                                            else if (row.getCanSelect()) {
+                                                row.toggleSelected();
+                                            }
+                                        }, style: {
+                                            height: `${virtualRow.size}px`,
+                                            transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
+                                        }, children: row.getVisibleCells().map(cell => {
+                                            var _a, _b;
+                                            return (jsx(Td, { onClick: event => {
+                                                    // prevent onRowClick action when clicking on a "selectable" cell with checkbox
+                                                    if (props.selectionColId && cell.column.id === props.selectionColId) {
+                                                        event.stopPropagation();
+                                                    }
+                                                }, style: {
+                                                    width: cell.column.getSize(),
+                                                    minWidth: cell.column.columnDef.minSize,
+                                                    maxWidth: cell.column.columnDef.maxSize,
+                                                    textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
+                                                    flexGrow: ((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.shouldGrow) ? 1 : 0,
+                                                }, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
+                                        }) }, row.id));
+                                }
+                            }) })) : (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" })) : 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", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
+                            count: props.getRowModel().rows.length,
+                            total: ((_b = (_a = props.pagination) === null || _a === void 0 ? void 0 : _a.pageInfo) === null || _b === void 0 ? void 0 : _b.count) || 0,
+                        }) }), ((_c = props.pagination) === null || _c === void 0 ? void 0 : _c.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] }))] }));
+};
+const cvaTBody = cvaMerge(["min-h-[40dvh]"], {
+    variants: {
+        emptyState: {
+            true: "min-h-[400px]",
+        },
+    },
+    defaultVariants: {
+        emptyState: false,
+    },
+});
+
+/**
+ * Creates and returns a memoized instance of a columnHelper
+ */
+const useColumnHelper = () => {
+    return useMemo(() => {
+        return createColumnHelper();
+    }, []);
+};
+
 /**
  * Hook for managing and controlling a table's state and behavior.
  *
@@ -608,12 +617,12 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
     const [columnSizing, setColumnSizing] = useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
     useEffect(() => {
         if (initialState && objectKeys(initialState).length > 0) {
-            setColumnVisibility(initialState.columnVisibility || {});
-            setColumnOrder(initialState.columnOrder || []);
+            setColumnVisibility(updatedInitialColumnVisibility);
+            setColumnOrder(updatedInitialColumnOrder);
             setSorting(initialState.sorting || []);
             setColumnSizing(initialState.columnSizing || {});
         }
-    }, [initialState, initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility, initialState === null || initialState === void 0 ? void 0 : initialState.sorting, initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing]);
+    }, [initialState, updatedInitialColumnOrder, updatedInitialColumnVisibility]);
     const state = useMemo(() => {
         return {
             sorting,
@@ -787,4 +796,4 @@ const fromTanStackToTUSort = (input) => {
  */
 setupLibraryTranslations();
 
-export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTanStackToTUSort, useTable, useTableSelection };
+export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTanStackToTUSort, useColumnHelper, useTable, useTableSelection };

package/package.json

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

package/src/index.d.ts

@@ -1,10 +1,11 @@
 import { ColumnSort } from "@tanstack/react-table";
 export * from "./ActionSheet";
-export * from "./Table";
 export * from "./menus/ColumnFilter";
 export * from "./menus/RowSpacing";
 export * from "./menus/Sorting";
+export * from "./Table";
 export * from "./types";
+export * from "./useColumnHelper";
 export * from "./useTable";
 export * from "./useTableSelection";
 export * from "./utils";

package/src/useColumnHelper.d.ts

@@ -0,0 +1,5 @@
+import { RowData } from "@tanstack/react-table";
+/**
+ * Creates and returns a memoized instance of a columnHelper
+ */
+export declare const useColumnHelper: <TData extends RowData>() => import("@tanstack/react-table").ColumnHelper<TData>;