@vinorcola/dynamic-table 1.2.0 → 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

@@ -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/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.js

@@ -13,20 +13,32 @@ export default function useItems(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/package.json

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