@trackunit/react-table 0.0.207 → 0.0.210

package/index.cjs.js

@@ -345,8 +345,8 @@ const Table = (_a) => {
         rowHeight,
     });
     const hasResults = props.getRowModel().rows.length > 0;
-    return (jsxRuntime.jsxs(reactComponents.Card, { className: `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", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex", children: props.headerRightActions })] })), jsxRuntime.jsx("div", { className: "min-h[500px] h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
-                        height: getTotalSize() > 0 ? getTotalSize() : "100%",
+    return (jsxRuntime.jsxs(reactComponents.Card, { className: `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", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex", children: props.headerRightActions })] })), jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), 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 => {
@@ -355,10 +355,12 @@ const Table = (_a) => {
                                             width: header.getSize(),
                                             minWidth: header.column.columnDef.minSize,
                                             maxWidth: header.column.columnDef.maxSize,
-                                            textAlign: ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left"
+                                            textAlign: ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
                                         }, className: "relative", children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : ""} items-center gap-2 py-2 overflow-hidden pr-3`,
                                                 onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), ((_c = (_b = header.column.columnDef) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c.subHeader) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: (_e = (_d = header.column.columnDef) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), 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", children: getVirtualItems().map((virtualRow, index) => {
+                                }) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
+                                height: `${getTotalSize()}px`,
+                            }, children: getVirtualItems().map((virtualRow, index) => {
                                 const row = props.getRowModel().rows[virtualRow.index];
                                 if (!row) {
                                     return null;
@@ -381,11 +383,11 @@ const Table = (_a) => {
                                                     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"
+                                                    textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
                                                 }, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
                                         }) }, row.id));
                                 }
-                            }) })) : (jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { image: "SEARCH_DOCUMENT", description: t("table.noResults"), className: "absolute inset-0" })) }) }) }))] }) }), 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", {
+                            }) })) : (jsxRuntime.jsx("tbody", { className: "min-h-[400px]", children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { image: "SEARCH_DOCUMENT", description: t("table.noResults"), className: "absolute inset-0" })) }) }) }))] }) }), 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: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.count) || 0,
                         }) }), props.pagination.isLoading ? (jsxRuntime.jsx("span", { className: "ml-2", children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, props.footerRightActions && jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })] }))] }));
@@ -743,7 +745,7 @@ const useTable = (_a) => {
  *     columns,
  * });
  */
-const useTableSelection = ({ data, defaultSelectedIds, }) => {
+const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true, }) => {
     const [rowSelection, setRowSelection] = React.useState({});
     React.useEffect(() => {
         const initialSelection = {};
@@ -784,8 +786,8 @@ const useTableSelection = ({ data, defaultSelectedIds, }) => {
     const selectionTableProps = React.useMemo(() => ({
         onRowSelectionChange: setRowSelection,
         getRowId: row => row.id,
-        enableRowSelection: true,
-    }), []);
+        enableRowSelection,
+    }), [enableRowSelection]);
     return React.useMemo(() => ({
         toggleRowSelectionState,
         selectionColumn,

package/index.esm.js

@@ -320,8 +320,8 @@ const Table = (_a) => {
         rowHeight,
     });
     const hasResults = props.getRowModel().rows.length > 0;
-    return (jsxs(Card, { className: `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", children: props.headerLeftActions }), jsx("div", { className: "flex", children: props.headerRightActions })] })), jsx("div", { className: "min-h[500px] h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), children: jsxs(TableRoot, { style: {
-                        height: getTotalSize() > 0 ? getTotalSize() : "100%",
+    return (jsxs(Card, { className: `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", children: props.headerLeftActions }), jsx("div", { className: "flex", children: props.headerRightActions })] })), jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), 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 => {
@@ -330,10 +330,12 @@ const Table = (_a) => {
                                             width: header.getSize(),
                                             minWidth: header.column.columnDef.minSize,
                                             maxWidth: header.column.columnDef.maxSize,
-                                            textAlign: ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left"
+                                            textAlign: ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
                                         }, className: "relative", children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : ""} items-center gap-2 py-2 overflow-hidden pr-3`,
                                                 onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_c = (_b = header.column.columnDef) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: (_e = (_d = header.column.columnDef) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), 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", children: getVirtualItems().map((virtualRow, index) => {
+                                }) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {
+                                height: `${getTotalSize()}px`,
+                            }, children: getVirtualItems().map((virtualRow, index) => {
                                 const row = props.getRowModel().rows[virtualRow.index];
                                 if (!row) {
                                     return null;
@@ -356,11 +358,11 @@ const Table = (_a) => {
                                                     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"
+                                                    textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
                                                 }, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
                                         }) }, row.id));
                                 }
-                            }) })) : (jsx("tbody", { children: jsx("tr", { children: jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsx(EmptyState, { image: "SEARCH_DOCUMENT", description: t("table.noResults"), className: "absolute inset-0" })) }) }) }))] }) }), 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", {
+                            }) })) : (jsx("tbody", { className: "min-h-[400px]", children: jsx("tr", { children: jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsx(EmptyState, { image: "SEARCH_DOCUMENT", description: t("table.noResults"), className: "absolute inset-0" })) }) }) }))] }) }), 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: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.count) || 0,
                         }) }), props.pagination.isLoading ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions && jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })] }))] }));
@@ -718,7 +720,7 @@ const useTable = (_a) => {
  *     columns,
  * });
  */
-const useTableSelection = ({ data, defaultSelectedIds, }) => {
+const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true, }) => {
     const [rowSelection, setRowSelection] = useState({});
     useEffect(() => {
         const initialSelection = {};
@@ -759,8 +761,8 @@ const useTableSelection = ({ data, defaultSelectedIds, }) => {
     const selectionTableProps = useMemo(() => ({
         onRowSelectionChange: setRowSelection,
         getRowId: row => row.id,
-        enableRowSelection: true,
-    }), []);
+        enableRowSelection,
+    }), [enableRowSelection]);
     return useMemo(() => ({
         toggleRowSelectionState,
         selectionColumn,

package/package.json

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

package/src/useTableSelection.d.ts

@@ -1,6 +1,6 @@
 import { ColumnDef, RowSelectionState } from "@tanstack/react-table";
 import { Dispatch, SetStateAction } from "react";
-type selectableTableData = {
+export type selectableTableData = {
     id: string;
 } & object;
 export interface TableSelectionReturn<TData extends selectableTableData> {
@@ -21,7 +21,7 @@ export interface TableSelectionReturn<TData extends selectableTableData> {
     selectionTableProps: {
         onRowSelectionChange: Dispatch<SetStateAction<RowSelectionState>>;
         getRowId: (row: TData) => TData["id"];
-        enableRowSelection: true;
+        enableRowSelection: boolean;
     };
     /**
      * A function to update the row selection state.
@@ -39,8 +39,22 @@ export interface TableSelectionReturn<TData extends selectableTableData> {
     toggleRowSelectionState: (id: TData["id"]) => void;
 }
 export interface TableSelectionProps<TData extends selectableTableData> {
+    /**
+     * The data that is displayed in the table.
+     * This must have an `id` field, to enable selection.
+     * The same data should be passed to the `data` prop of the `useTable` Hook.
+     */
     data: TData[];
+    /**
+     * An array of ids of the rows that should be selected by default.
+     * This is useful when you want to preselect rows, for example when editing an existing entity.
+     */
     defaultSelectedIds?: TData["id"][];
+    /**
+     * Whether or not to enable row selection.
+     * If set to `false`, the selection column will still be displayed, but the checkboxes will be disabled.
+     */
+    enableRowSelection?: boolean;
 }
 /**
  * `useTableSelection` is a custom hook that provides functionality for row selection in a table.
@@ -69,5 +83,4 @@ export interface TableSelectionProps<TData extends selectableTableData> {
  *     columns,
  * });
  */
-export declare const useTableSelection: <TData extends selectableTableData>({ data, defaultSelectedIds, }: TableSelectionProps<TData>) => TableSelectionReturn<TData>;
-export {};
+export declare const useTableSelection: <TData extends selectableTableData>({ data, defaultSelectedIds, enableRowSelection, }: TableSelectionProps<TData>) => TableSelectionReturn<TData>;

package/src/useTableSelection.demo.d.ts

@@ -0,0 +1,11 @@
+import { TableSelectionProps, selectableTableData } from "./useTableSelection";
+export interface UseTableSelectionDemoComponentProps<TData extends selectableTableData> extends TableSelectionProps<TData> {
+}
+/**
+ * The `useTableSelection` Hook provides functionality for row selection in a table.
+ *
+ * It returns an object containing methods and values related to row selection.
+ *
+ * It Also returns a `selectionColumn` object that can be used as a column definition in a table.
+ */
+export declare const UseTableSelectionDemoComponent: <TData extends selectableTableData>(props: UseTableSelectionDemoComponentProps<TData>) => JSX.Element;