@vinorcola/dynamic-table 1.0.0

package/assets/DefaultTheme.css

@@ -0,0 +1,6 @@
+@theme {
+    --color-table-header: var(--color-stone-300);
+    --color-table-line-even: color-mix(in oklab, var(--color-stone-300), transparent 70%);
+    --color-table-line-odd: color-mix(in oklab, var(--color-stone-100), transparent 70%);
+    --color-table-line-hover: color-mix(in oklab, var(--color-stone-500), transparent 50%);
+}

package/lib/ColumnDefinition.d.ts

@@ -0,0 +1,22 @@
+import type { BaseItem, Dictionary, ItemKey, Primitive } from ".";
+export type ValueResolver<Item extends BaseItem, Value extends Primitive> = (item: Item) => Value | null;
+interface BaseColumneDefinition<Value extends Primitive> {
+    readonly title: string;
+    readonly dictionary?: Dictionary<Value> | Promise<Dictionary<Value>>;
+}
+/**
+ * A column that will access an item's attribute.
+ */
+interface AccessorColumnDefinition<Item extends BaseItem, Value extends Primitive> extends BaseColumneDefinition<Value> {
+    readonly id: ItemKey<Item>;
+}
+/**
+ * A column where the value must be resolved.
+ */
+interface ResolvedColumnDefinition<Item extends BaseItem, Value extends Primitive> extends BaseColumneDefinition<Value> {
+    readonly id: string;
+    readonly resolveValue: (item: Item) => Value | null;
+}
+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>;
+export {};

package/lib/ColumnDefinition.js

@@ -0,0 +1,3 @@
+export function isAccessorColumnDefinition(definition) {
+    return definition.resolveValue === undefined;
+}

package/lib/DefaultTheme.d.ts

@@ -0,0 +1,110 @@
+import { type ReactNode } from "react";
+import type { InternalColumn, InternalColumns } from "./useColumns";
+import { type FilterType } from "./useFilterState";
+import { type InternalSortableColumn } from "./useSortState";
+import type { BaseItem, Dictionary, Primitive } from ".";
+export interface Props {
+    children?: ReactNode;
+}
+export declare function TableContainer(props: Props): import("react/jsx-runtime").JSX.Element;
+export interface ControllerProps<Item extends BaseItem> {
+    columns: InternalColumns<Item>;
+    clearFilterState: () => void;
+    clearSortState: () => void;
+}
+export declare function Controller<Item extends BaseItem>(props: ControllerProps<Item>): import("react/jsx-runtime").JSX.Element;
+export interface ColumnsPopupProps<Item extends BaseItem> {
+    columns: InternalColumns<Item>;
+    onDismiss: () => void;
+}
+export declare function ColumnsPopup<Item extends BaseItem>(props: ColumnsPopupProps<Item>): import("react/jsx-runtime").JSX.Element;
+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 HeaderProps<Item extends BaseItem, Value extends Primitive> extends Props {
+    column: InternalColumn<Item, Value>;
+}
+export declare function Header<Item extends BaseItem, Value extends Primitive>(props: HeaderProps<Item, Value>): import("react/jsx-runtime").JSX.Element;
+export interface HeaderActionsProps {
+    filterType?: FilterType;
+    onFilterPopupToggle?: () => void;
+    onDisplayToggle?: () => void;
+}
+export declare function HeaderActions(props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+export interface HeaderStatusProps {
+    filterType?: FilterType;
+    sortState?: NonNullable<InternalSortableColumn<BaseItem, Primitive>["sorted"]>;
+}
+export declare function HeaderStatus(props: HeaderStatusProps): import("react/jsx-runtime").JSX.Element | null;
+export interface SearchFilterPopupProps {
+    searchText: string;
+    onSearchTextChange: (searchText: string) => void;
+    onDismiss: () => void;
+}
+export declare function SearchFilterPopup(props: SearchFilterPopupProps): import("react/jsx-runtime").JSX.Element;
+export interface SelectionFilterPopupProps<Value extends Primitive> {
+    dictionary: Dictionary<Value> | null;
+    hiddenValues: Value[];
+    onHiddenValuesChange: (hiddenValues: Value[]) => void;
+    onDismiss: () => void;
+}
+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;
+export declare function Cell(props: Props): import("react/jsx-runtime").JSX.Element;
+export interface ClickableProps extends Props {
+    target: string;
+}
+export declare function ClickableCell(props: ClickableProps): import("react/jsx-runtime").JSX.Element;
+export interface FooterContainerProps {
+    totalColums: number;
+    pageSelector: ReactNode;
+    itemsPerPageSelector: ReactNode;
+}
+export declare function FooterContainer(props: FooterContainerProps): import("react/jsx-runtime").JSX.Element;
+export interface ItemsPerPageSelectorProps extends Props {
+    itemsPerPage: number;
+    onItemsPerPageChange: (itemsPerPage: number) => void;
+}
+export declare function ItemsPerPageSelector(props: ItemsPerPageSelectorProps): import("react/jsx-runtime").JSX.Element;
+export interface PageSelectorProps extends Props {
+    totalPages: number;
+    currentPage: number;
+    onCurrentPageChange: (page: number) => void;
+}
+export declare function PageSelector(props: PageSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export interface PageButtonProps extends Props {
+    enabled: boolean;
+    active?: boolean;
+    onClick: () => void;
+}
+export declare function PageButton(props: PageButtonProps): import("react/jsx-runtime").JSX.Element;
+export interface ButtonProps extends Props {
+    className?: string;
+    disabled?: boolean;
+    onClick: () => void;
+    hoverChildren?: ReactNode;
+}
+/**
+ * A customizable button.
+ *
+ * The button text color is defined using the `--text-color` css property. It uses by default `--color-base-content`
+ * css property or fallback to black if `--color-base-content` is not defined. You can override this value by giving an
+ * appropriate className, for example:
+ * `<DynamicTable.Button className="[--text-color:var(--color-stone-400)]">...</DynamicTable.Button>`
+ *
+ * The button background color is defined using the `--bg-color` css property. It uses by default `--color-stone-400`
+ * css property. You can override this value by giving an appropriate className, for example:
+ * `<DynamicTable.Button className="[--bg-color:var(--color-orange-400)]">...</DynamicTable.Button>`
+ * Note that the color defined by `--bg-color` will be used when the button is hovered. A less saturated color will be
+ * used for non-hovered button (by default, --bg-color mix with 50% transparent). You can also override the default
+ * background color (when button is non-hovered) by defining a custom `--bg-default-color`, for example:
+ * `<DynamicTable.Button className="[--bg-default-color:transparent]">...</DynamicTable.Button>`
+ */
+export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export interface PopupProps extends Props {
+    className?: string;
+    onDismiss: () => void;
+}
+export declare function Popup(props: PopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function Loader(): import("react/jsx-runtime").JSX.Element;

package/lib/DefaultTheme.js

@@ -0,0 +1,197 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import cx from "@vinorcola/utils/classNames";
+import { useEffect, useMemo } from "react";
+import { AscSortIcon, CheckedIcon, CloseIcon, ColumnsIcon, DescSortIcon, FilterIcon, HideIcon, NextIcon, PreviousIcon, SearchIcon, SortIcon, UncheckedIcon, } from "./Icon";
+import { usePopup } from "./UniquePopupProvider";
+import { isSearchable, isSelectable } from "./useFilterState";
+import { isMaskable } from "./useMaskableColumns";
+import { isSortable } from "./useSortState";
+import DynamicTable from ".";
+export function TableContainer(props) {
+    return _jsx("div", { children: props.children });
+}
+export function Controller(props) {
+    const columnListPopup = usePopup();
+    const hasHiddenColumns = props.columns.some((column) => isMaskable(column) && !column.displayed);
+    const hasFilteredColumns = props.columns.some((column) => (isSearchable(column) && column.searchText !== null) ||
+        (isSelectable(column) && column.hiddenValues.length > 0));
+    const hasHiddenFilteredColumns = hasHiddenColumns &&
+        hasFilteredColumns &&
+        props.columns.some((column) => isMaskable(column) &&
+            !column.displayed &&
+            ((isSearchable(column) && column.searchText !== null) ||
+                (isSelectable(column) && column.hiddenValues.length > 0)));
+    const hasSortedColumns = props.columns.some((column) => isSortable(column) && column.sorted !== null);
+    const hasHiddenSortedColumns = hasHiddenColumns &&
+        hasSortedColumns &&
+        props.columns.some((column) => isMaskable(column) && !column.displayed && isSortable(column) && column.sorted !== null);
+    return (_jsxs("div", { className: "relative", children: [_jsxs("ul", { className: "flex justify-end", children: [_jsx("li", { children: _jsx(DynamicTable.Button, { className: cx(hasHiddenFilteredColumns
+                                ? "[--bg-color:var(--color-orange-400)]"
+                                : hasFilteredColumns && "[--bg-color:var(--color-lime-400)]"), disabled: !hasFilteredColumns, hoverChildren: _jsx(CloseIcon, {}), onClick: props.clearFilterState, children: _jsx(FilterIcon, {}) }) }), _jsx("li", { children: _jsx(DynamicTable.Button, { className: cx(hasHiddenSortedColumns
+                                ? "[--bg-color:var(--color-orange-400)]"
+                                : hasSortedColumns && "[--bg-color:var(--color-sky-400)]"), disabled: !hasSortedColumns, hoverChildren: _jsx(CloseIcon, {}), onClick: props.clearSortState, children: _jsx(SortIcon, {}) }) }), _jsx("li", { children: _jsx(DynamicTable.Button, { className: cx(hasHiddenColumns
+                                ? "[--bg-color:var(--color-orange-400)]"
+                                : "[--bg-default-color:transparent]"), onClick: columnListPopup.show, children: _jsx(ColumnsIcon, {}) }) })] }), columnListPopup.display && (_jsx(DynamicTable.ColumnsPopup, { columns: props.columns, onDismiss: columnListPopup.dismiss }))] }));
+}
+export function ColumnsPopup(props) {
+    return (_jsx(DynamicTable.Popup, { className: "right-2", onDismiss: props.onDismiss, children: _jsx("main", { children: _jsx("ul", { className: "min-w-40", children: props.columns.map((column) => {
+                    const maskable = isMaskable(column);
+                    const displayed = !maskable || column.displayed;
+                    const sorted = isSortable(column) && column.sorted !== null;
+                    const searched = isSearchable(column) && column.searchText !== null;
+                    const selected = isSelectable(column) && column.hiddenValues.length > 0;
+                    return (_jsxs("li", { className: cx("flex items-center gap-1 pl-2 pr-6 py-0.5", maskable && "cursor-pointer", searched || selected
+                            ? displayed
+                                ? "bg-lime-200 hover:bg-lime-300"
+                                : "bg-orange-200 hover:bg-orange-300"
+                            : sorted
+                                ? displayed
+                                    ? "bg-sky-200 hover:bg-sky-300"
+                                    : "bg-orange-200 hover:bg-orange-300"
+                                : "hover:bg-stone-500/40"), onClick: maskable ? () => column.onDisplayToggle() : undefined, children: [displayed ? _jsx(CheckedIcon, {}) : _jsx(UncheckedIcon, {}), column.title, (sorted || searched || selected) && (_jsxs("span", { className: "absolute right-1", children: [sorted &&
+                                        (column.sorted.direction === "asc" ? _jsx(AscSortIcon, {}) : _jsx(DescSortIcon, {})), searched && (_jsx("span", { className: "text-xs", children: _jsx(SearchIcon, {}) })), selected && (_jsx("span", { className: "text-xs", children: _jsx(FilterIcon, {}) }))] }))] }, column.id));
+                }) }) }) }));
+}
+export function Table(props) {
+    return _jsx("table", { className: "table table-pin-rows", children: props.children });
+}
+export function HeaderContainer(props) {
+    return _jsx("thead", { children: props.children });
+}
+export function HeaderLine(props) {
+    return _jsx("tr", { className: "bg-table-header", children: props.children });
+}
+export function Header(props) {
+    const filterPopup = usePopup();
+    const column = props.column;
+    const sortable = isSortable(column);
+    const searchable = isSearchable(column);
+    const selectable = isSelectable(column);
+    const maskable = isMaskable(column);
+    return (_jsxs("th", { className: cx("relative pr-8 hover:[&_.column-actions]:inline", sortable && "hover:bg-stone-500/20 cursor-pointer"), onClick: sortable ? () => column.onSortToggle() : undefined, children: [props.children, _jsxs("span", { className: "absolute top-0 bottom-0 right-0 px-1 flex items-center gap-1.5", children: [_jsx(DynamicTable.HeaderActions, { filterType: searchable ? "search" : selectable ? "selection" : undefined, onFilterPopupToggle: searchable || selectable ? filterPopup.show : undefined, onDisplayToggle: maskable ? column.onDisplayToggle : undefined }), _jsx(DynamicTable.HeaderStatus, { filterType: searchable && column.searchText !== null
+                            ? "search"
+                            : selectable && column.hiddenValues.length > 0
+                                ? "selection"
+                                : undefined, sortState: sortable && column.sorted !== null ? column.sorted : undefined })] }), filterPopup.display &&
+                (searchable ? (_jsx(DynamicTable.SearchFilterPopup, { searchText: column.searchText ?? "", onSearchTextChange: column.onSearchTextChange, onDismiss: filterPopup.dismiss })) : (selectable && (_jsx(DynamicTable.SelectionFilterPopup, { dictionary: column.dictionary instanceof Map ? column.dictionary : null, hiddenValues: column.hiddenValues ?? [], onHiddenValuesChange: column.onSelectionChange, onDismiss: filterPopup.dismiss }))))] }));
+}
+export function HeaderActions(props) {
+    return (_jsxs("span", { className: "column-actions hidden", children: [props.filterType !== undefined && props.onFilterPopupToggle !== undefined && (_jsx(DynamicTable.Button, { className: "[--text-color:color-mix(in_oklab,var(--color-base-content,black)_60%,transparent)] [--bg-default-color:color-mix(in_oklab,color-mix(in_oklab,var(--color-table-header),var(--color-stone-500)_20%)_40%,transparent)]", onClick: props.onFilterPopupToggle, children: props.filterType === "search" ? _jsx(SearchIcon, {}) : _jsx(FilterIcon, {}) })), props.onDisplayToggle !== undefined && (_jsx(DynamicTable.Button, { className: "[--text-color:color-mix(in_oklab,var(--color-base-content,black)_60%,transparent)] [--bg-default-color:color-mix(in_oklab,color-mix(in_oklab,var(--color-table-header),var(--color-stone-500)_20%)_40%,transparent)]", onClick: props.onDisplayToggle, children: _jsx(HideIcon, {}) }))] }));
+}
+export function HeaderStatus(props) {
+    if (props.filterType === undefined && props.sortState === undefined) {
+        return null;
+    }
+    return (_jsxs("span", { className: "h-full pb-1 flex flex-col items-end justify-between", children: [_jsxs("span", { className: "text-sm", children: [props.sortState !== undefined && props.sortState.totalSortedColumns > 1 && props.sortState.order, props.sortState !== undefined &&
+                        (props.sortState.direction === "asc" ? _jsx(AscSortIcon, {}) : _jsx(DescSortIcon, {}))] }), _jsx("span", { className: "shrink text-xs", children: props.filterType !== undefined && (props.filterType === "search" ? _jsx(SearchIcon, {}) : _jsx(FilterIcon, {})) })] }));
+}
+export function SearchFilterPopup(props) {
+    return (_jsx(DynamicTable.Popup, { className: "right-2", onDismiss: props.onDismiss, children: _jsx("main", { children: _jsx("input", { type: "search", name: "search", autoFocus: true, value: props.searchText, onChange: (event) => {
+                    props.onSearchTextChange(event.currentTarget.value);
+                } }) }) }));
+}
+export function SelectionFilterPopup(props) {
+    return (_jsx(DynamicTable.Popup, { className: "right-2", onDismiss: props.onDismiss, children: _jsx("main", { children: props.dictionary === null ? (_jsx(DynamicTable.Loader, {})) : (_jsx("ul", { className: "min-w-40", children: Array.from(props.dictionary, ([value, entry]) => {
+                    const hidden = props.hiddenValues.includes(value);
+                    return (_jsxs("li", { className: "flex items-center gap-1 px-2 py-0.5 cursor-pointer hover:bg-stone-500/40", onClick: () => {
+                            props.onHiddenValuesChange(hidden
+                                ? props.hiddenValues.filter((val) => val !== value)
+                                : [...props.hiddenValues, value]);
+                        }, children: [hidden ? _jsx(UncheckedIcon, {}) : _jsx(CheckedIcon, {}), entry.prepend, entry.title] }, `${value}`));
+                }) })) }) }));
+}
+export function BodyContainer(props) {
+    return _jsx("tbody", { children: props.children });
+}
+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 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 }) }));
+}
+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] }) }) }));
+}
+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) => {
+            props.onItemsPerPageChange(Number.parseInt(event.target.value, 10));
+        }, children: ITEM_PER_PAGE_CHOICES.map((choice) => (_jsx("option", { value: choice, children: choice }, choice))) }));
+}
+const DISPLAYED_PAGES = 5;
+export function PageSelector(props) {
+    const visiblePages = useMemo(() => {
+        const interval = Math.floor(DISPLAYED_PAGES / 2);
+        const min = Math.max(1, Math.min(props.currentPage - interval, props.totalPages - 2 * interval));
+        const max = Math.min(props.totalPages, min + 2 * interval);
+        const pages = [];
+        for (let page = min; page <= max; ++page) {
+            pages.push(page);
+        }
+        return pages;
+    }, [props.totalPages, props.currentPage]);
+    if (props.totalPages <= 1) {
+        return null;
+    }
+    return (_jsxs("ul", { className: "inline-flex flex-wrap justify-center", children: [_jsx(DynamicTable.PageButton, { enabled: props.currentPage > 1, onClick: () => {
+                    props.onCurrentPageChange(1);
+                }, children: "1" }), _jsx(DynamicTable.PageButton, { enabled: props.currentPage > 1, onClick: () => {
+                    props.onCurrentPageChange(Math.max(1, props.currentPage - 1));
+                }, children: _jsx(PreviousIcon, {}) }), visiblePages.map((page) => (_jsx(DynamicTable.PageButton, { enabled: page !== props.currentPage, active: page === props.currentPage, onClick: () => {
+                    props.onCurrentPageChange(page);
+                }, children: page }, page))), _jsx(DynamicTable.PageButton, { enabled: props.currentPage < props.totalPages, onClick: () => {
+                    props.onCurrentPageChange(Math.min(props.totalPages, props.currentPage + 1));
+                }, children: _jsx(NextIcon, {}) }), _jsx(DynamicTable.PageButton, { enabled: props.currentPage < props.totalPages, onClick: () => {
+                    props.onCurrentPageChange(props.totalPages);
+                }, children: props.totalPages })] }));
+}
+export function PageButton(props) {
+    return (_jsx("li", { className: cx(props.active ? "bg-stone-600 text-white" : "bg-white", (!props.active && props.enabled) || "text-stone-300"), children: _jsx("button", { type: "button", className: cx("flex items-center justify-center h-full min-w-10 p-2 border-none oultine-none", props.active || !props.enabled || "cursor-pointer hover:bg-stone-500/40"), disabled: !props.enabled, onClick: () => {
+                if (props.enabled) {
+                    props.onClick();
+                }
+            }, children: props.children }) }));
+}
+/**
+ * A customizable button.
+ *
+ * The button text color is defined using the `--text-color` css property. It uses by default `--color-base-content`
+ * css property or fallback to black if `--color-base-content` is not defined. You can override this value by giving an
+ * appropriate className, for example:
+ * `<DynamicTable.Button className="[--text-color:var(--color-stone-400)]">...</DynamicTable.Button>`
+ *
+ * The button background color is defined using the `--bg-color` css property. It uses by default `--color-stone-400`
+ * css property. You can override this value by giving an appropriate className, for example:
+ * `<DynamicTable.Button className="[--bg-color:var(--color-orange-400)]">...</DynamicTable.Button>`
+ * Note that the color defined by `--bg-color` will be used when the button is hovered. A less saturated color will be
+ * used for non-hovered button (by default, --bg-color mix with 50% transparent). You can also override the default
+ * background color (when button is non-hovered) by defining a custom `--bg-default-color`, for example:
+ * `<DynamicTable.Button className="[--bg-default-color:transparent]">...</DynamicTable.Button>`
+ */
+export function Button(props) {
+    return (_jsx("button", { type: "button", className: cx(props.className?.includes("[--text-color:") || "[--text-color:var(--color-base-content,black)]", props.className?.includes("[--bg-color:") || "[--bg-color:var(--color-stone-400)]", props.className?.includes("[--bg-default-color:") ||
+            "[--bg-default-color:color-mix(in_oklab,var(--bg-color)_50%,transparent)]", "inline-flex items-center justify-center size-6 rounded-full [&_.hover-content]:hidden hover:[&_.default-content]:hidden hover:[&_.hover-content]:inline-flex", props.disabled
+            ? "text-(--text-color)/50"
+            : "text-(--text-color) bg-(--bg-default-color) hover:bg-(--bg-color) cursor-pointer", props.className), disabled: props.disabled, onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            props.onClick();
+        }, children: props.hoverChildren && !props.disabled ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "inline-flex default-content", children: props.children }), _jsx("span", { className: "inline-flex hover-content", children: props.hoverChildren })] })) : (props.children) }));
+}
+export function Popup(props) {
+    useEffect(() => {
+        window.addEventListener("click", props.onDismiss);
+        return () => {
+            window.removeEventListener("click", props.onDismiss);
+        };
+    }, [props.onDismiss]);
+    return (_jsx("div", { className: cx("absolute max-w-xs max-h-[60vh] border border-stone-400 rounded bg-base-100 overflow-auto z-50", props.className), onClick: (event) => {
+            event.stopPropagation();
+        }, children: props.children }));
+}
+export function Loader() {
+    return _jsx("span", { children: "Loading\u2026" });
+}

package/lib/Dictionary.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { Primitive } from ".";
+export interface DictionaryEntry {
+    title: string;
+    prepend?: ReactNode;
+}
+export default class Dictionary<Value extends Primitive> extends Map<Value, DictionaryEntry> {
+    readonly unknownMessage: string;
+    constructor(unknownMessage: string, entries?: readonly (readonly [Value, DictionaryEntry])[] | null);
+}

package/lib/Dictionary.js

@@ -0,0 +1,7 @@
+export default class Dictionary extends Map {
+    unknownMessage;
+    constructor(unknownMessage, entries) {
+        super(entries);
+        this.unknownMessage = unknownMessage;
+    }
+}

package/lib/Icon.d.ts

@@ -0,0 +1,13 @@
+export declare const DEFAULT_CLASS = "inline grow-0 shrink-0 size-[1em]";
+export declare function CheckedIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function UncheckedIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function CloseIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnsIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function FilterIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function HideIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function NextIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function PreviousIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function SearchIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function SortIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function AscSortIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function DescSortIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/Icon.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+// License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.
+export const DEFAULT_CLASS = "inline grow-0 shrink-0 size-[1em]";
+export function CheckedIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("path", { d: "M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z", fill: "currentColor" }) }));
+}
+export function UncheckedIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("path", { d: "M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z", fill: "currentColor" }) }));
+}
+export function CloseIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", children: _jsx("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z", fill: "currentColor" }) }));
+}
+export function ColumnsIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: _jsx("path", { d: "M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 64l0 256 160 0 0-256L64 160zm384 0l-160 0 0 256 160 0 0-256z", fill: "currentColor" }) }));
+}
+export function FilterIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: _jsx("path", { d: "M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z", fill: "currentColor" }) }));
+}
+export function HideIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", children: _jsx("path", { d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z", fill: "currentColor" }) }));
+}
+export function NextIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: _jsx("path", { d: "M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z", fill: "currentColor" }) }));
+}
+export function PreviousIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: _jsx("path", { d: "M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z", fill: "currentColor" }) }));
+}
+export function SearchIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: _jsx("path", { d: "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z", fill: "currentColor" }) }));
+}
+export function SortIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: _jsx("path", { d: "M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8L32 224c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8l256 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z", fill: "currentColor" }) }));
+}
+export function AscSortIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: _jsx("path", { d: "M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z", fill: "currentColor" }) }));
+}
+export function DescSortIcon() {
+    return (_jsx("svg", { className: DEFAULT_CLASS, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: _jsx("path", { d: "M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8l256 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z", fill: "currentColor" }) }));
+}

package/lib/UniquePopupProvider.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+type Callback = () => void;
+type PopupState = {
+    display: true;
+    show: Callback;
+    dismiss: Callback;
+} | {
+    display: false;
+    show: Callback;
+    dismiss: null;
+};
+/**
+ * A hook that eases popup display.
+ *
+ * It provides a display boolean and show & dismiss functions. It unsures that only one popup is displayed at a time.
+ */
+export declare function usePopup(): PopupState;
+interface Props {
+    children?: ReactNode;
+}
+export default function UniquePopupProvider(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/UniquePopupProvider.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, createRef, useCallback, useContext, useRef, useState, } from "react";
+/**
+ * A context for saving the currently opened popup's dismiss function.
+ */
+const PopupContext = createContext(createRef());
+/**
+ * A hook that eases popup display.
+ *
+ * It provides a display boolean and show & dismiss functions. It unsures that only one popup is displayed at a time.
+ */
+// eslint-disable-next-line react-refresh/only-export-components
+export function usePopup() {
+    const dismiss = useContext(PopupContext);
+    const [display, setDisplay] = useState(false);
+    return {
+        display,
+        show: useCallback(() => {
+            if (dismiss.current !== null) {
+                dismiss.current();
+            }
+            dismiss.current = () => {
+                setDisplay(false);
+                dismiss.current = null;
+            };
+            setDisplay(true);
+        }, [dismiss]),
+        dismiss: dismiss.current,
+    };
+}
+export default function UniquePopupProvider(props) {
+    return _jsx(PopupContext, { value: useRef(null), children: props.children });
+}

package/lib/index.d.ts

@@ -0,0 +1,52 @@
+import type { Key as ReactKey } from "react";
+import type { ColumnDefinition } from "./ColumnDefinition";
+import { type FilterState } from "./useFilterState";
+import type { ColumnsMaskState } from "./useMaskableColumns";
+import { type PaginationState } from "./usePagination";
+import { type SortState } from "./useSortState";
+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> {
+    items: Item[];
+    columns: ColumnDefinition<Item, Primitive>[];
+    itemTarget?: (item: Item) => string;
+    initialFilterState?: FilterState;
+    initialSortState?: SortState;
+    initialColumnsMaskState?: ColumnsMaskState;
+    initialPaginationState?: PaginationState;
+}
+declare function DynamicTable<Item extends BaseItem>(props: Props<Item>): import("react/jsx-runtime").JSX.Element;
+declare namespace DynamicTable {
+    var TableContainer: typeof import("./DefaultTheme").TableContainer;
+    var Controller: typeof import("./DefaultTheme").Controller;
+    var ColumnsPopup: typeof import("./DefaultTheme").ColumnsPopup;
+    var Table: typeof import("./DefaultTheme").Table;
+    var HeaderContainer: typeof import("./DefaultTheme").HeaderContainer;
+    var HeaderLine: typeof import("./DefaultTheme").HeaderLine;
+    var Header: typeof import("./DefaultTheme").Header;
+    var HeaderActions: typeof import("./DefaultTheme").HeaderActions;
+    var HeaderStatus: typeof import("./DefaultTheme").HeaderStatus;
+    var SearchFilterPopup: typeof import("./DefaultTheme").SearchFilterPopup;
+    var SelectionFilterPopup: typeof import("./DefaultTheme").SelectionFilterPopup;
+    var BodyContainer: typeof import("./DefaultTheme").BodyContainer;
+    var Line: typeof import("./DefaultTheme").Line;
+    var Cell: typeof import("./DefaultTheme").Cell;
+    var ClickableCell: typeof import("./DefaultTheme").ClickableCell;
+    var FooterContainer: typeof import("./DefaultTheme").FooterContainer;
+    var ItemsPerPageSelector: typeof import("./DefaultTheme").ItemsPerPageSelector;
+    var PageSelector: typeof import("./DefaultTheme").PageSelector;
+    var PageButton: typeof import("./DefaultTheme").PageButton;
+    var Button: typeof import("./DefaultTheme").Button;
+    var Popup: typeof import("./DefaultTheme").Popup;
+    var Loader: typeof import("./DefaultTheme").Loader;
+}
+export default DynamicTable;

package/lib/index.js

@@ -0,0 +1,43 @@
+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";
+import UniquePopupProvider from "./UniquePopupProvider";
+import useColumns from "./useColumns";
+import useFilterState from "./useFilterState";
+import useItems from "./useItems";
+import useMaskableColumns from "./useMaskableColumns";
+import usePagination from "./usePagination";
+import useSortState from "./useSortState";
+export { default as Dictionary } from "./Dictionary";
+export default function DynamicTable(props) {
+    const columns = useColumns(props.columns);
+    const items = useItems(props.items, props.itemTarget, columns);
+    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);
+    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 }) })] })] }) }));
+}
+DynamicTable.TableContainer = TableContainer;
+DynamicTable.Controller = Controller;
+DynamicTable.ColumnsPopup = ColumnsPopup;
+DynamicTable.Table = Table;
+DynamicTable.HeaderContainer = HeaderContainer;
+DynamicTable.HeaderLine = HeaderLine;
+DynamicTable.Header = Header;
+DynamicTable.HeaderActions = HeaderActions;
+DynamicTable.HeaderStatus = HeaderStatus;
+DynamicTable.SearchFilterPopup = SearchFilterPopup;
+DynamicTable.SelectionFilterPopup = SelectionFilterPopup;
+DynamicTable.BodyContainer = BodyContainer;
+DynamicTable.Line = Line;
+DynamicTable.Cell = Cell;
+DynamicTable.ClickableCell = ClickableCell;
+DynamicTable.FooterContainer = FooterContainer;
+DynamicTable.ItemsPerPageSelector = ItemsPerPageSelector;
+DynamicTable.PageSelector = PageSelector;
+DynamicTable.PageButton = PageButton;
+DynamicTable.Button = Button;
+DynamicTable.Popup = Popup;
+DynamicTable.Loader = Loader;

package/lib/useColumns.d.ts

@@ -0,0 +1,36 @@
+import type { BaseItem, ColumnDefinition, Dictionary, Primitive, ValueResolver } from ".";
+/**
+ * A column that is loading a dictionary.
+ */
+export interface LoadingInternalColumn<Item extends BaseItem, Value extends Primitive> {
+    readonly id: string;
+    readonly title: string;
+    readonly loadingDictionary: true;
+    readonly dictionary: Promise<Dictionary<Value>>;
+    readonly resolveValue: ValueResolver<Item, Value>;
+}
+/**
+ * A column fully loaded and usable.
+ */
+export interface LoadedInternalColumn<Item extends BaseItem, Value extends Primitive> {
+    readonly id: string;
+    readonly title: string;
+    readonly loadingDictionary: false;
+    readonly dictionary?: Dictionary<Value>;
+    readonly resolveValue: ValueResolver<Item, Value>;
+}
+/**
+ * A column, either in loading state or in loaded state.
+ */
+export type InternalColumn<Item extends BaseItem, Value extends Primitive> = LoadingInternalColumn<Item, Value> | LoadedInternalColumn<Item, Value>;
+/**
+ * A list of columns.
+ */
+export type InternalColumns<Item extends BaseItem> = readonly InternalColumn<Item, Primitive>[];
+/**
+ * Transform a list of column definitions into a list of internal columns.
+ *
+ * Handles the optional loading state of some columns that may be an async dictionary and update the list of internal
+ * columns when each dictionary is resolved.
+ */
+export default function useColumns<Item extends BaseItem>(definitions: ColumnDefinition<Item, Primitive>[]): InternalColumn<Item, Primitive>[];

package/lib/useColumns.js

@@ -0,0 +1,60 @@
+import { replaceElement } from "@vinorcola/utils/list";
+import { useEffect, useRef, useState } from "react";
+import { isAccessorColumnDefinition } from "./ColumnDefinition";
+/**
+ * Transform a list of column definitions into a list of internal columns.
+ *
+ * Handles the optional loading state of some columns that may be an async dictionary and update the list of internal
+ * columns when each dictionary is resolved.
+ */
+export default function useColumns(definitions) {
+    // This is used for canceling promises (resolved promises' callback won't be executed if the version changed).
+    const definitionVersion = useRef(0);
+    const [columns, setColumns] = useState(() => resolveInitialColumnState(definitions));
+    useEffect(() => {
+        definitionVersion.current++;
+        const currentVersion = definitionVersion.current;
+        setColumns(resolveInitialColumnState(definitions));
+        definitions.forEach((definition, index) => {
+            if (definition.dictionary instanceof Promise) {
+                // Once dictionary is loaded (and the columns definitions hasn't changed), update the internal column's
+                // data.
+                definition.dictionary.then((dictionary) => {
+                    if (definitionVersion.current === currentVersion) {
+                        setColumns((columns) => replaceElement(columns, index, {
+                            id: definition.id,
+                            title: definition.title,
+                            loadingDictionary: false,
+                            dictionary,
+                            resolveValue: isAccessorColumnDefinition(definition)
+                                ? (item) => item[definition.id]
+                                : definition.resolveValue,
+                        }));
+                    }
+                });
+            }
+        });
+    }, [definitions]);
+    return columns;
+}
+function resolveInitialColumnState(definitions) {
+    return definitions.map((definition) => definition.dictionary instanceof Promise
+        ? {
+            id: definition.id,
+            title: definition.title,
+            loadingDictionary: true,
+            dictionary: definition.dictionary,
+            resolveValue: isAccessorColumnDefinition(definition)
+                ? (item) => item[definition.id]
+                : definition.resolveValue,
+        }
+        : {
+            id: definition.id,
+            title: definition.title,
+            loadingDictionary: false,
+            dictionary: definition.dictionary,
+            resolveValue: isAccessorColumnDefinition(definition)
+                ? (item) => item[definition.id]
+                : definition.resolveValue,
+        });
+}

package/lib/useFilterState.d.ts

@@ -0,0 +1,61 @@
+import type { InternalColumn, InternalColumns } from "./useColumns";
+import type { InternalItems } from "./useItems";
+import type { BaseItem, Primitive } from ".";
+/**
+ * A filter type.
+ */
+export type FilterType = "search" | "selection";
+/**
+ * A filter state based on text search.
+ */
+export interface SearchState {
+    readonly searchText: string;
+}
+/**
+ * A filter state based on value selection.
+ */
+export interface SelectionState<Value extends Primitive> {
+    readonly hiddenValues: Value[];
+}
+/**
+ * A filter state for a column, either based on text search or value selection.
+ */
+export type ColumnFilterState<Value extends Primitive> = SearchState | SelectionState<Value>;
+/**
+ * A complete filter state.
+ */
+export interface FilterState {
+    [columnId: string]: ColumnFilterState<Primitive>;
+}
+/**
+ * Mark a column as filterable by text search.
+ */
+export type InternalSearchableColumn<Item extends BaseItem, Value extends Primitive> = InternalColumn<Item, Value> & {
+    readonly searchText: string | null;
+    readonly onSearchTextChange: (searchText: string | null) => void;
+};
+/**
+ * Mark a column as filterable by value selection.
+ */
+export type InternalSelectableColumn<Item extends BaseItem, Value extends Primitive> = InternalColumn<Item, Value> & {
+    readonly hiddenValues: Value[];
+    readonly onSelectionChange: (hiddenValues: Value[]) => void;
+};
+/**
+ * Mark a column as filterable, either by text search or value selection.
+ */
+export type InternalFilterableColumn<Item extends BaseItem, Value extends Primitive> = InternalSearchableColumn<Item, Value> | InternalSelectableColumn<Item, Value>;
+export declare function isFilterable<Item extends BaseItem, Value extends Primitive>(column: InternalColumn<Item, Value>): column is InternalFilterableColumn<Item, Value>;
+export declare function isSearchable<Item extends BaseItem, Value extends Primitive>(column: InternalColumn<Item, Value>): column is InternalSearchableColumn<Item, Value>;
+export declare function isSelectable<Item extends BaseItem, Value extends Primitive>(column: InternalColumn<Item, Value>): column is InternalSelectableColumn<Item, Value>;
+/**
+ * Filters items.
+ *
+ * This hook will add filter state & filter control on each given columns, returning decorated columns. It will also
+ * apply those filters on the items list, returning a filtered list.
+ */
+export default function useFilterState<Item extends BaseItem>(columns: InternalColumns<Item>, items: InternalItems<Item>, initialFilterState?: FilterState): {
+    columns: InternalFilterableColumn<Item, Primitive>[];
+    items: import("./useItems").InternalItem<Item>[];
+    clearFilterState: () => void;
+};

package/lib/useFilterState.js

@@ -0,0 +1,85 @@
+import { drop } from "@vinorcola/utils/object";
+import { extractSearchableText } from "@vinorcola/utils/text";
+import { useCallback, useMemo, useState } from "react";
+export function isFilterable(column) {
+    return ((column.searchText !== undefined && column.onSearchTextChange !== undefined) ||
+        (column.hiddenValues !== undefined && column.onSelectionChange !== undefined));
+}
+export function isSearchable(column) {
+    return column.searchText !== undefined && column.onSearchTextChange !== undefined;
+}
+export function isSelectable(column) {
+    return column.hiddenValues !== undefined && column.onSelectionChange !== undefined;
+}
+/**
+ * Filters items.
+ *
+ * This hook will add filter state & filter control on each given columns, returning decorated columns. It will also
+ * apply those filters on the items list, returning a filtered list.
+ */
+export default function useFilterState(columns, items, initialFilterState = {}) {
+    const [filterState, setFilterState] = useState(initialFilterState);
+    return {
+        columns: useMemo(() => columns.map((column) => {
+            if (column.dictionary === undefined) {
+                return {
+                    ...column,
+                    searchText: filterState[column.id]?.searchText ?? null,
+                    onSearchTextChange: (searchText) => {
+                        setFilterState((filterState) => searchText === null || extractSearchableText(searchText) === ""
+                            ? drop(filterState, column.id)
+                            : {
+                                ...filterState,
+                                [column.id]: { searchText },
+                            });
+                    },
+                };
+            }
+            else {
+                return {
+                    ...column,
+                    hiddenValues: filterState[column.id]?.hiddenValues ?? [],
+                    onSelectionChange: (hiddenValues) => {
+                        setFilterState((filterState) => hiddenValues.length === 0
+                            ? drop(filterState, column.id)
+                            : { ...filterState, [column.id]: { hiddenValues } });
+                    },
+                };
+            }
+        }), [columns, filterState]),
+        items: useMemo(() => items.filter((items) => items.values.every((value) => {
+            if (value.loading) {
+                // Keep loading values.
+                return true;
+            }
+            const columnFilterState = filterState[value.column] ?? null;
+            if (columnFilterState === null) {
+                // There is no filter on this column.
+                return true;
+            }
+            return isSearchedState(columnFilterState)
+                ? matchSearch(value, columnFilterState)
+                : matchSelection(value, columnFilterState);
+        })), [items, filterState]),
+        clearFilterState: useCallback(() => {
+            setFilterState({});
+        }, []),
+    };
+}
+function isSearchedState(state) {
+    return state.searchText !== undefined;
+}
+function matchSearch(value, filterState) {
+    if (value.search === null) {
+        // Filter out empty values.
+        return false;
+    }
+    return value.search.includes(filterState.searchText);
+}
+function matchSelection(value, filterState) {
+    if (value.raw === null) {
+        // Filter out empty values.
+        return false;
+    }
+    return !filterState.hiddenValues.includes(value.raw);
+}

package/lib/useItems.d.ts

@@ -0,0 +1,41 @@
+import { type Key, type ReactNode } from "react";
+import type { InternalColumns } from "./useColumns";
+import type { SortableValue } from "./useSortState";
+import type { BaseItem, Primitive } from ".";
+/**
+ * A value that is loading (waiting for an async column dictionary to be available).
+ */
+export interface LoadingInternalValue {
+    readonly column: string;
+    readonly loading: true;
+    readonly raw: Primitive | null;
+}
+/**
+ * A loaded value, ready for filter, sort and display.
+ */
+export interface LoadedInternalValue {
+    readonly column: string;
+    readonly loading: false;
+    readonly raw: Primitive | null;
+    readonly search: string | null;
+    readonly sort: SortableValue;
+    readonly display: ReactNode;
+}
+/**
+ * A value, either in loading state ou in loaded state.
+ */
+export type InternalValue = LoadingInternalValue | LoadedInternalValue;
+/**
+ * An internal item.
+ */
+export interface InternalItem<Item extends BaseItem> {
+    readonly key: Key;
+    readonly item: Item;
+    readonly target: string | null;
+    readonly values: InternalValue[];
+}
+/**
+ * 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>;

package/lib/useItems.js

@@ -0,0 +1,88 @@
+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) {
+    return useMemo(() => items.map((item) => ({
+        key: item.id,
+        item,
+        target: itemTarget === undefined ? null : itemTarget(item),
+        values: columns.map((column) => resolveInternalValue(item, column)),
+    })), [items, itemTarget, columns]);
+}
+function resolveInternalValue(item, column) {
+    const raw = column.resolveValue(item);
+    return column.loadingDictionary
+        ? {
+            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),
+        };
+}
+function resolveSearchableValue(value, dictionary) {
+    if (dictionary !== undefined) {
+        // Columns with dictionary are selectable, not searchable.
+        return null;
+    }
+    if (value === null) {
+        return null;
+    }
+    if (typeof value === "boolean") {
+        return value ? "true" : "false";
+    }
+    if (value instanceof Date) {
+        return value.toLocaleString();
+    }
+    if (typeof value === "number") {
+        return `${value}`;
+    }
+    return extractSearchableText(value);
+}
+function resolveSortableValue(value, dictionary) {
+    if (value === null) {
+        return null;
+    }
+    if (dictionary) {
+        return (dictionary.get(value)?.title ?? dictionary.unknownMessage).toLocaleLowerCase();
+    }
+    if (typeof value === "boolean") {
+        return value ? 1 : 0;
+    }
+    if (value instanceof Date) {
+        return value.getTime();
+    }
+    if (typeof value === "number") {
+        return value;
+    }
+    return value.toLocaleLowerCase();
+}
+function resolveDisplayableValue(value, dictionary) {
+    if (value === null) {
+        return null;
+    }
+    if (dictionary) {
+        const dictionaryEntry = dictionary.get(value);
+        if (dictionaryEntry === undefined) {
+            return dictionary.unknownMessage;
+        }
+        return dictionaryEntry.prepend !== undefined ? (_jsxs(_Fragment, { children: [dictionaryEntry.prepend, dictionaryEntry.title] })) : (dictionaryEntry.title);
+    }
+    if (typeof value === "boolean") {
+        return value ? "true" : "false";
+    }
+    if (value instanceof Date) {
+        return value.toLocaleDateString();
+    }
+    if (typeof value === "number") {
+        return displayInteger(value);
+    }
+    return value;
+}

package/lib/useMaskableColumns.d.ts

@@ -0,0 +1,34 @@
+import type { InternalColumn } from "./useColumns";
+import type { InternalItems } from "./useItems";
+import type { BaseItem, Primitive } from ".";
+/**
+ * A complete columns mask state.
+ */
+export type ColumnsMaskState = string[];
+/**
+ * Mark a column as maskable.
+ */
+export type InternalMaskableColumn<Item extends BaseItem, Value extends Primitive> = InternalColumn<Item, Value> & {
+    readonly displayed: boolean;
+    readonly onDisplayToggle: () => void;
+};
+export declare function isMaskable<Item extends BaseItem, Value extends Primitive>(column: InternalColumn<Item, Value>): column is InternalMaskableColumn<Item, Value>;
+/**
+ * Masks columns.
+ *
+ * This hook will add mask state & mask control on each given columns, returning decorated columns. It will also alter
+ * the items list to remove masked columns' values.
+ *
+ * Note that the returned `columns` contains only the displayed columns, while `allColumns` contains all the columns
+ * (for control purpose).
+ */
+export default function useMaskableColumns<Item extends BaseItem>(columns: InternalColumn<Item, Primitive>[], items: InternalItems<Item>, initialHiddenColumns?: ColumnsMaskState): {
+    allColumns: InternalMaskableColumn<Item, Primitive>[];
+    columns: InternalMaskableColumn<Item, Primitive>[];
+    items: {
+        values: import("./useItems").InternalValue[];
+        key: import("react").Key;
+        item: Item;
+        target: string | null;
+    }[];
+};

package/lib/useMaskableColumns.js

@@ -0,0 +1,34 @@
+import { useMemo, useState } from "react";
+export function isMaskable(column) {
+    return column.displayed !== undefined && column.onDisplayToggle !== undefined;
+}
+/**
+ * Masks columns.
+ *
+ * This hook will add mask state & mask control on each given columns, returning decorated columns. It will also alter
+ * the items list to remove masked columns' values.
+ *
+ * Note that the returned `columns` contains only the displayed columns, while `allColumns` contains all the columns
+ * (for control purpose).
+ */
+export default function useMaskableColumns(columns, items, initialHiddenColumns = []) {
+    const [hidden, setHidden] = useState(initialHiddenColumns);
+    const allColumns = useMemo(() => columns.map((column) => {
+        const displayed = !hidden.includes(column.id);
+        return {
+            ...column,
+            displayed,
+            onDisplayToggle: () => {
+                setHidden((hidden) => displayed ? [...hidden, column.id] : hidden.filter((id) => id !== column.id));
+            },
+        };
+    }), [columns, hidden]);
+    return {
+        allColumns,
+        columns: useMemo(() => allColumns.filter((column) => column.displayed), [allColumns]),
+        items: useMemo(() => items.map((item) => ({
+            ...item,
+            values: item.values.filter((value) => allColumns.find((column) => column.id === value.column).displayed),
+        })), [items, allColumns]),
+    };
+}

package/lib/usePagination.d.ts

@@ -0,0 +1,22 @@
+import type { InternalItems } from "./useItems";
+import type { BaseItem } from ".";
+/**
+ * A complete pagination state.
+ */
+export interface PaginationState {
+    currentPage: number;
+    itemsPerPage: number;
+}
+/**
+ * Apply pagination.
+ *
+ * Return pagination state & pagination control as well as items to display on the current page.
+ */
+export default function usePagination<Item extends BaseItem>(items: InternalItems<Item>, initialPaginationState?: PaginationState): {
+    items: import("./useItems").InternalItem<Item>[];
+    itemsPerPage: number;
+    onItemsPerPageChange: (itemsPerPage: number) => void;
+    totalPages: number;
+    currentPage: number;
+    onCurrentPageChange: (page: number) => void;
+};

package/lib/usePagination.js

@@ -0,0 +1,29 @@
+import { useCallback, useMemo, useState } from "react";
+/**
+ * Apply pagination.
+ *
+ * Return pagination state & pagination control as well as items to display on the current page.
+ */
+export default function usePagination(items, initialPaginationState = { currentPage: 1, itemsPerPage: 12 }) {
+    const [pagination, setPagination] = useState(initialPaginationState);
+    const totalPages = useMemo(() => Math.ceil(items.length / pagination.itemsPerPage), [items, pagination]);
+    const currentPage = useMemo(() => Math.max(1, Math.min(totalPages, pagination.currentPage)), [totalPages, pagination]);
+    return {
+        items: useMemo(() => items.slice((currentPage - 1) * pagination.itemsPerPage, currentPage * pagination.itemsPerPage), [items, pagination, currentPage]),
+        itemsPerPage: pagination.itemsPerPage,
+        onItemsPerPageChange: useCallback((itemsPerPage) => {
+            setPagination((pagination) => ({
+                ...pagination,
+                itemsPerPage,
+            }));
+        }, []),
+        totalPages,
+        currentPage,
+        onCurrentPageChange: useCallback((page) => {
+            setPagination((pagination) => ({
+                ...pagination,
+                currentPage: page,
+            }));
+        }, []),
+    };
+}

package/lib/useSortState.d.ts

@@ -0,0 +1,41 @@
+import type { InternalColumn, InternalColumns } from "./useColumns";
+import type { InternalItems, InternalItem } from "./useItems";
+import type { BaseItem, Primitive } from ".";
+/**
+ * A sort direction.
+ */
+export type SortDirection = "asc" | "desc";
+/**
+ * A sortable value.
+ */
+export type SortableValue = string | number | null;
+/**
+ * A complete sort state.
+ */
+export type SortState = {
+    columnId: string;
+    direction: SortDirection;
+}[];
+/**
+ * Mark a column as sortable.
+ */
+export type InternalSortableColumn<Item extends BaseItem, Value extends Primitive> = InternalColumn<Item, Value> & {
+    readonly sorted: {
+        readonly order: number;
+        readonly totalSortedColumns: number;
+        readonly direction: SortDirection;
+    } | null;
+    readonly onSortToggle: () => void;
+};
+export declare function isSortable<Item extends BaseItem, Value extends Primitive>(column: InternalColumn<Item, Value>): column is InternalSortableColumn<Item, Value>;
+/**
+ * Sorts items.
+ *
+ * This hook will add sort state & sort control on each given columns, returning decorated columns. It will also apply
+ * those sorts on the items list, returning a sorted list.
+ */
+export default function useSortState<Item extends BaseItem>(columns: InternalColumns<Item>, items: InternalItems<Item>, initialSortState?: SortState): {
+    columns: InternalSortableColumn<Item, Primitive>[];
+    items: InternalItem<Item>[];
+    clearSortState: () => void;
+};

package/lib/useSortState.js

@@ -0,0 +1,75 @@
+import { dropElement, replaceElement } from "@vinorcola/utils/list";
+import { useCallback, useMemo, useState } from "react";
+export function isSortable(column) {
+    return column.sorted !== undefined && column.onSortToggle !== undefined;
+}
+/**
+ * Sorts items.
+ *
+ * This hook will add sort state & sort control on each given columns, returning decorated columns. It will also apply
+ * those sorts on the items list, returning a sorted list.
+ */
+export default function useSortState(columns, items, initialSortState = []) {
+    const [sortState, setSortState] = useState(initialSortState);
+    return {
+        columns: useMemo(() => columns.map((column) => {
+            const columnSortStateIndex = sortState.findIndex((columnSortState) => columnSortState.columnId === column.id);
+            return columnSortStateIndex === -1
+                ? {
+                    ...column,
+                    sorted: null,
+                    onSortToggle: () => {
+                        setSortState([...sortState, { columnId: column.id, direction: "asc" }]);
+                    },
+                }
+                : {
+                    ...column,
+                    sorted: {
+                        order: columnSortStateIndex + 1,
+                        totalSortedColumns: sortState.length,
+                        direction: sortState[columnSortStateIndex].direction,
+                    },
+                    onSortToggle: () => {
+                        setSortState(sortState[columnSortStateIndex].direction === "asc"
+                            ? replaceElement(sortState, columnSortStateIndex, {
+                                columnId: column.id,
+                                direction: "desc",
+                            })
+                            : dropElement(sortState, columnSortStateIndex));
+                    },
+                };
+        }), [columns, sortState]),
+        items: useMemo(() => [...items].sort((a, b) => {
+            for (const columnSortState of sortState) {
+                const aValue = extractSortValue(a, columnSortState.columnId);
+                const bValue = extractSortValue(b, columnSortState.columnId);
+                if (aValue === bValue) {
+                    // If a & b are equal, continue the loop to sort according to the next column.
+                    continue;
+                }
+                // Always display null values (or loading values) last, no mater the sort order.
+                if (aValue === null) {
+                    return 1;
+                }
+                if (bValue === null) {
+                    return -1;
+                }
+                if (typeof aValue === "string") {
+                    return ((columnSortState.direction === "asc" ? 1 : -1) * aValue.localeCompare(bValue));
+                }
+                return columnSortState.direction === "asc"
+                    ? aValue - bValue
+                    : bValue - aValue;
+            }
+            // Lines are equals.
+            return 0;
+        }), [items, sortState]),
+        clearSortState: useCallback(() => {
+            setSortState([]);
+        }, []),
+    };
+}
+function extractSortValue(line, column) {
+    const value = line.values.find((value) => value.column === column) ?? null;
+    return value === null ? null : value.loading ? null : value.sort;
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@vinorcola/dynamic-table",
+  "version": "1.0.0",
+  "description": "A table to ease the display of a filterable, sortable and paginable dataset.",
+  "keywords": [
+    "table",
+    "list",
+    "filter",
+    "sort",
+    "paginate",
+    "pagination"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Vinorcola/dynamic-table.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Vinorcola/dynamic-table/issues"
+  },
+  "homepage": "https://github.com/Vinorcola/dynamic-table#readme",
+  "type": "module",
+  "exports": {
+    ".": "./lib/index.js",
+    "./DefaultTheme": "./lib/DefaultTheme.js",
+    "./DefaultTheme.css": "./assets/DefaultTheme.css"
+  },
+  "main": "lib/index.js",
+  "author": "Vinorcola",
+  "private": false,
+  "license": "MIT",
+  "files": [
+    "assets/**/*",
+    "lib/**/*"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint --fix",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run lint",
+    "preversion": "npm run lint",
+    "version": "git add -A .",
+    "postversion": "git push && git push --tags"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@vinorcola/lint": "^1.0.5",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@vinorcola/utils": "^1.0.1",
+    "react": "^19.0.0"
+  }
+}