@trackunit/react-table 0.0.175 → 0.0.176

package/index.cjs.js

@@ -686,6 +686,74 @@ 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 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() })),
+        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 {
+        selectionColumn,
+        selectedIds,
+        selectionTableState,
+        selectionTableProps,
+        setRowSelection,
+    };
+};
+
 //TODO: find a more appropriate place for this file
 /**
  * Convert a sorting state from the TUSort format to the TanStack format.
@@ -752,3 +820,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';
@@ -661,6 +661,74 @@ 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 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() })),
+        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 {
+        selectionColumn,
+        selectedIds,
+        selectionTableState,
+        selectionTableProps,
+        setRowSelection,
+    };
+};
+
 //TODO: find a more appropriate place for this file
 /**
  * Convert a sorting state from the TUSort format to the TanStack format.
@@ -712,4 +780,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.176",
   "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,67 @@
+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>;
+}
+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 {};