@trackunit/react-table 1.3.21 → 1.3.23

package/index.cjs.js

@@ -501,7 +501,7 @@ const Table = ({ rowHeight = 75, ...props }) => {
                                             maxWidth: header.column.columnDef.maxSize,
                                             textAlign: header.column.columnDef.meta?.alignment || "left",
                                             flexGrow: header.column.columnDef.meta?.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`,
+                                        }, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex pr-3" : "flex"} items-center gap-2 py-2 overflow-hidden 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()), header.column.columnDef.meta?.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] })), !header.column.columnDef.meta?.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`,
@@ -690,19 +690,20 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
  *     columns,
  * });
  */
-const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true, }) => {
+const useTableSelection = ({ data, idKey, defaultSelectedIds, enableRowSelection = true, }) => {
     const [t] = useTranslation();
     const [rowSelection, setRowSelection] = react.useState({});
     react.useEffect(() => {
         const initialSelection = {};
         defaultSelectedIds?.forEach(id => {
-            initialSelection[id] = true;
+            initialSelection[String(id)] = true;
         });
         setRowSelection(() => ({ ...initialSelection }));
     }, [defaultSelectedIds]);
     const toggleRowSelectionState = react.useCallback((id) => {
         setRowSelection(prevRowSelection => {
-            const newSelection = { ...prevRowSelection, [id]: !prevRowSelection[id] };
+            const stringId = String(id);
+            const newSelection = { ...prevRowSelection, [stringId]: !prevRowSelection[stringId] };
             const entries = sharedUtils.objectEntries(newSelection);
             if (entries.length !== 0 && entries.every(([_, selected]) => !selected)) {
                 return {};
@@ -714,35 +715,47 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
         .filter(([_, selected]) => selected)
         .map(([id]) => id), [rowSelection]);
     const columnHelper = react.useMemo(() => reactTable.createColumnHelper(), []);
-    const selectionColumn = react.useMemo(() => columnHelper.accessor(row => row.id, {
-        cell: ({ row }) => (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "ml-1 p-1 flex", // Aligns the checkbox with the one in the header.
-            checked: row.getIsSelected(),
-            disabled: !row.getCanSelect(),
-            indeterminate: row.getIsSomeSelected(),
-            onChange: row.getToggleSelectedHandler(),
-            stopPropagation: true,
-            "aria-label": "rowSelector" })),
-        header: ({ table }) => (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "p-1",
-            checked: table.getIsAllRowsSelected(),
-            indeterminate: table.getIsSomeRowsSelected(),
-            onChange: table.getToggleAllRowsSelectedHandler(),
-            disabled: !data.length })),
+    const selectionColumn = react.useMemo(() => columnHelper.accessor(row => row[idKey], {
+        header: ({ table }) => {
+            const hasRowSelection = table.getState().rowSelection !== undefined;
+            if (!hasRowSelection) {
+                return null;
+            }
+            return (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "ml-4",
+                checked: table.getIsAllRowsSelected(),
+                indeterminate: table.getIsSomeRowsSelected(),
+                onChange: table.getToggleAllRowsSelectedHandler(),
+                disabled: !data.length }));
+        },
+        cell: ({ row, table }) => {
+            const hasRowSelection = table.getState().rowSelection !== undefined;
+            if (!hasRowSelection) {
+                return null;
+            }
+            return (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "flex justify-center",
+                checked: row.getIsSelected(),
+                disabled: !row.getCanSelect(),
+                indeterminate: row.getIsSomeSelected(),
+                onChange: row.getToggleSelectedHandler(),
+                stopPropagation: true,
+                "aria-label": "rowSelector" }));
+        },
         id: "selection",
         enableSorting: false,
         enableResizing: false,
-        size: 60,
+        size: 70,
         meta: {
             required: true,
-            alignment: "left",
+            alignment: "center",
             columnFilterLabel: t("table.selection.label"),
         },
-    }), [columnHelper, data.length, t]);
+    }), [columnHelper, data.length, idKey, t]);
     const selectionTableState = react.useMemo(() => ({ rowSelection }), [rowSelection]);
     const selectionTableProps = react.useMemo(() => ({
         onRowSelectionChange: setRowSelection,
-        getRowId: row => row.id,
+        getRowId: row => String(row[idKey]),
         enableRowSelection,
-    }), [enableRowSelection]);
+    }), [enableRowSelection, idKey]);
     return react.useMemo(() => ({
         toggleRowSelectionState,
         selectionColumn,

package/index.esm.js

@@ -500,7 +500,7 @@ const Table = ({ rowHeight = 75, ...props }) => {
                                             maxWidth: header.column.columnDef.maxSize,
                                             textAlign: header.column.columnDef.meta?.alignment || "left",
                                             flexGrow: header.column.columnDef.meta?.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`,
+                                        }, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex pr-3" : "flex"} items-center gap-2 py-2 overflow-hidden w-full`,
                                                 onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.columnDef.meta?.subHeader ? (jsx(Text, { size: "small", subtle: true, children: header.column.columnDef.meta.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !header.column.columnDef.meta?.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`,
@@ -689,19 +689,20 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
  *     columns,
  * });
  */
-const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true, }) => {
+const useTableSelection = ({ data, idKey, defaultSelectedIds, enableRowSelection = true, }) => {
     const [t] = useTranslation();
     const [rowSelection, setRowSelection] = useState({});
     useEffect(() => {
         const initialSelection = {};
         defaultSelectedIds?.forEach(id => {
-            initialSelection[id] = true;
+            initialSelection[String(id)] = true;
         });
         setRowSelection(() => ({ ...initialSelection }));
     }, [defaultSelectedIds]);
     const toggleRowSelectionState = useCallback((id) => {
         setRowSelection(prevRowSelection => {
-            const newSelection = { ...prevRowSelection, [id]: !prevRowSelection[id] };
+            const stringId = String(id);
+            const newSelection = { ...prevRowSelection, [stringId]: !prevRowSelection[stringId] };
             const entries = objectEntries(newSelection);
             if (entries.length !== 0 && entries.every(([_, selected]) => !selected)) {
                 return {};
@@ -713,35 +714,47 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
         .filter(([_, selected]) => selected)
         .map(([id]) => id), [rowSelection]);
     const columnHelper = useMemo(() => createColumnHelper(), []);
-    const selectionColumn = useMemo(() => columnHelper.accessor(row => row.id, {
-        cell: ({ row }) => (jsx(Checkbox, { className: "ml-1 p-1 flex", // Aligns the checkbox with the one in the header.
-            checked: row.getIsSelected(),
-            disabled: !row.getCanSelect(),
-            indeterminate: row.getIsSomeSelected(),
-            onChange: row.getToggleSelectedHandler(),
-            stopPropagation: true,
-            "aria-label": "rowSelector" })),
-        header: ({ table }) => (jsx(Checkbox, { className: "p-1",
-            checked: table.getIsAllRowsSelected(),
-            indeterminate: table.getIsSomeRowsSelected(),
-            onChange: table.getToggleAllRowsSelectedHandler(),
-            disabled: !data.length })),
+    const selectionColumn = useMemo(() => columnHelper.accessor(row => row[idKey], {
+        header: ({ table }) => {
+            const hasRowSelection = table.getState().rowSelection !== undefined;
+            if (!hasRowSelection) {
+                return null;
+            }
+            return (jsx(Checkbox, { className: "ml-4",
+                checked: table.getIsAllRowsSelected(),
+                indeterminate: table.getIsSomeRowsSelected(),
+                onChange: table.getToggleAllRowsSelectedHandler(),
+                disabled: !data.length }));
+        },
+        cell: ({ row, table }) => {
+            const hasRowSelection = table.getState().rowSelection !== undefined;
+            if (!hasRowSelection) {
+                return null;
+            }
+            return (jsx(Checkbox, { className: "flex justify-center",
+                checked: row.getIsSelected(),
+                disabled: !row.getCanSelect(),
+                indeterminate: row.getIsSomeSelected(),
+                onChange: row.getToggleSelectedHandler(),
+                stopPropagation: true,
+                "aria-label": "rowSelector" }));
+        },
         id: "selection",
         enableSorting: false,
         enableResizing: false,
-        size: 60,
+        size: 70,
         meta: {
             required: true,
-            alignment: "left",
+            alignment: "center",
             columnFilterLabel: t("table.selection.label"),
         },
-    }), [columnHelper, data.length, t]);
+    }), [columnHelper, data.length, idKey, t]);
     const selectionTableState = useMemo(() => ({ rowSelection }), [rowSelection]);
     const selectionTableProps = useMemo(() => ({
         onRowSelectionChange: setRowSelection,
-        getRowId: row => row.id,
+        getRowId: row => String(row[idKey]),
         enableRowSelection,
-    }), [enableRowSelection]);
+    }), [enableRowSelection, idKey]);
     return useMemo(() => ({
         toggleRowSelectionState,
         selectionColumn,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.3.21",
+  "version": "1.3.23",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,15 +15,15 @@
     "jest-fetch-mock": "^3.0.3",
     "@tanstack/react-router": "1.47.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.4.17",
-    "@trackunit/shared-utils": "1.5.17",
-    "@trackunit/css-class-variance-utilities": "1.3.17",
-    "@trackunit/ui-icons": "1.3.17",
-    "@trackunit/react-table-base-components": "1.3.20",
-    "@trackunit/react-table-pagination": "1.3.17",
-    "@trackunit/react-form-components": "1.3.20",
-    "@trackunit/i18n-library-translation": "1.3.18",
-    "@trackunit/react-core-contexts-api": "1.4.18"
+    "@trackunit/react-components": "1.4.18",
+    "@trackunit/shared-utils": "1.5.18",
+    "@trackunit/css-class-variance-utilities": "1.3.18",
+    "@trackunit/ui-icons": "1.3.18",
+    "@trackunit/react-table-base-components": "1.3.22",
+    "@trackunit/react-table-pagination": "1.3.18",
+    "@trackunit/react-form-components": "1.3.22",
+    "@trackunit/i18n-library-translation": "1.3.19",
+    "@trackunit/react-core-contexts-api": "1.4.19"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/useTableSelection.d.ts

@@ -1,13 +1,31 @@
 import { ColumnDef, RowSelectionState } from "@tanstack/react-table";
 import { Dispatch, SetStateAction } from "react";
-export type selectableTableData = {
-    id: string;
-} & object;
-export interface TableSelectionReturn<TData extends selectableTableData> {
+export interface SelectableTableData {
+}
+export interface TableSelectionProps<TData extends SelectableTableData> {
+    /**
+     * The data that is displayed in the table.
+     */
+    data: TData[];
+    /**
+     * The key in TData that should be used as the unique identifier
+     * Example: 'id', 'assetId', 'userId', etc.
+     */
+    idKey: keyof TData & string;
+    /**
+     * An array of ids of the rows that should be selected by default.
+     */
+    defaultSelectedIds?: string[];
+    /**
+     * Whether or not to enable row selection.
+     */
+    enableRowSelection?: boolean;
+}
+export interface TableSelectionReturn<TData extends SelectableTableData> {
     /**
      * An array of the ids of the currently selected rows.
      */
-    selectedIds: TData["id"][];
+    selectedIds: string[];
     /**
      * The current state of row selection.
      * Pass this to the `state` prop of the `useTable` Hook.
@@ -20,7 +38,7 @@ export interface TableSelectionReturn<TData extends selectableTableData> {
      */
     selectionTableProps: {
         onRowSelectionChange: Dispatch<SetStateAction<RowSelectionState>>;
-        getRowId: (row: TData) => TData["id"];
+        getRowId: (row: TData) => string;
         enableRowSelection: boolean;
     };
     /**
@@ -31,30 +49,12 @@ export interface TableSelectionReturn<TData extends selectableTableData> {
     /**
      * A `ColumnDef` object for the selection column, which includes a checkbox in each cell and header.
      */
-    selectionColumn: ColumnDef<TData, string>;
+    selectionColumn: ColumnDef<TData, TData[keyof TData & string]>;
     /**
      * A function to toggle the selection state of a single row.
      * This is usefull for example when you want to select a row when clicking on it, instead of the checkbox.
      */
-    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;
+    toggleRowSelectionState: (id: TData[keyof TData]) => void;
 }
 /**
  * `useTableSelection` is a custom hook that provides functionality for row selection in a table.
@@ -83,4 +83,4 @@ export interface TableSelectionProps<TData extends selectableTableData> {
  *     columns,
  * });
  */
-export declare const useTableSelection: <TData extends selectableTableData>({ data, defaultSelectedIds, enableRowSelection, }: TableSelectionProps<TData>) => TableSelectionReturn<TData>;
+export declare const useTableSelection: <TData extends SelectableTableData>({ data, idKey, defaultSelectedIds, enableRowSelection, }: TableSelectionProps<TData>) => TableSelectionReturn<TData>;

package/src/useTableSelection.demo.d.ts

@@ -1,5 +1,5 @@
-import { TableSelectionProps, selectableTableData } from "./useTableSelection";
-export interface UseTableSelectionDemoComponentProps<TData extends selectableTableData> extends TableSelectionProps<TData> {
+import { SelectableTableData, TableSelectionProps } from "./useTableSelection";
+export interface UseTableSelectionDemoComponentProps<TData extends SelectableTableData> extends TableSelectionProps<TData> {
 }
 /**
  * The `useTableSelection` Hook provides functionality for row selection in a table.
@@ -8,4 +8,4 @@ export interface UseTableSelectionDemoComponentProps<TData extends selectableTab
  *
  * 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>) => import("react/jsx-runtime").JSX.Element;
+export declare const UseTableSelectionDemoComponent: <TData extends SelectableTableData>(props: UseTableSelectionDemoComponentProps<TData>) => import("react/jsx-runtime").JSX.Element;