@trackunit/react-table 0.0.175 → 0.0.177

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(),
@@ -686,6 +694,79 @@ const useTable = (_a) => {
     return memoizedTable;
 };
 
+/**
+ * `useTableSelection` is a custom hook that provides functionality for row selection in a table.
+ * It returns an object containing methods and values related to row selection.
+ *
+ * @template TData - The type of data in the table. It must extend `selectableTableData`, which means it should at least have an `id` field.
+ * @returns {TableSelectionReturn<TData>} An object containing:
+ * - `selectionColumn`: A `ColumnDef` object for the selection column, which includes a checkbox in each cell and header.
+ * - `rowSelection`: The current state of row selection.
+ * - `setRowSelection`: A function to update the row selection state.
+ * @example
+ * const {
+ *   selectionColumn,
+ *   rowSelection,
+ *   setRowSelection,
+ * } = useTableSelection<MyDataType>();
+ *
+ * const columns = [selectionColumn, ...otherColumns]
+ *
+ * const tableProps = useTable({
+ *     ...selectionTableProps,
+ *     state: {
+ *        ...selectionTableState,
+ *     },
+ *     data,
+ *     columns
+ * });
+ */
+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]);
+    const columnHelper = React.useMemo(() => reactTable.createColumnHelper(), []);
+    const selectionColumn = React.useMemo(() => columnHelper.accessor(row => row.id, {
+        cell: ({ row }) => (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "ml-1",
+            checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            indeterminate: row.getIsSomeSelected(),
+            onChange: row.getToggleSelectedHandler(),
+            stopPropagation: true })),
+        header: ({ table }) => (jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: table.getIsAllRowsSelected(),
+            indeterminate: table.getIsSomeRowsSelected(),
+            onChange: table.getToggleAllRowsSelectedHandler() })),
+        id: "selection",
+        enableSorting: false,
+        enableResizing: false,
+        size: 55,
+        meta: {
+            required: true,
+            alignment: "left",
+        },
+    }), [columnHelper]);
+    const selectionTableState = React.useMemo(() => ({
+        rowSelection,
+    }), [rowSelection]);
+    const selectionTableProps = React.useMemo(() => ({
+        onRowSelectionChange: setRowSelection,
+        getRowId: row => row.id,
+        enableRowSelection: true,
+    }), []);
+    return React.useMemo(() => ({
+        toggleRowSelectionState,
+        selectionColumn,
+        selectedIds,
+        selectionTableState,
+        selectionTableProps,
+        setRowSelection,
+    }), [selectedIds, selectionColumn, selectionTableProps, selectionTableState, toggleRowSelectionState]);
+};
+
 //TODO: find a more appropriate place for this file
 /**
  * Convert a sorting state from the TUSort format to the TanStack format.
@@ -752,3 +833,4 @@ exports.fromTanStackToTUSort = fromTanStackToTUSort;
 exports.fromTanStackToTUSortSite = fromTanStackToTUSortSite;
 exports.useRelayPagination = useRelayPagination;
 exports.useTable = useTable;
+exports.useTableSelection = useTableSelection;

package/index.esm.js

@@ -5,11 +5,11 @@ import * as React from 'react';
 import { useMemo, Children, cloneElement, useCallback, useEffect, useRef, useState } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Link } from 'react-router-dom';
-import { flexRender, useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
+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 { useVirtualizer } from '@tanstack/react-virtual';
-import { Toggle, RadioGroup, RadioItem } from '@trackunit/react-form-components';
+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';
@@ -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(),
@@ -661,6 +669,79 @@ const useTable = (_a) => {
     return memoizedTable;
 };
 
+/**
+ * `useTableSelection` is a custom hook that provides functionality for row selection in a table.
+ * It returns an object containing methods and values related to row selection.
+ *
+ * @template TData - The type of data in the table. It must extend `selectableTableData`, which means it should at least have an `id` field.
+ * @returns {TableSelectionReturn<TData>} An object containing:
+ * - `selectionColumn`: A `ColumnDef` object for the selection column, which includes a checkbox in each cell and header.
+ * - `rowSelection`: The current state of row selection.
+ * - `setRowSelection`: A function to update the row selection state.
+ * @example
+ * const {
+ *   selectionColumn,
+ *   rowSelection,
+ *   setRowSelection,
+ * } = useTableSelection<MyDataType>();
+ *
+ * const columns = [selectionColumn, ...otherColumns]
+ *
+ * const tableProps = useTable({
+ *     ...selectionTableProps,
+ *     state: {
+ *        ...selectionTableState,
+ *     },
+ *     data,
+ *     columns
+ * });
+ */
+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]);
+    const columnHelper = useMemo(() => createColumnHelper(), []);
+    const selectionColumn = useMemo(() => columnHelper.accessor(row => row.id, {
+        cell: ({ row }) => (jsx(Checkbox, { className: "ml-1",
+            checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            indeterminate: row.getIsSomeSelected(),
+            onChange: row.getToggleSelectedHandler(),
+            stopPropagation: true })),
+        header: ({ table }) => (jsx(Checkbox, { checked: table.getIsAllRowsSelected(),
+            indeterminate: table.getIsSomeRowsSelected(),
+            onChange: table.getToggleAllRowsSelectedHandler() })),
+        id: "selection",
+        enableSorting: false,
+        enableResizing: false,
+        size: 55,
+        meta: {
+            required: true,
+            alignment: "left",
+        },
+    }), [columnHelper]);
+    const selectionTableState = useMemo(() => ({
+        rowSelection,
+    }), [rowSelection]);
+    const selectionTableProps = useMemo(() => ({
+        onRowSelectionChange: setRowSelection,
+        getRowId: row => row.id,
+        enableRowSelection: true,
+    }), []);
+    return useMemo(() => ({
+        toggleRowSelectionState,
+        selectionColumn,
+        selectedIds,
+        selectionTableState,
+        selectionTableProps,
+        setRowSelection,
+    }), [selectedIds, selectionColumn, selectionTableProps, selectionTableState, toggleRowSelectionState]);
+};
+
 //TODO: find a more appropriate place for this file
 /**
  * Convert a sorting state from the TUSort format to the TanStack format.
@@ -712,4 +793,4 @@ const fromTanStackToTUSortSite = (input) => {
  */
 setupLibraryTranslations();
 
-export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTUSortToTanStackSite, fromTanStackToTUSort, fromTanStackToTUSortSite, useRelayPagination, useTable };
+export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTUSortToTanStackSite, fromTanStackToTUSort, fromTanStackToTUSortSite, useRelayPagination, useTable, useTableSelection };

package/package.json

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

package/src/index.d.ts

@@ -7,5 +7,6 @@ export * from "./menus/Sorting";
 export * from "./types";
 export * from "./useRelayPagination";
 export * from "./useTable";
+export * from "./useTableSelection";
 export * from "./utils";
 export type SortingState = ColumnSort[];

package/src/useTableSelection.d.ts

@@ -0,0 +1,72 @@
+import { ColumnDef, RowSelectionState } from "@tanstack/react-table";
+import { Dispatch, SetStateAction } from "react";
+type selectableTableData = {
+    id: string;
+} & object;
+export interface TableSelectionReturn<TData extends selectableTableData> {
+    /**
+     * An array of the ids of the currently selected rows.
+     */
+    selectedIds: TData["id"][];
+    /**
+     * The current state of row selection.
+     * Pass this to the `state` prop of the `useTable` Hook.
+     */
+    selectionTableState: {
+        rowSelection?: RowSelectionState | undefined;
+    };
+    /**
+     * Props to pass to the `useTable` Hook.
+     */
+    selectionTableProps: {
+        onRowSelectionChange: Dispatch<SetStateAction<RowSelectionState>>;
+        getRowId: (row: TData) => TData["id"];
+        enableRowSelection: true;
+    };
+    /**
+     * A function to update the row selection state.
+     * Pass this to the `onRowSelectionChange` prop of the `useTable` Hook.
+     */
+    setRowSelection: Dispatch<SetStateAction<RowSelectionState>>;
+    /**
+     * 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[];
+}
+/**
+ * `useTableSelection` is a custom hook that provides functionality for row selection in a table.
+ * It returns an object containing methods and values related to row selection.
+ *
+ * @template TData - The type of data in the table. It must extend `selectableTableData`, which means it should at least have an `id` field.
+ * @returns {TableSelectionReturn<TData>} An object containing:
+ * - `selectionColumn`: A `ColumnDef` object for the selection column, which includes a checkbox in each cell and header.
+ * - `rowSelection`: The current state of row selection.
+ * - `setRowSelection`: A function to update the row selection state.
+ * @example
+ * const {
+ *   selectionColumn,
+ *   rowSelection,
+ *   setRowSelection,
+ * } = useTableSelection<MyDataType>();
+ *
+ * const columns = [selectionColumn, ...otherColumns]
+ *
+ * const tableProps = useTable({
+ *     ...selectionTableProps,
+ *     state: {
+ *        ...selectionTableState,
+ *     },
+ *     data,
+ *     columns
+ * });
+ */
+export declare const useTableSelection: <TData extends selectableTableData>({ data, }: TableSelectionProps<TData>) => TableSelectionReturn<TData>;
+export {};