@trackunit/react-table 1.7.9 → 1.7.11

package/index.cjs.js

@@ -870,11 +870,11 @@ const Table = ({ rowHeight = 50, ...props }) => {
     //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({
+    const { getVirtualItems, getTotalSize } = reactTablePagination.useInfiniteScroll({
         pagination: props.pagination || reactTablePagination.noPagination,
         containerRef: tableContainerRef,
-        rowSize: props.getRowModel().rows.length || 0,
-        rowHeight,
+        count: props.getRowModel().rows.length,
+        estimateSize: () => rowHeight, // TODO: we should probably move from rowHeight -> estimateSize callback api to match Tanstack Virtual
     });
     const visibleColumns = react.useMemo(() => props.getAllColumns().filter(column => column.getIsVisible()), [props]);
     const visibleColumnsCount = visibleColumns.length;
@@ -941,7 +941,7 @@ 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), 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 gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
+    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact 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 gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", ref: tableContainerRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",

package/index.esm.js

@@ -869,11 +869,11 @@ const Table = ({ rowHeight = 50, ...props }) => {
     //we need a reference to the scrolling element for logic down below
     const tableContainerRef = useRef(null);
     const [t] = useTranslation();
-    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize } = useInfiniteScroll({
+    const { getVirtualItems, getTotalSize } = useInfiniteScroll({
         pagination: props.pagination || noPagination,
         containerRef: tableContainerRef,
-        rowSize: props.getRowModel().rows.length || 0,
-        rowHeight,
+        count: props.getRowModel().rows.length,
+        estimateSize: () => rowHeight, // TODO: we should probably move from rowHeight -> estimateSize callback api to match Tanstack Virtual
     });
     const visibleColumns = useMemo(() => props.getAllColumns().filter(column => column.getIsVisible()), [props]);
     const visibleColumnsCount = visibleColumns.length;
@@ -940,7 +940,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
             header.column.getToggleSortingHandler()?.(event);
         }
     }, [props]);
-    return (jsxs(Card, { className: twMerge("table-compact 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 gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxs(TableRoot, { style: {
+    return (jsxs(Card, { className: twMerge("table-compact 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 gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", ref: tableContainerRef, children: jsxs(TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.7.9",
+  "version": "1.7.11",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,16 +15,16 @@
     "jest-fetch-mock": "^3.0.3",
     "@tanstack/react-router": "1.114.29",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.9.8",
-    "@trackunit/shared-utils": "1.9.5",
-    "@trackunit/css-class-variance-utilities": "1.7.5",
-    "@trackunit/ui-icons": "1.7.7",
-    "@trackunit/react-table-base-components": "1.7.8",
-    "@trackunit/react-table-pagination": "1.7.5",
-    "@trackunit/react-form-components": "1.8.8",
-    "@trackunit/i18n-library-translation": "1.7.7",
-    "@trackunit/react-core-contexts-api": "1.8.6",
-    "@trackunit/react-test-setup": "1.4.5"
+    "@trackunit/react-components": "1.9.10",
+    "@trackunit/shared-utils": "1.9.7",
+    "@trackunit/css-class-variance-utilities": "1.7.7",
+    "@trackunit/ui-icons": "1.7.9",
+    "@trackunit/react-table-base-components": "1.7.10",
+    "@trackunit/react-table-pagination": "1.7.7",
+    "@trackunit/react-form-components": "1.8.10",
+    "@trackunit/i18n-library-translation": "1.7.9",
+    "@trackunit/react-core-contexts-api": "1.8.8",
+    "@trackunit/react-test-setup": "1.4.7"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/Table.d.ts

@@ -27,4 +27,4 @@ export interface TableProps<TData extends object> extends ReactTable<TData>, Com
 /**
  *
  */
-export declare const Table: <TData extends object>({ rowHeight, ...props }: TableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <TData extends object>({ rowHeight, ...props }: TableProps<TData>) => ReactElement;