@vinorcola/dynamic-table 1.1.1 → 1.2.1

package/lib/ColumnDefinition.d.ts

@@ -1,21 +1,25 @@
+import type { ReactNode } from "react";
 import type { BaseItem, Dictionary, ItemKey, Primitive } from "./index.js";
+export type ValueDecorator<Item extends BaseItem, Value extends Primitive> = (value: Value, defaultDisplay: ReactNode, item: Item) => ReactNode;
 export type ValueResolver<Item extends BaseItem, Value extends Primitive> = (item: Item) => Value | null;
-interface BaseColumneDefinition<Value extends Primitive> {
+interface BaseColumneDefinition<Item extends BaseItem, Value extends Primitive> {
     readonly title: string;
     readonly dictionary?: Dictionary<Value> | Promise<Dictionary<Value>>;
+    readonly decorateValue?: ValueDecorator<Item, Value>;
+    readonly decorateNoValue?: () => ReactNode;
 }
 /**
  * A column that will access an item's attribute.
  */
-interface AccessorColumnDefinition<Item extends BaseItem, Value extends Primitive> extends BaseColumneDefinition<Value> {
+interface AccessorColumnDefinition<Item extends BaseItem, Value extends Primitive> extends BaseColumneDefinition<Item, Value> {
     readonly id: ItemKey<Item>;
 }
 /**
  * A column where the value must be resolved.
  */
-interface ResolvedColumnDefinition<Item extends BaseItem, Value extends Primitive> extends BaseColumneDefinition<Value> {
+interface ResolvedColumnDefinition<Item extends BaseItem, Value extends Primitive> extends BaseColumneDefinition<Item, Value> {
     readonly id: string;
-    readonly resolveValue: (item: Item) => Value | null;
+    readonly resolveValue: ValueResolver<Item, Value>;
 }
 export type ColumnDefinition<Item extends BaseItem, Value extends Primitive> = AccessorColumnDefinition<Item, Value> | ResolvedColumnDefinition<Item, Value>;
 export declare function isAccessorColumnDefinition<Item extends BaseItem, Value extends Primitive>(definition: ColumnDefinition<Item, Value>): definition is AccessorColumnDefinition<Item, Value>;

package/lib/DefaultTheme.js

@@ -62,7 +62,7 @@ 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" : "", ")"] })] }));
+    return (_jsxs("th", { className: "relative", children: [props.totalSelected, _jsxs("span", { className: "block text-xs text-stone-400 italic", children: ["(", props.unvisibleSelected, " cach\u00E9", props.unvisibleSelected > 1 ? "s" : "", ")"] })] }));
 }
 export function Header(props) {
     const filterPopup = usePopup();
@@ -110,7 +110,7 @@ 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) => {
+    return (_jsx("td", { className: "cursor-pointer", onClick: (event) => {
             event.preventDefault();
             event.stopPropagation();
             props.onToggle();
@@ -120,14 +120,14 @@ export function Cell(props) {
     return _jsx("td", { children: props.children });
 }
 export function ClickableCell(props) {
-    return (_jsx("td", { className: "!p-0", children: _jsx("a", { href: props.target, className: "block size-full px-4 py-2", children: props.children }) }));
+    return (_jsx("td", { className: "p-0!", children: _jsx("a", { href: props.target, className: "block size-full px-4 py-2", children: props.children }) }));
 }
 export function FooterContainer(props) {
-    return (_jsx("tfoot", { children: _jsx("tr", { children: _jsxs("td", { className: "relative py-0! px-16 h-9 text-center", colSpan: props.totalColums, children: [props.pageSelector, props.itemsPerPageSelector] }) }) }));
+    return (_jsx("tfoot", { children: _jsx("tr", { className: "bg-transparent", children: _jsxs("td", { className: "relative py-0! px-16 h-9 text-center", colSpan: props.totalColums, children: [props.pageSelector, props.itemsPerPageSelector] }) }) }));
 }
 const ITEM_PER_PAGE_CHOICES = [12, 24, 50, 100, 250, 500];
 export function ItemsPerPageSelector(props) {
-    return (_jsx("select", { className: "absolute top-0 right-0 h-full w-14 bg-white outline-none", name: "items-per-page", value: props.itemsPerPage, onChange: (event) => {
+    return (_jsx("select", { className: "absolute top-0 right-0 h-full w-14 bg-white outline-none", value: props.itemsPerPage, onChange: (event) => {
             props.onItemsPerPageChange(Number.parseInt(event.target.value, 10));
         }, children: ITEM_PER_PAGE_CHOICES.map((choice) => (_jsx("option", { value: choice, children: choice }, choice))) }));
 }

package/lib/index.js

@@ -11,13 +11,14 @@ import useSortState from "./useSortState.js";
 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);
+    const items = useItems(props.items, props.itemTarget, columns, props.canSelectItem);
     const { columns: filteredColumns, items: filteredItems, clearFilterState, } = useFilterState(columns, items, props.initialFilterState);
     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);
     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
+    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 &&
+                                        (item.isSelectable ? (_jsx(DynamicTable.SelectionCell, { selected: isItemSelected(item), onToggle: onItemSelectionToggle(item) })) : (_jsx(DynamicTable.Cell, {}))), 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 }) })] })] }) }));
 }

package/lib/useColumns.d.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from "react";
+import type { ValueDecorator } from "./ColumnDefinition.js";
 import type { BaseItem, ColumnDefinition, Dictionary, Primitive, ValueResolver } from "./index.js";
 /**
  * A column that is loading a dictionary.
@@ -8,6 +10,8 @@ export interface LoadingInternalColumn<Item extends BaseItem, Value extends Prim
     readonly loadingDictionary: true;
     readonly dictionary: Promise<Dictionary<Value>>;
     readonly resolveValue: ValueResolver<Item, Value>;
+    readonly decorateValue?: ValueDecorator<Item, Value>;
+    readonly decorateNoValue?: () => ReactNode;
 }
 /**
  * A column fully loaded and usable.
@@ -18,6 +22,8 @@ export interface LoadedInternalColumn<Item extends BaseItem, Value extends Primi
     readonly loadingDictionary: false;
     readonly dictionary?: Dictionary<Value>;
     readonly resolveValue: ValueResolver<Item, Value>;
+    readonly decorateValue?: ValueDecorator<Item, Value>;
+    readonly decorateNoValue?: () => ReactNode;
 }
 /**
  * A column, either in loading state or in loaded state.

package/lib/useColumns.js

@@ -29,6 +29,8 @@ export default function useColumns(definitions) {
                             resolveValue: isAccessorColumnDefinition(definition)
                                 ? (item) => item[definition.id]
                                 : definition.resolveValue,
+                            decorateValue: definition.decorateValue,
+                            decorateNoValue: definition.decorateNoValue,
                         }));
                     }
                 });
@@ -47,6 +49,8 @@ function resolveInitialColumnState(definitions) {
             resolveValue: isAccessorColumnDefinition(definition)
                 ? (item) => item[definition.id]
                 : definition.resolveValue,
+            decorateValue: definition.decorateValue,
+            decorateNoValue: definition.decorateNoValue,
         }
         : {
             id: definition.id,
@@ -56,5 +60,7 @@ function resolveInitialColumnState(definitions) {
             resolveValue: isAccessorColumnDefinition(definition)
                 ? (item) => item[definition.id]
                 : definition.resolveValue,
+            decorateValue: definition.decorateValue,
+            decorateNoValue: definition.decorateNoValue,
         });
 }

package/lib/useItems.d.ts

@@ -31,6 +31,7 @@ export type InternalValue = LoadingInternalValue | LoadedInternalValue;
 export interface InternalItem<Item extends BaseItem> {
     readonly key: Key;
     readonly item: Item;
+    readonly isSelectable: boolean;
     readonly target: string | null;
     readonly values: InternalValue[];
 }
@@ -38,4 +39,4 @@ export interface InternalItem<Item extends BaseItem> {
  * A list of items.
  */
 export type InternalItems<Item extends BaseItem> = readonly InternalItem<Item>[];
-export default function useItems<Item extends BaseItem>(items: Item[], itemTarget: ((item: Item) => string) | undefined, columns: InternalColumns<Item>): InternalItems<Item>;
+export default function useItems<Item extends BaseItem>(items: Item[], itemTarget: ((item: Item) => string) | undefined, columns: InternalColumns<Item>, canSelectItem?: (item: Item) => boolean): InternalItems<Item>;

package/lib/useItems.js

@@ -2,30 +2,43 @@ import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { displayInteger } from "@vinorcola/utils/number";
 import { extractSearchableText } from "@vinorcola/utils/text";
 import { useMemo } from "react";
-export default function useItems(items, itemTarget, columns) {
+export default function useItems(items, itemTarget, columns, canSelectItem) {
     return useMemo(() => items.map((item) => ({
         key: item.id,
         item,
+        isSelectable: canSelectItem === undefined ? true : canSelectItem(item),
         target: itemTarget === undefined ? null : itemTarget(item),
         values: columns.map((column) => resolveInternalValue(item, column)),
-    })), [items, itemTarget, columns]);
+    })), [items, itemTarget, columns, canSelectItem]);
 }
 function resolveInternalValue(item, column) {
     const raw = column.resolveValue(item);
-    return column.loadingDictionary
-        ? {
+    if (column.loadingDictionary) {
+        return {
             column: column.id,
             loading: true,
             raw,
-        }
-        : {
-            column: column.id,
-            loading: false,
-            raw,
-            search: resolveSearchableValue(raw, column.dictionary),
-            sort: resolveSortableValue(raw, column.dictionary),
-            display: resolveDisplayableValue(raw, column.dictionary),
         };
+    }
+    let display = resolveDisplayableValue(raw, column.dictionary);
+    if (raw === null || raw === undefined || raw === "") {
+        if (column.decorateNoValue !== undefined) {
+            display = column.decorateNoValue();
+        }
+    }
+    else {
+        if (column.decorateValue !== undefined) {
+            display = column.decorateValue(raw, display, item);
+        }
+    }
+    return {
+        column: column.id,
+        loading: false,
+        raw,
+        search: resolveSearchableValue(raw, column.dictionary),
+        sort: resolveSortableValue(raw, column.dictionary),
+        display,
+    };
 }
 function resolveSearchableValue(value, dictionary) {
     if (dictionary !== undefined) {

package/lib/useMaskableColumns.d.ts

@@ -29,6 +29,7 @@ export default function useMaskableColumns<Item extends BaseItem>(columns: Inter
         values: import("./useItems.js").InternalValue[];
         key: import("react").Key;
         item: Item;
+        isSelectable: boolean;
         target: string | null;
     }[];
 };

package/lib/useSelection.d.ts

@@ -4,10 +4,12 @@ type ItemSelection<Item extends BaseItem> = Set<Item["id"]>;
 interface SelectableOptions<Item extends BaseItem> {
     selectedItems: ItemSelection<Item>;
     onSelectionChange: (selected: ItemSelection<Item>) => void;
+    canSelectItem?: (item: Item) => boolean;
 }
 interface NonSelectableOptions {
     selectedItems?: never;
     onSelectionChange?: never;
+    canSelectItem?: never;
 }
 export type SelectionOptions<Item extends BaseItem> = SelectableOptions<Item> | NonSelectableOptions;
 export default function useSelection<Item extends BaseItem>(options: SelectionOptions<Item>, visibleItems: InternalItems<Item>): {

package/lib/useSelection.js

@@ -3,28 +3,32 @@ function inSelectionMode(props) {
     return (props.selectedItems !== undefined &&
         props.onSelectionChange !== undefined);
 }
+const EMPTY_SELECTION = new Set();
+const DEFAULT_SELECTION_CHANGE_HANDLER = () => { };
 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]);
+    const selectedItems = isInSelectionMode ? options.selectedItems : EMPTY_SELECTION;
+    const onSelectionChange = options.onSelectionChange ?? DEFAULT_SELECTION_CHANGE_HANDLER;
+    const unvisibleSelectedQuantity = useMemo(() => selectedItems.size > 0
+        ? visibleItems.reduce((quantity, item) => quantity - (selectedItems.has(item.item.id) ? 1 : 0), selectedItems.size)
+        : 0, [visibleItems, selectedItems]);
     return {
         isInSelectionMode,
-        totalSelectedQuantity: isInSelectionMode ? options.selectedItems.size : 0,
-        unvisibleSelectedQuantity: isInSelectionMode ? options.selectedItems.size - visibleSelected : 0,
+        totalSelectedQuantity: selectedItems.size,
+        unvisibleSelectedQuantity,
         isItemSelected: useCallback((item) => isInSelectionMode && options.selectedItems.has(item.item.id), [isInSelectionMode, options.selectedItems]),
         onItemSelectionToggle: useCallback((item) => () => {
-            if (!isInSelectionMode) {
+            if (!isInSelectionMode || !item.isSelectable) {
                 return;
             }
-            const selection = new Set(options.selectedItems);
+            const selection = new Set(selectedItems);
             if (selection.has(item.item.id)) {
                 selection.delete(item.item.id);
             }
             else {
                 selection.add(item.item.id);
             }
-            options.onSelectionChange(selection);
-        }, [isInSelectionMode, options]),
+            onSelectionChange(selection);
+        }, [isInSelectionMode, selectedItems, onSelectionChange]),
     };
 }

package/package.json

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