@trackunit/react-table 0.0.176 → 0.0.178

package/README.md

@@ -7,7 +7,7 @@ The `@trackunit/react-table` package is the home of our implementation of a Tabl
 
 This library is exposed publicly for use in the  the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).  
 
-To browse all available components visit our [Public Storybook](https://developers.trackunit.com/page/ui-components).
+To browse all available components visit our [Public Storybook](https://apps.iris.trackunit.com/storybook/).
 
 For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
 

package/index.cjs.js

@@ -345,6 +345,7 @@ const Table = (_a) => {
         rowHeight,
     });
     const hasResults = props.getRowModel().rows.length > 0;
+    console.log("onRowClick", props.onRowClick);
     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%",
                         width: "100%",
@@ -366,7 +367,14 @@ const Table = (_a) => {
                                     return (jsxRuntime.jsx(reactTableBaseComponents.Tr, { layout: "flex", style: {
                                             height: `${virtualRow.size}px`,
                                             transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
-                                        }, onClick: () => (props.onRowClick ? props.onRowClick(row) : row.getToggleSelectedHandler()), className: `${(props.onRowClick || row.getCanSelect()) && "cursor-pointer"} hover:bg-neutral-100`, dataTestId: `table-body-row-${virtualRow.index}`, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
+                                        }, onClick: () => {
+                                            if (props.onRowClick) {
+                                                props.onRowClick(row);
+                                            }
+                                            else if (row.getCanSelect()) {
+                                                row.toggleSelected();
+                                            }
+                                        }, className: `${(props.onRowClick || row.getCanSelect()) && "cursor-pointer"} hover:bg-neutral-100`, dataTestId: `table-body-row-${virtualRow.index}`, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
                                             return (jsxRuntime.jsx(reactTableBaseComponents.Td, { key: cell.id,
                                                 style: {
                                                     width: cell.column.getSize(),
@@ -715,6 +723,9 @@ const useTable = (_a) => {
  */
 const useTableSelection = ({ data, }) => {
     const [rowSelection, setRowSelection] = React.useState({});
+    const toggleRowSelectionState = React.useCallback((id) => {
+        setRowSelection(prevRowSelection => (Object.assign(Object.assign({}, prevRowSelection), { [id]: !prevRowSelection[id] })));
+    }, []);
     const selectedIds = React.useMemo(() => Object.entries(rowSelection)
         .filter(([_, selected]) => selected)
         .map(([id]) => id), [rowSelection]);
@@ -724,7 +735,8 @@ const useTableSelection = ({ data, }) => {
             checked: row.getIsSelected(),
             disabled: !row.getCanSelect(),
             indeterminate: row.getIsSomeSelected(),
-            onChange: row.getToggleSelectedHandler() })),
+            onChange: row.getToggleSelectedHandler(),
+            stopPropagation: true })),
         header: ({ table }) => (jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: table.getIsAllRowsSelected(),
             indeterminate: table.getIsSomeRowsSelected(),
             onChange: table.getToggleAllRowsSelectedHandler() })),
@@ -745,13 +757,14 @@ const useTableSelection = ({ data, }) => {
         getRowId: row => row.id,
         enableRowSelection: true,
     }), []);
-    return {
+    return React.useMemo(() => ({
+        toggleRowSelectionState,
         selectionColumn,
         selectedIds,
         selectionTableState,
         selectionTableProps,
         setRowSelection,
-    };
+    }), [selectedIds, selectionColumn, selectionTableProps, selectionTableState, toggleRowSelectionState]);
 };
 
 //TODO: find a more appropriate place for this file

package/index.esm.js

@@ -320,6 +320,7 @@ const Table = (_a) => {
         rowHeight,
     });
     const hasResults = props.getRowModel().rows.length > 0;
+    console.log("onRowClick", props.onRowClick);
     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%",
                         width: "100%",
@@ -341,7 +342,14 @@ const Table = (_a) => {
                                     return (jsx(Tr, { layout: "flex", style: {
                                             height: `${virtualRow.size}px`,
                                             transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
-                                        }, onClick: () => (props.onRowClick ? props.onRowClick(row) : row.getToggleSelectedHandler()), className: `${(props.onRowClick || row.getCanSelect()) && "cursor-pointer"} hover:bg-neutral-100`, dataTestId: `table-body-row-${virtualRow.index}`, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
+                                        }, onClick: () => {
+                                            if (props.onRowClick) {
+                                                props.onRowClick(row);
+                                            }
+                                            else if (row.getCanSelect()) {
+                                                row.toggleSelected();
+                                            }
+                                        }, className: `${(props.onRowClick || row.getCanSelect()) && "cursor-pointer"} hover:bg-neutral-100`, dataTestId: `table-body-row-${virtualRow.index}`, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
                                             return (jsx(Td, { key: cell.id,
                                                 style: {
                                                     width: cell.column.getSize(),
@@ -690,6 +698,9 @@ const useTable = (_a) => {
  */
 const useTableSelection = ({ data, }) => {
     const [rowSelection, setRowSelection] = useState({});
+    const toggleRowSelectionState = useCallback((id) => {
+        setRowSelection(prevRowSelection => (Object.assign(Object.assign({}, prevRowSelection), { [id]: !prevRowSelection[id] })));
+    }, []);
     const selectedIds = useMemo(() => Object.entries(rowSelection)
         .filter(([_, selected]) => selected)
         .map(([id]) => id), [rowSelection]);
@@ -699,7 +710,8 @@ const useTableSelection = ({ data, }) => {
             checked: row.getIsSelected(),
             disabled: !row.getCanSelect(),
             indeterminate: row.getIsSomeSelected(),
-            onChange: row.getToggleSelectedHandler() })),
+            onChange: row.getToggleSelectedHandler(),
+            stopPropagation: true })),
         header: ({ table }) => (jsx(Checkbox, { checked: table.getIsAllRowsSelected(),
             indeterminate: table.getIsSomeRowsSelected(),
             onChange: table.getToggleAllRowsSelectedHandler() })),
@@ -720,13 +732,14 @@ const useTableSelection = ({ data, }) => {
         getRowId: row => row.id,
         enableRowSelection: true,
     }), []);
-    return {
+    return useMemo(() => ({
+        toggleRowSelectionState,
         selectionColumn,
         selectedIds,
         selectionTableState,
         selectionTableProps,
         setRowSelection,
-    };
+    }), [selectedIds, selectionColumn, selectionTableProps, selectionTableState, toggleRowSelectionState]);
 };
 
 //TODO: find a more appropriate place for this file

package/package.json

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

package/src/useTableSelection.d.ts

@@ -32,6 +32,11 @@ 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>;
+    /**
+     * 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> {
     data: TData[];