@vinorcola/dynamic-table 1.0.1 → 1.1.0

package/README.md

@@ -0,0 +1,19 @@
+
+## Installation
+
+```
+npm install @vinorcola/dynamic-table
+```
+
+Then, if you use TailwindCSS, you must source the stylesheet file of the library within your file:
+
+```css
+/* Example of style.css */
+@import "tailwindcss";
+@source "../node_modules/@vinorcola/dynamic-table";
+```
+
+If you want to customize rendering, you can create a new file that re-export the dynamic table with new components:
+
+```typescript
+```

package/lib/DefaultTheme.d.ts

@@ -21,6 +21,11 @@ export declare function ColumnsPopup<Item extends BaseItem>(props: ColumnsPopupP
 export declare function Table(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare function HeaderContainer(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare function HeaderLine(props: Props): import("react/jsx-runtime").JSX.Element;
+export interface SelectionHeaderProps extends Props {
+    totalSelected: number;
+    unvisibleSelected: number;
+}
+export declare function SelectionHeader(props: SelectionHeaderProps): import("react/jsx-runtime").JSX.Element;
 export interface HeaderProps<Item extends BaseItem, Value extends Primitive> extends Props {
     column: InternalColumn<Item, Value>;
 }
@@ -51,6 +56,11 @@ export interface SelectionFilterPopupProps<Value extends Primitive> {
 export declare function SelectionFilterPopup<Value extends Primitive>(props: SelectionFilterPopupProps<Value>): import("react/jsx-runtime").JSX.Element;
 export declare function BodyContainer(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare function Line(props: Props): import("react/jsx-runtime").JSX.Element;
+interface SelectionCellProps extends Props {
+    selected: boolean;
+    onToggle: () => void;
+}
+export declare function SelectionCell(props: SelectionCellProps): import("react/jsx-runtime").JSX.Element;
 export declare function Cell(props: Props): import("react/jsx-runtime").JSX.Element;
 export interface ClickableProps extends Props {
     target: string;
@@ -108,3 +118,4 @@ export interface PopupProps extends Props {
 }
 export declare function Popup(props: PopupProps): import("react/jsx-runtime").JSX.Element;
 export declare function Loader(): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/DefaultTheme.js

@@ -61,6 +61,9 @@ export function HeaderContainer(props) {
 export function HeaderLine(props) {
     return _jsx("tr", { className: "bg-table-header", children: props.children });
 }
+export function SelectionHeader(props) {
+    return (_jsxs("th", { className: "relative", children: [props.totalSelected, _jsxs("span", { className: "text-sm text-stone-500 italic", children: ["(", props.unvisibleSelected, " cach\u00E9", props.unvisibleSelected > 1 ? "s" : "", ")"] })] }));
+}
 export function Header(props) {
     const filterPopup = usePopup();
     const column = props.column;
@@ -106,6 +109,13 @@ export function BodyContainer(props) {
 export function Line(props) {
     return (_jsx("tr", { className: "even:[&>*]:bg-table-line-even odd:[&>*]:bg-table-line-odd hover:bg-table-line-hover", children: props.children }));
 }
+export function SelectionCell(props) {
+    return (_jsx("td", { onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            props.onToggle();
+        }, children: props.selected ? _jsx(CheckedIcon, {}) : _jsx(UncheckedIcon, {}) }));
+}
 export function Cell(props) {
     return _jsx("td", { children: props.children });
 }

package/lib/index.d.ts

@@ -3,19 +3,20 @@ import type { ColumnDefinition } from "./ColumnDefinition.js";
 import { type FilterState } from "./useFilterState.js";
 import type { ColumnsMaskState } from "./useMaskableColumns.js";
 import { type PaginationState } from "./usePagination.js";
+import { type SelectionOptions } from "./useSelection.js";
 import { type SortState } from "./useSortState.js";
 export type Primitive = boolean | Date | number | string;
 export type BaseItem = Record<string, any> & {
     readonly id: ReactKey;
 };
 export type ItemKey<Item extends BaseItem> = Extract<keyof Item, string>;
-export type { ColumnDefinition, ValueResolver } from "./ColumnDefinition";
-export { default as Dictionary } from "./Dictionary";
-export type { FilterState } from "./useFilterState";
-export type { SortDirection, SortState } from "./useSortState";
-export type { ColumnsMaskState } from "./useMaskableColumns";
-export type { PaginationState } from "./usePagination";
-interface Props<Item extends BaseItem> {
+export type { ColumnDefinition, ValueResolver } from "./ColumnDefinition.js";
+export { default as Dictionary } from "./Dictionary.js";
+export type { FilterState } from "./useFilterState.js";
+export type { SortDirection, SortState } from "./useSortState.js";
+export type { ColumnsMaskState } from "./useMaskableColumns.js";
+export type { PaginationState } from "./usePagination.js";
+interface BaseProps<Item extends BaseItem> {
     items: Item[];
     columns: ColumnDefinition<Item, Primitive>[];
     itemTarget?: (item: Item) => string;
@@ -24,6 +25,7 @@ interface Props<Item extends BaseItem> {
     initialColumnsMaskState?: ColumnsMaskState;
     initialPaginationState?: PaginationState;
 }
+type Props<Item extends BaseItem> = BaseProps<Item> & SelectionOptions<Item>;
 declare function DynamicTable<Item extends BaseItem>(props: Props<Item>): import("react/jsx-runtime").JSX.Element;
 declare namespace DynamicTable {
     var TableContainer: typeof import("./DefaultTheme.js").TableContainer;
@@ -32,6 +34,7 @@ declare namespace DynamicTable {
     var Table: typeof import("./DefaultTheme.js").Table;
     var HeaderContainer: typeof import("./DefaultTheme.js").HeaderContainer;
     var HeaderLine: typeof import("./DefaultTheme.js").HeaderLine;
+    var SelectionHeader: typeof import("./DefaultTheme.js").SelectionHeader;
     var Header: typeof import("./DefaultTheme.js").Header;
     var HeaderActions: typeof import("./DefaultTheme.js").HeaderActions;
     var HeaderStatus: typeof import("./DefaultTheme.js").HeaderStatus;
@@ -39,6 +42,7 @@ declare namespace DynamicTable {
     var SelectionFilterPopup: typeof import("./DefaultTheme.js").SelectionFilterPopup;
     var BodyContainer: typeof import("./DefaultTheme.js").BodyContainer;
     var Line: typeof import("./DefaultTheme.js").Line;
+    var SelectionCell: typeof import("./DefaultTheme.js").SelectionCell;
     var Cell: typeof import("./DefaultTheme.js").Cell;
     var ClickableCell: typeof import("./DefaultTheme.js").ClickableCell;
     var FooterContainer: typeof import("./DefaultTheme.js").FooterContainer;

package/lib/index.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BodyContainer, Button, Cell, ClickableCell, ColumnsPopup, Controller, FooterContainer, Header, HeaderActions, HeaderContainer, HeaderLine, HeaderStatus, ItemsPerPageSelector, Line, Loader, PageButton, PageSelector, Popup, SearchFilterPopup, SelectionFilterPopup, Table, TableContainer, } from "./DefaultTheme.js";
+import { BodyContainer, Button, Cell, ClickableCell, ColumnsPopup, Controller, FooterContainer, Header, HeaderActions, HeaderContainer, HeaderLine, HeaderStatus, ItemsPerPageSelector, Line, Loader, PageButton, PageSelector, Popup, SearchFilterPopup, SelectionCell, SelectionFilterPopup, SelectionHeader, Table, TableContainer, } from "./DefaultTheme.js";
 import UniquePopupProvider from "./UniquePopupProvider.js";
 import useColumns from "./useColumns.js";
 import useFilterState from "./useFilterState.js";
 import useItems from "./useItems.js";
 import useMaskableColumns from "./useMaskableColumns.js";
 import usePagination from "./usePagination.js";
+import useSelection from "./useSelection.js";
 import useSortState from "./useSortState.js";
-export { default as Dictionary } from "./Dictionary";
+export { default as Dictionary } from "./Dictionary.js";
 export default function DynamicTable(props) {
     const columns = useColumns(props.columns);
     const items = useItems(props.items, props.itemTarget, columns);
@@ -15,9 +16,10 @@ export default function DynamicTable(props) {
     const { columns: sortedColumns, items: sortedItems, clearSortState, } = useSortState(filteredColumns, filteredItems, props.initialSortState);
     const { allColumns, columns: displayedColumns, items: displayedItems, } = useMaskableColumns(sortedColumns, sortedItems, props.initialColumnsMaskState);
     const { items: paginatedItems, itemsPerPage, onItemsPerPageChange, totalPages, currentPage, onCurrentPageChange, } = usePagination(displayedItems, props.initialPaginationState);
-    return (_jsx(UniquePopupProvider, { children: _jsxs(DynamicTable.TableContainer, { children: [_jsx(DynamicTable.Controller, { columns: allColumns, clearFilterState: clearFilterState, clearSortState: clearSortState }), _jsxs(DynamicTable.Table, { children: [_jsx(DynamicTable.HeaderContainer, { children: _jsx(DynamicTable.HeaderLine, { children: displayedColumns.map((column) => (_jsx(DynamicTable.Header, { column: column, children: column.title }, column.id))) }) }), _jsx(DynamicTable.BodyContainer, { children: paginatedItems.map((item) => (_jsx(DynamicTable.Line, { children: item.target !== null
-                                    ? item.values.map((value) => (_jsx(DynamicTable.ClickableCell, { target: item.target, children: value.loading ? _jsx(DynamicTable.Loader, {}) : value.display }, value.column)))
-                                    : item.values.map((value) => (_jsx(DynamicTable.Cell, { children: value.loading ? _jsx(DynamicTable.Loader, {}) : value.display }, value.column))) }, item.key))) }), _jsx(DynamicTable.FooterContainer, { totalColums: displayedColumns.length, pageSelector: _jsx(DynamicTable.PageSelector, { totalPages: totalPages, currentPage: currentPage, onCurrentPageChange: onCurrentPageChange }), itemsPerPageSelector: _jsx(DynamicTable.ItemsPerPageSelector, { itemsPerPage: itemsPerPage, onItemsPerPageChange: onItemsPerPageChange }) })] })] }) }));
+    const { isInSelectionMode, totalSelectedQuantity, unvisibleSelectedQuantity, isItemSelected, onItemSelectionToggle, } = useSelection(props, paginatedItems);
+    return (_jsx(UniquePopupProvider, { children: _jsxs(DynamicTable.TableContainer, { children: [_jsx(DynamicTable.Controller, { columns: allColumns, clearFilterState: clearFilterState, clearSortState: clearSortState }), _jsxs(DynamicTable.Table, { children: [_jsx(DynamicTable.HeaderContainer, { children: _jsxs(DynamicTable.HeaderLine, { children: [isInSelectionMode && (_jsx(DynamicTable.SelectionHeader, { totalSelected: totalSelectedQuantity, unvisibleSelected: unvisibleSelectedQuantity })), displayedColumns.map((column) => (_jsx(DynamicTable.Header, { column: column, children: column.title }, column.id)))] }) }), _jsx(DynamicTable.BodyContainer, { children: paginatedItems.map((item) => (_jsxs(DynamicTable.Line, { children: [isInSelectionMode && (_jsx(DynamicTable.SelectionCell, { selected: isItemSelected(item), onToggle: onItemSelectionToggle(item) })), item.target !== null
+                                        ? item.values.map((value) => (_jsx(DynamicTable.ClickableCell, { target: item.target, children: value.loading ? _jsx(DynamicTable.Loader, {}) : value.display }, value.column)))
+                                        : item.values.map((value) => (_jsx(DynamicTable.Cell, { children: value.loading ? _jsx(DynamicTable.Loader, {}) : value.display }, value.column)))] }, item.key))) }), _jsx(DynamicTable.FooterContainer, { totalColums: displayedColumns.length, pageSelector: _jsx(DynamicTable.PageSelector, { totalPages: totalPages, currentPage: currentPage, onCurrentPageChange: onCurrentPageChange }), itemsPerPageSelector: _jsx(DynamicTable.ItemsPerPageSelector, { itemsPerPage: itemsPerPage, onItemsPerPageChange: onItemsPerPageChange }) })] })] }) }));
 }
 DynamicTable.TableContainer = TableContainer;
 DynamicTable.Controller = Controller;
@@ -25,6 +27,7 @@ DynamicTable.ColumnsPopup = ColumnsPopup;
 DynamicTable.Table = Table;
 DynamicTable.HeaderContainer = HeaderContainer;
 DynamicTable.HeaderLine = HeaderLine;
+DynamicTable.SelectionHeader = SelectionHeader;
 DynamicTable.Header = Header;
 DynamicTable.HeaderActions = HeaderActions;
 DynamicTable.HeaderStatus = HeaderStatus;
@@ -32,6 +35,7 @@ DynamicTable.SearchFilterPopup = SearchFilterPopup;
 DynamicTable.SelectionFilterPopup = SelectionFilterPopup;
 DynamicTable.BodyContainer = BodyContainer;
 DynamicTable.Line = Line;
+DynamicTable.SelectionCell = SelectionCell;
 DynamicTable.Cell = Cell;
 DynamicTable.ClickableCell = ClickableCell;
 DynamicTable.FooterContainer = FooterContainer;

package/lib/useSelection.d.ts

@@ -0,0 +1,20 @@
+import type { BaseItem } from "./index.js";
+import type { InternalItem, InternalItems } from "./useItems.js";
+type ItemSelection<Item extends BaseItem> = Set<Item["id"]>;
+interface SelectableOptions<Item extends BaseItem> {
+    selectedItems: ItemSelection<Item>;
+    onSelectionChange: (selected: ItemSelection<Item>) => void;
+}
+interface NonSelectableOptions {
+    selectedItems: never;
+    onSelectionChange: never;
+}
+export type SelectionOptions<Item extends BaseItem> = SelectableOptions<Item> | NonSelectableOptions;
+export default function useSelection<Item extends BaseItem>(options: SelectionOptions<Item>, visibleItems: InternalItems<Item>): {
+    isInSelectionMode: boolean;
+    totalSelectedQuantity: number;
+    unvisibleSelectedQuantity: number;
+    isItemSelected: (item: InternalItem<Item>) => boolean;
+    onItemSelectionToggle: (item: InternalItem<Item>) => () => void;
+};
+export {};

package/lib/useSelection.js

@@ -0,0 +1,30 @@
+import { useCallback, useMemo } from "react";
+function inSelectionMode(props) {
+    return (props.selectedItems !== undefined &&
+        props.onSelectionChange !== undefined);
+}
+export default function useSelection(options, visibleItems) {
+    const isInSelectionMode = inSelectionMode(options);
+    const visibleSelected = useMemo(() => isInSelectionMode
+        ? visibleItems.reduce((quantity, item) => quantity - (options.selectedItems.has(item.item.id) ? 1 : 0), 0)
+        : 0, [isInSelectionMode, visibleItems, options.selectedItems]);
+    return {
+        isInSelectionMode,
+        totalSelectedQuantity: options.selectedItems.size,
+        unvisibleSelectedQuantity: options.selectedItems.size - visibleSelected,
+        isItemSelected: useCallback((item) => isInSelectionMode && options.selectedItems.has(item.item.id), [isInSelectionMode, options.selectedItems]),
+        onItemSelectionToggle: useCallback((item) => () => {
+            if (!isInSelectionMode) {
+                return;
+            }
+            const selection = new Set(options.selectedItems);
+            if (selection.has(item.item.id)) {
+                selection.delete(item.item.id);
+            }
+            else {
+                selection.add(item.item.id);
+            }
+            options.onSelectionChange(selection);
+        }, [isInSelectionMode, options]),
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinorcola/dynamic-table",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A table to ease the display of a filterable, sortable and paginable dataset.",
   "keywords": [
     "table",