@ifto/mantine-kit 0.3.0 → 0.5.1

package/dist/component/organism/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":[],"sources":["../../../../src/component/organism/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { Box } from '@mantine/core';\nimport { DataTableColumn } from 'mantine-datatable';\n\nimport ViewTable from '../ViewTable/ViewTable';\nimport RowActions from './RowActions';\nimport { ListDataSource } from '../../../data/ListDataSource';\nimport { KitMessages } from '../../../i18n/KitMessages';\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useKitConfig } from '../../../provider/useKit';\nimport { FormRouteSegments } from '../../../router/FormRouteSegments';\nimport ErrorAlert from '../../atom/ErrorAlert/ErrorAlert';\nimport useService from '../../../hook/useService';\nimport { showErrorNotification, showSuccessNotification } from '../../../util/Notifications';\n\n/*\nColor of the row under the mouse. The default color of mantine-datatable (gray-1) is barely distinguishable from the\nzebra stripes (gray-0), so the highlight went unnoticed. The light variant of the primary color adapts to the light and\ndark color schemes.\n*/\nconst ROW_HOVER_COLOR = 'var(--mantine-primary-color-light)';\n\n/** Initial records of the table, while they are fetched; a single constant, so it is stable across renders. */\nconst NO_RECORDS: readonly Identifiable[] = [];\n\n/** Which actions the table shows for each record. */\nexport type ActionsSettings = {\n    /** Whether the actions column is shown. */\n    canShowActions: boolean;\n\n    /** Whether the view action is shown. */\n    canView: boolean;\n\n    /** Whether the edit action is shown. */\n    canEdit: boolean;\n\n    /** Whether the delete action is shown. */\n    canDelete: boolean;\n};\n\n/** Every action shown, used for the settings the caller does not give. */\nconst DEFAULT_ACTIONS_SETTINGS: ActionsSettings = {\n    canShowActions: true,\n    canView: true,\n    canEdit: true,\n    canDelete: true\n};\n\n/** Props of the {@link Table}. */\ntype TableProps<M extends Identifiable, S extends ListDataSource<M>> = {\n    /** Source of the records and of their deletion (e.g. a service that accesses an API). */\n    service: S;\n\n    /**\n     * Fetches the records shown, instead of `service.findAll()`. To show data already available, use\n     * `() => Promise.resolve(data)`.\n     */\n    customFetchMethod?: () => Promise<M[]>;\n\n    /** Columns of the table. */\n    columns: DataTableColumn<M>[];\n\n    /** Base path of the pages of the records (e.g. `/region`), used to build the view and edit URLs. */\n    basePath: string;\n\n    /** Which actions are shown; the ones not given are shown. */\n    actionsSettings?: Partial<ActionsSettings>;\n\n    /** Whether the table is paginated. */\n    pagination?: boolean;\n\n    /**\n     * Called by the edit action instead of opening the edit page of the record.\n     * @param itemId id of the record to edit\n     */\n    customEditFunction?: (itemId: M['id']) => void;\n\n    /**\n     * Builds the URL opened to view a record (click on the row or on the view icon).\n     * If absent, the default route is used: `${basePath}/<view segment>/${item.id}`.\n     */\n    getViewUrl?: (item: M) => string;\n};\n\n/**\n * Returns the view URL of a record: the one of `getViewUrl`, if given; otherwise, the default view route.\n * @param props props of the table\n * @param item record\n * @param segments URL segments of the form pages\n */\nfunction viewUrl<M extends Identifiable, S extends ListDataSource<M>>(\n    props: TableProps<M, S>,\n    item: M,\n    segments: FormRouteSegments\n): string {\n    return props.getViewUrl ? props.getViewUrl(item) : `${props.basePath}/${segments.view}/${item.id}`;\n}\n\n/**\n * Creates the function that deletes a record and reloads the table.\n * @param setData function that sets the records of the table, obtained from `useState`\n * @param service source of the records, which deletes them\n * @param fetchMethod fetches the records again after the deletion\n * @param messages texts of the locale\n * @return a function that receives the record to delete and returns a promise resolved when it is deleted\n */\nfunction getDeleteRecordFn<M extends Identifiable, S extends ListDataSource<M>>(\n    setData: (value: ((prevState: M[]) => M[]) | M[]) => void,\n    service: S,\n    fetchMethod: () => Promise<M[]>,\n    messages: KitMessages\n): (item: M) => Promise<void> {\n    return async (item: M) => {\n        const id = item?.id ?? 0;\n\n        // Without an id, the record was added only to the array and was not sent to the backend: just remove it.\n        if (!id) {\n            setData(prevData => prevData.filter(current => current !== item));\n            return;\n        }\n\n        try {\n            await service.delete(id);\n            showSuccessNotification(messages.table.deleteSuccess, messages.common.success);\n            setData(await fetchMethod());\n        } catch (e) {\n            showErrorNotification(e, undefined, messages.common.error);\n        }\n    };\n}\n\n/**\n * A table that shows the records of a data source, with the view, edit and delete actions. Clicking a row opens the\n * record.\n * @template M type of the records, shown one per row\n * @template S source of the records (e.g. a service that accesses an API)\n */\nconst Table = <M extends Identifiable, S extends ListDataSource<M>>(props: TableProps<M, S>): ReactElement => {\n    const { customFetchMethod, service, columns, basePath, customEditFunction } = props;\n    const fetchMethod = useCallback(\n        () => (customFetchMethod ? customFetchMethod() : service.findAll()),\n        [customFetchMethod, service]\n    );\n    const { router, messages, formRouteSegments } = useKitConfig();\n    const navigate = router.useNavigate();\n    const settings: ActionsSettings = { ...DEFAULT_ACTIONS_SETTINGS, ...props.actionsSettings };\n\n    const { data: fetchedData, loading, error } = useService(fetchMethod, NO_RECORDS as M[]);\n    const [data, setData] = useState<M[]>([]);\n\n    useEffect(() => setData(fetchedData), [fetchedData]);\n\n    const deleteRecord = useMemo(\n        () => getDeleteRecordFn(setData, service, fetchMethod, messages),\n        [service, fetchMethod, messages]\n    );\n\n    const actionsColumn: DataTableColumn<M> = {\n        accessor: 'actions',\n        title: <Box mr={6}>{messages.table.actions}</Box>,\n        textAlign: 'right',\n        render: item => (\n            <RowActions\n                {...settings}\n                viewUrl={viewUrl(props, item, formRouteSegments)}\n                editUrl={item.id ? `${basePath}/${formRouteSegments.edit}/${item.id}` : undefined}\n                onEdit={customEditFunction && item.id ? () => customEditFunction(item.id) : undefined}\n                onDelete={() => deleteRecord(item)}\n            />\n        )\n    };\n    const effectiveColumns = settings.canShowActions ? [...columns, actionsColumn] : columns;\n\n    if (error) {\n        return <ErrorAlert title={messages.common.loadError} message={String(error)} />;\n    }\n\n    return (\n        <ViewTable\n            data={data}\n            columns={effectiveColumns}\n            loading={loading}\n            pagination={props.pagination}\n            // Highlights the row under the mouse, to show that clicking it opens the record, as the view icon does.\n            highlightOnHover\n            highlightOnHoverColor={ROW_HOVER_COLOR}\n            onRowClick={({ record }) => navigate(viewUrl(props, record, formRouteSegments))}\n        />\n    );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;AAuBA,IAAM,kBAAkB;;AAGxB,IAAM,aAAsC,CAAC;;AAkB7C,IAAM,2BAA4C;CAC9C,gBAAgB;CAChB,SAAS;CACT,SAAS;CACT,WAAW;AACf;;;;;;;AA4CA,SAAS,QACL,OACA,MACA,UACM;CACN,OAAO,MAAM,aAAa,MAAM,WAAW,IAAI,IAAI,GAAG,MAAM,SAAS,GAAG,SAAS,KAAK,GAAG,KAAK;AAClG;;;;;;;;;AAUA,SAAS,kBACL,SACA,SACA,aACA,UAC0B;CAC1B,OAAO,OAAO,SAAY;EACtB,MAAM,KAAK,MAAM,MAAM;EAGvB,IAAI,CAAC,IAAI;GACL,SAAQ,aAAY,SAAS,QAAO,YAAW,YAAY,IAAI,CAAC;GAChE;EACJ;EAEA,IAAI;GACA,MAAM,QAAQ,OAAO,EAAE;GACvB,wBAAwB,SAAS,MAAM,eAAe,SAAS,OAAO,OAAO;GAC7E,QAAQ,MAAM,YAAY,CAAC;EAC/B,SAAS,GAAG;GACR,sBAAsB,GAAG,KAAA,GAAW,SAAS,OAAO,KAAK;EAC7D;CACJ;AACJ;;;;;;;AAQA,IAAM,SAA8D,UAA0C;CAC1G,MAAM,EAAE,mBAAmB,SAAS,SAAS,UAAU,uBAAuB;CAC9E,MAAM,cAAc,kBACT,oBAAoB,kBAAkB,IAAI,QAAQ,QAAQ,GACjE,CAAC,mBAAmB,OAAO,CAC/B;CACA,MAAM,EAAE,QAAQ,UAAU,sBAAsB,aAAa;CAC7D,MAAM,WAAW,OAAO,YAAY;CACpC,MAAM,WAA4B;EAAE,GAAG;EAA0B,GAAG,MAAM;CAAgB;CAE1F,MAAM,EAAE,MAAM,aAAa,SAAS,UAAU,WAAW,aAAa,UAAiB;CACvF,MAAM,CAAC,MAAM,WAAW,SAAc,CAAC,CAAC;CAExC,gBAAgB,QAAQ,WAAW,GAAG,CAAC,WAAW,CAAC;CAEnD,MAAM,eAAe,cACX,kBAAkB,SAAS,SAAS,aAAa,QAAQ,GAC/D;EAAC;EAAS;EAAa;CAAQ,CACnC;CAEA,MAAM,gBAAoC;EACtC,UAAU;EACV,OAAO,oBAAC,KAAD;GAAK,IAAI;GAAI,UAAA,SAAS,MAAM;EAAa,CAAA;EAChD,WAAW;EACX,SAAQ,SACJ,oBAAC,YAAD;GACI,GAAI;GACJ,SAAS,QAAQ,OAAO,MAAM,iBAAiB;GAC/C,SAAS,KAAK,KAAK,GAAG,SAAS,GAAG,kBAAkB,KAAK,GAAG,KAAK,OAAO,KAAA;GACxE,QAAQ,sBAAsB,KAAK,WAAW,mBAAmB,KAAK,EAAE,IAAI,KAAA;GAC5E,gBAAgB,aAAa,IAAI;EACpC,CAAA;CAET;CACA,MAAM,mBAAmB,SAAS,iBAAiB,CAAC,GAAG,SAAS,aAAa,IAAI;CAEjF,IAAI,OACA,OAAO,oBAAC,YAAD;EAAY,OAAO,SAAS,OAAO;EAAW,SAAS,OAAO,KAAK;CAAI,CAAA;CAGlF,OACI,oBAAC,WAAD;EACU;EACN,SAAS;EACA;EACT,YAAY,MAAM;EAElB,kBAAA;EACA,uBAAuB;EACvB,aAAa,EAAE,aAAa,SAAS,QAAQ,OAAO,QAAQ,iBAAiB,CAAC;CACjF,CAAA;AAET"}
+{"version":3,"file":"Table.js","names":[],"sources":["../../../../src/component/organism/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { ReactElement, useMemo } from 'react';\n\nimport { Box } from '@mantine/core';\nimport { DataTableColumn } from 'mantine-datatable';\n\nimport DataTableView from '../ViewTable/DataTableView';\nimport { SetRecords, TableData } from './TableData';\nimport RowActions from './RowActions';\nimport { ListDataSource } from '../../../data/ListDataSource';\nimport { KitMessages } from '../../../i18n/KitMessages';\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useKitConfig } from '../../../provider/useKit';\nimport { FormRouteSegments } from '../../../router/FormRouteSegments';\nimport ErrorAlert from '../../atom/ErrorAlert/ErrorAlert';\nimport { showErrorNotification, showSuccessNotification } from '../../../util/Notifications';\n\n/*\nColor of the row under the mouse. The default color of mantine-datatable (gray-1) is barely distinguishable from the\nzebra stripes (gray-0), so the highlight went unnoticed. The light variant of the primary color adapts to the light and\ndark color schemes.\n*/\nconst ROW_HOVER_COLOR = 'var(--mantine-primary-color-light)';\n\n/** Which actions the table shows for each record. */\nexport type ActionsSettings = {\n    /** Whether the actions column is shown. */\n    canShowActions: boolean;\n\n    /** Whether the view action is shown. */\n    canView: boolean;\n\n    /** Whether the edit action is shown. */\n    canEdit: boolean;\n\n    /** Whether the delete action is shown. */\n    canDelete: boolean;\n};\n\n/** Every action shown, used for the settings the caller does not give. */\nconst DEFAULT_ACTIONS_SETTINGS: ActionsSettings = {\n    canShowActions: true,\n    canView: true,\n    canEdit: true,\n    canDelete: true\n};\n\n/** Props of the {@link Table}. */\ntype TableProps<M extends Identifiable, S extends ListDataSource<M>> = {\n    /**\n     * Records and their pagination and sort, given by `useClientPagination` (sorted and paginated in the browser) or\n     * `useServerPagination` (sorted and paginated by the backend).\n     */\n    data: TableData<M>;\n\n    /** Source of the records, which deletes them (e.g. a service that accesses an API). */\n    service: S;\n\n    /** Columns of the table. */\n    columns: DataTableColumn<M>[];\n\n    /** Base path of the pages of the records (e.g. `/region`), used to build the view and edit URLs. */\n    basePath: string;\n\n    /** Which actions are shown; the ones not given are shown. */\n    actionsSettings?: Partial<ActionsSettings>;\n\n    /**\n     * Called by the edit action instead of opening the edit page of the record.\n     * @param itemId id of the record to edit\n     */\n    customEditFunction?: (itemId: M['id']) => void;\n\n    /**\n     * Builds the URL opened to view a record (click on the row or on the view icon).\n     * If absent, the default route is used: `${basePath}/<view segment>/${item.id}`.\n     */\n    getViewUrl?: (item: M) => string;\n};\n\n/**\n * Returns the view URL of a record: the one of `getViewUrl`, if given; otherwise, the default view route.\n * @param props props of the table\n * @param item record\n * @param segments URL segments of the form pages\n */\nfunction viewUrl<M extends Identifiable, S extends ListDataSource<M>>(\n    props: TableProps<M, S>,\n    item: M,\n    segments: FormRouteSegments\n): string {\n    return props.getViewUrl ? props.getViewUrl(item) : `${props.basePath}/${segments.view}/${item.id}`;\n}\n\n/**\n * Creates the function that deletes a record and reloads the table.\n * @param setData function that sets the records of the table\n * @param service source of the records, which deletes them\n * @param reload fetches the records again after the deletion\n * @param messages texts of the locale\n * @return a function that receives the record to delete and returns a promise resolved when it is deleted\n */\nfunction getDeleteRecordFn<M extends Identifiable, S extends ListDataSource<M>>(\n    setData: SetRecords<M>,\n    service: S,\n    reload: () => Promise<void>,\n    messages: KitMessages\n): (item: M) => Promise<void> {\n    return async (item: M) => {\n        const id = item?.id ?? 0;\n\n        // Without an id, the record was added only to the array and was not sent to the backend: just remove it.\n        if (!id) {\n            setData(prevData => prevData.filter(current => current !== item));\n            return;\n        }\n\n        try {\n            await service.delete(id);\n            showSuccessNotification(messages.table.deleteSuccess, messages.common.success);\n            await reload();\n        } catch (e) {\n            showErrorNotification(e, undefined, messages.common.error);\n        }\n    };\n}\n\n/**\n * A table that shows the records of a data source, with the view, edit and delete actions, or an alert when they cannot\n * be fetched. Clicking a row opens the record. Its `data` comes from `useClientPagination` or `useServerPagination`,\n * which define where the records are sorted and paginated.\n * @template M type of the records, shown one per row\n * @template S source of the records (e.g. a service that accesses an API)\n */\nconst Table = <M extends Identifiable, S extends ListDataSource<M>>(props: TableProps<M, S>): ReactElement => {\n    const { service, columns, basePath, customEditFunction, data } = props;\n    const { setRecords, reload } = data;\n    const { router, messages, formRouteSegments } = useKitConfig();\n    const navigate = router.useNavigate();\n    const settings: ActionsSettings = { ...DEFAULT_ACTIONS_SETTINGS, ...props.actionsSettings };\n\n    const deleteRecord = useMemo(\n        () => getDeleteRecordFn(setRecords, service, reload, messages),\n        [setRecords, service, reload, messages]\n    );\n\n    const actionsColumn: DataTableColumn<M> = {\n        accessor: 'actions',\n        title: <Box mr={6}>{messages.table.actions}</Box>,\n        textAlign: 'right',\n        render: item => (\n            <RowActions\n                {...settings}\n                viewUrl={viewUrl(props, item, formRouteSegments)}\n                editUrl={item.id ? `${basePath}/${formRouteSegments.edit}/${item.id}` : undefined}\n                onEdit={customEditFunction && item.id ? () => customEditFunction(item.id) : undefined}\n                onDelete={() => deleteRecord(item)}\n            />\n        )\n    };\n    const effectiveColumns = settings.canShowActions ? [...columns, actionsColumn] : columns;\n\n    if (data.error) {\n        return <ErrorAlert title={messages.common.loadError} message={String(data.error)} />;\n    }\n\n    return (\n        <DataTableView\n            records={data.records}\n            state={data.tableState}\n            paginated={data.paginated}\n            columns={effectiveColumns}\n            loading={data.loading}\n            // Highlights the row under the mouse, to show that clicking it opens the record, as the view icon does.\n            highlightOnHover\n            highlightOnHoverColor={ROW_HOVER_COLOR}\n            onRowClick={({ record }) => navigate(viewUrl(props, record, formRouteSegments))}\n        />\n    );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;;;AAuBA,IAAM,kBAAkB;;AAkBxB,IAAM,2BAA4C;CAC9C,gBAAgB;CAChB,SAAS;CACT,SAAS;CACT,WAAW;AACf;;;;;;;AAyCA,SAAS,QACL,OACA,MACA,UACM;CACN,OAAO,MAAM,aAAa,MAAM,WAAW,IAAI,IAAI,GAAG,MAAM,SAAS,GAAG,SAAS,KAAK,GAAG,KAAK;AAClG;;;;;;;;;AAUA,SAAS,kBACL,SACA,SACA,QACA,UAC0B;CAC1B,OAAO,OAAO,SAAY;EACtB,MAAM,KAAK,MAAM,MAAM;EAGvB,IAAI,CAAC,IAAI;GACL,SAAQ,aAAY,SAAS,QAAO,YAAW,YAAY,IAAI,CAAC;GAChE;EACJ;EAEA,IAAI;GACA,MAAM,QAAQ,OAAO,EAAE;GACvB,wBAAwB,SAAS,MAAM,eAAe,SAAS,OAAO,OAAO;GAC7E,MAAM,OAAO;EACjB,SAAS,GAAG;GACR,sBAAsB,GAAG,KAAA,GAAW,SAAS,OAAO,KAAK;EAC7D;CACJ;AACJ;;;;;;;;AASA,IAAM,SAA8D,UAA0C;CAC1G,MAAM,EAAE,SAAS,SAAS,UAAU,oBAAoB,SAAS;CACjE,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,EAAE,QAAQ,UAAU,sBAAsB,aAAa;CAC7D,MAAM,WAAW,OAAO,YAAY;CACpC,MAAM,WAA4B;EAAE,GAAG;EAA0B,GAAG,MAAM;CAAgB;CAE1F,MAAM,eAAe,cACX,kBAAkB,YAAY,SAAS,QAAQ,QAAQ,GAC7D;EAAC;EAAY;EAAS;EAAQ;CAAQ,CAC1C;CAEA,MAAM,gBAAoC;EACtC,UAAU;EACV,OAAO,oBAAC,KAAD;GAAK,IAAI;GAAI,UAAA,SAAS,MAAM;EAAa,CAAA;EAChD,WAAW;EACX,SAAQ,SACJ,oBAAC,YAAD;GACI,GAAI;GACJ,SAAS,QAAQ,OAAO,MAAM,iBAAiB;GAC/C,SAAS,KAAK,KAAK,GAAG,SAAS,GAAG,kBAAkB,KAAK,GAAG,KAAK,OAAO,KAAA;GACxE,QAAQ,sBAAsB,KAAK,WAAW,mBAAmB,KAAK,EAAE,IAAI,KAAA;GAC5E,gBAAgB,aAAa,IAAI;EACpC,CAAA;CAET;CACA,MAAM,mBAAmB,SAAS,iBAAiB,CAAC,GAAG,SAAS,aAAa,IAAI;CAEjF,IAAI,KAAK,OACL,OAAO,oBAAC,YAAD;EAAY,OAAO,SAAS,OAAO;EAAW,SAAS,OAAO,KAAK,KAAK;CAAI,CAAA;CAGvF,OACI,oBAAC,eAAD;EACI,SAAS,KAAK;EACd,OAAO,KAAK;EACZ,WAAW,KAAK;EAChB,SAAS;EACT,SAAS,KAAK;EAEd,kBAAA;EACA,uBAAuB;EACvB,aAAa,EAAE,aAAa,SAAS,QAAQ,OAAO,QAAQ,iBAAiB,CAAC;CACjF,CAAA;AAET"}

package/dist/component/organism/Table/TableData.d.ts

@@ -0,0 +1,24 @@
+import { TableState } from '../ViewTable/TableState';
+/** Function that sets the records of a table, as the one of `useState`. */
+export type SetRecords<M> = (value: ((prevState: M[]) => M[]) | M[]) => void;
+/**
+ * Records of a {@link Table} and their pagination and sort, given by `useClientPagination` (sorted and paginated in the
+ * browser) or `useServerPagination` (sorted and paginated by the backend).
+ * @template M type of the records
+ */
+export type TableData<M> = {
+    /** Records shown, already sorted and cut to the current page. */
+    records: M[];
+    /** Changes the records of the table without fetching them (e.g. to remove one that was not saved yet). */
+    setRecords: SetRecords<M>;
+    /** Fetches the records again (e.g. after a deletion). */
+    reload: () => Promise<void>;
+    /** Whether the records are being fetched. */
+    loading: boolean;
+    /** Error of the last fetch; `null` if there is none. */
+    error: unknown;
+    /** Pagination and sort of the table. */
+    tableState: TableState<M>;
+    /** Whether the pagination controls are shown. */
+    paginated: boolean;
+};

package/dist/component/organism/Table/TableData.js

@@ -0,0 +1 @@
+"use client";

package/dist/component/organism/Table/useClientPagination.d.ts

@@ -0,0 +1,21 @@
+import { TableData } from './TableData';
+import { ListDataSource } from '../../../data/ListDataSource';
+import { Identifiable } from '../../../model/Identifiable';
+/** Options of {@link useClientPagination}. */
+export type ClientPaginationOptions = {
+    /** Whether the table is paginated; defaults to true. Without it, every record is shown. */
+    pagination?: boolean;
+};
+/** Fetches all records of a table. */
+export type FetchAll<M> = () => Promise<M[]>;
+/**
+ * Fetches all records of a {@link Table} at once (e.g. from an API), which the browser then sorts (following the locale)
+ * and paginates.
+ * @template M type of the records
+ * @param source an object whose `findAll` fetches all records (e.g. a service), or a function that fetches them (e.g.
+ *        with a filter). It must be stable (e.g. a module constant, or a function created with `useCallback`), since a
+ *        new object or function fetches again: a `new Service()` inside the component would fetch on every render
+ * @param options whether the table is paginated
+ * @return the data to give to the `data` prop of the {@link Table}
+ */
+export declare function useClientPagination<M extends Identifiable>(source: Pick<ListDataSource<M>, 'findAll'> | FetchAll<M>, { pagination }?: ClientPaginationOptions): TableData<M>;

package/dist/component/organism/Table/useClientPagination.js

@@ -0,0 +1,43 @@
+"use client";
+import { useClientTableState } from "../ViewTable/useClientTableState.js";
+import useService from "../../../hook/useService.js";
+import { useKitConfig } from "../../../provider/useKit.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+// src/component/organism/Table/useClientPagination.ts
+/** Initial records of the table, while they are fetched; a single constant, so it is stable across renders. */
+var NO_RECORDS = [];
+/**
+* Fetches all records of a {@link Table} at once (e.g. from an API), which the browser then sorts (following the locale)
+* and paginates.
+* @template M type of the records
+* @param source an object whose `findAll` fetches all records (e.g. a service), or a function that fetches them (e.g.
+*        with a filter). It must be stable (e.g. a module constant, or a function created with `useCallback`), since a
+*        new object or function fetches again: a `new Service()` inside the component would fetch on every render
+* @param options whether the table is paginated
+* @return the data to give to the `data` prop of the {@link Table}
+*/
+function useClientPagination(source, { pagination = true } = {}) {
+	const fetchAll = useMemo(() => typeof source === "function" ? source : () => source.findAll(), [source]);
+	const { locale } = useKitConfig();
+	const { data: fetchedData, loading, error } = useService(fetchAll, NO_RECORDS);
+	const [data, setData] = useState(NO_RECORDS);
+	useEffect(() => setData(fetchedData), [fetchedData]);
+	const reload = useCallback(async () => setData(await fetchAll()), [fetchAll]);
+	const { records, ...tableState } = useClientTableState({
+		data,
+		pagination,
+		locale
+	});
+	return {
+		records,
+		setRecords: setData,
+		reload,
+		loading,
+		error,
+		tableState,
+		paginated: pagination
+	};
+}
+export { useClientPagination };
+
+//# sourceMappingURL=useClientPagination.js.map

package/dist/component/organism/Table/useClientPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClientPagination.js","names":[],"sources":["../../../../src/component/organism/Table/useClientPagination.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { TableData } from './TableData';\nimport { useClientTableState } from '../ViewTable/useClientTableState';\nimport { ListDataSource } from '../../../data/ListDataSource';\nimport useService from '../../../hook/useService';\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useKitConfig } from '../../../provider/useKit';\n\n/** Initial records of the table, while they are fetched; a single constant, so it is stable across renders. */\nconst NO_RECORDS: never[] = [];\n\n/** Options of {@link useClientPagination}. */\nexport type ClientPaginationOptions = {\n    /** Whether the table is paginated; defaults to true. Without it, every record is shown. */\n    pagination?: boolean;\n};\n\n/** Fetches all records of a table. */\nexport type FetchAll<M> = () => Promise<M[]>;\n\n/**\n * Fetches all records of a {@link Table} at once (e.g. from an API), which the browser then sorts (following the locale)\n * and paginates.\n * @template M type of the records\n * @param source an object whose `findAll` fetches all records (e.g. a service), or a function that fetches them (e.g.\n *        with a filter). It must be stable (e.g. a module constant, or a function created with `useCallback`), since a\n *        new object or function fetches again: a `new Service()` inside the component would fetch on every render\n * @param options whether the table is paginated\n * @return the data to give to the `data` prop of the {@link Table}\n */\nexport function useClientPagination<M extends Identifiable>(\n    source: Pick<ListDataSource<M>, 'findAll'> | FetchAll<M>,\n    { pagination = true }: ClientPaginationOptions = {}\n): TableData<M> {\n    // Calls the method on the object, so it keeps its `this`.\n    const fetchAll = useMemo(() => (typeof source === 'function' ? source : () => source.findAll()), [source]);\n    const { locale } = useKitConfig();\n    const { data: fetchedData, loading, error } = useService<M[]>(fetchAll, NO_RECORDS);\n    const [data, setData] = useState<M[]>(NO_RECORDS);\n\n    useEffect(() => setData(fetchedData), [fetchedData]);\n\n    const reload = useCallback(async () => setData(await fetchAll()), [fetchAll]);\n    const { records, ...tableState } = useClientTableState({ data, pagination, locale });\n\n    return { records, setRecords: setData, reload, loading, error, tableState, paginated: pagination };\n}\n"],"mappings":";;;;;;;AAUA,IAAM,aAAsB,CAAC;;;;;;;;;;;AAqB7B,SAAgB,oBACZ,QACA,EAAE,aAAa,SAAkC,CAAC,GACtC;CAEZ,MAAM,WAAW,cAAe,OAAO,WAAW,aAAa,eAAe,OAAO,QAAQ,GAAI,CAAC,MAAM,CAAC;CACzG,MAAM,EAAE,WAAW,aAAa;CAChC,MAAM,EAAE,MAAM,aAAa,SAAS,UAAU,WAAgB,UAAU,UAAU;CAClF,MAAM,CAAC,MAAM,WAAW,SAAc,UAAU;CAEhD,gBAAgB,QAAQ,WAAW,GAAG,CAAC,WAAW,CAAC;CAEnD,MAAM,SAAS,YAAY,YAAY,QAAQ,MAAM,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;CAC5E,MAAM,EAAE,SAAS,GAAG,eAAe,oBAAoB;EAAE;EAAM;EAAY;CAAO,CAAC;CAEnF,OAAO;EAAE;EAAS,YAAY;EAAS;EAAQ;EAAS;EAAO;EAAY,WAAW;CAAW;AACrG"}

package/dist/component/organism/Table/useServerPagination.d.ts

@@ -0,0 +1,24 @@
+import { TableData } from './TableData';
+import { PageDataSource } from '../../../data/PageDataSource';
+import { FetchPage } from '../../../data/PageRequest';
+/** Options of {@link useServerPagination}. */
+export type ServerPaginationOptions = {
+    /**
+     * Number of the first page in the requests to the backend (e.g. 0 for Spring Data); defaults to 1. It only changes
+     * the `page` sent to the backend: the table always shows the pages starting at 1.
+     */
+    firstPage?: number;
+};
+/**
+ * Fetches one page at a time of a {@link Table}, already sorted and paginated by the backend. It goes back to page 1
+ * when the page size, the sort or the filter changes, and to the last existing page when the current one no longer
+ * exists (e.g. its last record was deleted).
+ * @template M type of the records
+ * @param source an object whose `findPage` fetches a page (e.g. a service), or a function that fetches it (e.g. with a
+ *        filter). A new object or function means that the filter changed, so it goes back to page 1 and fetches again.
+ *        Keep it stable otherwise (e.g. a module constant, or a function created with `useCallback`): a
+ *        `new Service()` inside the component would fetch on every render
+ * @param options number of the first page for the backend
+ * @return the data to give to the `data` prop of the {@link Table}
+ */
+export declare function useServerPagination<M>(source: PageDataSource<M> | FetchPage<M>, { firstPage }?: ServerPaginationOptions): TableData<M>;

package/dist/component/organism/Table/useServerPagination.js

@@ -0,0 +1,105 @@
+"use client";
+import { DEFAULT_SORT_STATUS, PAGE_SIZES } from "../ViewTable/TableState.js";
+import useService from "../../../hook/useService.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+// src/component/organism/Table/useServerPagination.ts
+/** Result before the first response; a single constant, so it is stable across renders. */
+var NO_PAGE = {
+	records: [],
+	totalRecords: 0
+};
+/**
+* Builds what is sent to the backend. The table state keeps the `columnAccessor`, as the header needs it to show the
+* sort indicator, but the backend must receive the `sortKey`, when the column has one.
+* @param request page (starting at {@link FIRST_PAGE}), size and sort chosen in the table
+* @param firstPage number of the first page for the backend
+*/
+function toBackendRequest(request, firstPage) {
+	const { page, sort } = request;
+	return {
+		...request,
+		page: page - 1 + firstPage,
+		sort: {
+			...sort,
+			columnAccessor: sort.sortKey ?? sort.columnAccessor
+		}
+	};
+}
+/**
+* Fetches one page at a time of a {@link Table}, already sorted and paginated by the backend. It goes back to page 1
+* when the page size, the sort or the filter changes, and to the last existing page when the current one no longer
+* exists (e.g. its last record was deleted).
+* @template M type of the records
+* @param source an object whose `findPage` fetches a page (e.g. a service), or a function that fetches it (e.g. with a
+*        filter). A new object or function means that the filter changed, so it goes back to page 1 and fetches again.
+*        Keep it stable otherwise (e.g. a module constant, or a function created with `useCallback`): a
+*        `new Service()` inside the component would fetch on every render
+* @param options number of the first page for the backend
+* @return the data to give to the `data` prop of the {@link Table}
+*/
+function useServerPagination(source, { firstPage = 1 } = {}) {
+	const fetchPage = useMemo(() => typeof source === "function" ? source : (request) => source.findPage(request), [source]);
+	const [request, setRequest] = useState({
+		page: 1,
+		size: PAGE_SIZES[0],
+		sort: DEFAULT_SORT_STATUS
+	});
+	const [previousFetchPage, setPreviousFetchPage] = useState(() => fetchPage);
+	if (fetchPage !== previousFetchPage) {
+		setPreviousFetchPage(() => fetchPage);
+		setRequest((current) => ({
+			...current,
+			page: 1
+		}));
+	}
+	const fetchCurrentPage = useCallback(() => fetchPage(toBackendRequest(request, firstPage)), [
+		fetchPage,
+		request,
+		firstPage
+	]);
+	const { data, loading, error } = useService(fetchCurrentPage, NO_PAGE);
+	const [records, setRecords] = useState([]);
+	useEffect(() => setRecords(data.records), [data]);
+	const lastPage = Math.max(Math.ceil(data.totalRecords / request.size), 1);
+	useEffect(() => {
+		if (!loading && request.page > lastPage) setRequest((current) => ({
+			...current,
+			page: lastPage
+		}));
+	}, [
+		loading,
+		request.page,
+		lastPage
+	]);
+	return {
+		records,
+		setRecords,
+		reload: useCallback(async () => setRequest((current) => ({ ...current })), []),
+		loading,
+		error,
+		tableState: {
+			page: request.page,
+			pageSize: request.size,
+			sortStatus: request.sort,
+			totalRecords: data.totalRecords,
+			onPageChange: (page) => setRequest((current) => ({
+				...current,
+				page
+			})),
+			onPageSizeChange: (size) => setRequest((current) => ({
+				...current,
+				size,
+				page: 1
+			})),
+			onSortStatusChange: (sort) => setRequest((current) => ({
+				...current,
+				sort,
+				page: 1
+			}))
+		},
+		paginated: true
+	};
+}
+export { useServerPagination };
+
+//# sourceMappingURL=useServerPagination.js.map

package/dist/component/organism/Table/useServerPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useServerPagination.js","names":[],"sources":["../../../../src/component/organism/Table/useServerPagination.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { TableData } from './TableData';\nimport { DEFAULT_SORT_STATUS, FIRST_PAGE, PAGE_SIZES } from '../ViewTable/TableState';\nimport { PageDataSource } from '../../../data/PageDataSource';\nimport { FetchPage, PageRequest, PageResult } from '../../../data/PageRequest';\nimport useService from '../../../hook/useService';\n\n/** Result before the first response; a single constant, so it is stable across renders. */\nconst NO_PAGE: PageResult<never> = { records: [], totalRecords: 0 };\n\n/** Options of {@link useServerPagination}. */\nexport type ServerPaginationOptions = {\n    /**\n     * Number of the first page in the requests to the backend (e.g. 0 for Spring Data); defaults to 1. It only changes\n     * the `page` sent to the backend: the table always shows the pages starting at 1.\n     */\n    firstPage?: number;\n};\n\n/**\n * Builds what is sent to the backend. The table state keeps the `columnAccessor`, as the header needs it to show the\n * sort indicator, but the backend must receive the `sortKey`, when the column has one.\n * @param request page (starting at {@link FIRST_PAGE}), size and sort chosen in the table\n * @param firstPage number of the first page for the backend\n */\nfunction toBackendRequest<M>(request: PageRequest<M>, firstPage: number): PageRequest<M> {\n    const { page, sort } = request;\n\n    return {\n        ...request,\n        page: page - FIRST_PAGE + firstPage,\n        sort: { ...sort, columnAccessor: sort.sortKey ?? sort.columnAccessor }\n    };\n}\n\n/**\n * Fetches one page at a time of a {@link Table}, already sorted and paginated by the backend. It goes back to page 1\n * when the page size, the sort or the filter changes, and to the last existing page when the current one no longer\n * exists (e.g. its last record was deleted).\n * @template M type of the records\n * @param source an object whose `findPage` fetches a page (e.g. a service), or a function that fetches it (e.g. with a\n *        filter). A new object or function means that the filter changed, so it goes back to page 1 and fetches again.\n *        Keep it stable otherwise (e.g. a module constant, or a function created with `useCallback`): a\n *        `new Service()` inside the component would fetch on every render\n * @param options number of the first page for the backend\n * @return the data to give to the `data` prop of the {@link Table}\n */\nexport function useServerPagination<M>(\n    source: PageDataSource<M> | FetchPage<M>,\n    { firstPage = FIRST_PAGE }: ServerPaginationOptions = {}\n): TableData<M> {\n    // Calls the method on the object, so it keeps its `this`.\n    const fetchPage = useMemo<FetchPage<M>>(\n        () => (typeof source === 'function' ? source : request => source.findPage(request)),\n        [source]\n    );\n    // A single object, so a copy of it fetches the same page again, and a change is always a single fetch.\n    const [request, setRequest] = useState<PageRequest<M>>({\n        page: FIRST_PAGE,\n        size: PAGE_SIZES[0],\n        sort: DEFAULT_SORT_STATUS\n    });\n    const [previousFetchPage, setPreviousFetchPage] = useState(() => fetchPage);\n\n    /* Done while rendering, as an effect would first fetch the new filter with the old page.\n       See https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes */\n    if (fetchPage !== previousFetchPage) {\n        setPreviousFetchPage(() => fetchPage);\n        setRequest(current => ({ ...current, page: FIRST_PAGE }));\n    }\n\n    const fetchCurrentPage = useCallback(\n        () => fetchPage(toBackendRequest(request, firstPage)),\n        [fetchPage, request, firstPage]\n    );\n    const { data, loading, error } = useService<PageResult<M>>(fetchCurrentPage, NO_PAGE);\n    const [records, setRecords] = useState<M[]>([]);\n\n    useEffect(() => setRecords(data.records), [data]);\n\n    const lastPage = Math.max(Math.ceil(data.totalRecords / request.size), FIRST_PAGE);\n\n    // The current page may not exist anymore (e.g. its last record was deleted).\n    useEffect(() => {\n        if (!loading && request.page > lastPage) setRequest(current => ({ ...current, page: lastPage }));\n    }, [loading, request.page, lastPage]);\n\n    const reload = useCallback(async () => setRequest(current => ({ ...current })), []);\n\n    return {\n        records,\n        setRecords,\n        reload,\n        loading,\n        error,\n        tableState: {\n            page: request.page,\n            pageSize: request.size,\n            sortStatus: request.sort,\n            totalRecords: data.totalRecords,\n            onPageChange: page => setRequest(current => ({ ...current, page })),\n            onPageSizeChange: size => setRequest(current => ({ ...current, size, page: FIRST_PAGE })),\n            onSortStatusChange: sort => setRequest(current => ({ ...current, sort, page: FIRST_PAGE }))\n        },\n        paginated: true\n    };\n}\n"],"mappings":";;;;;;AASA,IAAM,UAA6B;CAAE,SAAS,CAAC;CAAG,cAAc;AAAE;;;;;;;AAiBlE,SAAS,iBAAoB,SAAyB,WAAmC;CACrF,MAAM,EAAE,MAAM,SAAS;CAEvB,OAAO;EACH,GAAG;EACH,MAAM,OAAA,IAAoB;EAC1B,MAAM;GAAE,GAAG;GAAM,gBAAgB,KAAK,WAAW,KAAK;EAAe;CACzE;AACJ;;;;;;;;;;;;;AAcA,SAAgB,oBACZ,QACA,EAAE,YAAA,MAAoD,CAAC,GAC3C;CAEZ,MAAM,YAAY,cACP,OAAO,WAAW,aAAa,UAAS,YAAW,OAAO,SAAS,OAAO,GACjF,CAAC,MAAM,CACX;CAEA,MAAM,CAAC,SAAS,cAAc,SAAyB;EACnD,MAAA;EACA,MAAM,WAAW;EACjB,MAAM;CACV,CAAC;CACD,MAAM,CAAC,mBAAmB,wBAAwB,eAAe,SAAS;CAI1E,IAAI,cAAc,mBAAmB;EACjC,2BAA2B,SAAS;EACpC,YAAW,aAAY;GAAE,GAAG;GAAS,MAAA;EAAiB,EAAE;CAC5D;CAEA,MAAM,mBAAmB,kBACf,UAAU,iBAAiB,SAAS,SAAS,CAAC,GACpD;EAAC;EAAW;EAAS;CAAS,CAClC;CACA,MAAM,EAAE,MAAM,SAAS,UAAU,WAA0B,kBAAkB,OAAO;CACpF,MAAM,CAAC,SAAS,cAAc,SAAc,CAAC,CAAC;CAE9C,gBAAgB,WAAW,KAAK,OAAO,GAAG,CAAC,IAAI,CAAC;CAEhD,MAAM,WAAW,KAAK,IAAI,KAAK,KAAK,KAAK,eAAe,QAAQ,IAAI,GAAA,CAAa;CAGjF,gBAAgB;EACZ,IAAI,CAAC,WAAW,QAAQ,OAAO,UAAU,YAAW,aAAY;GAAE,GAAG;GAAS,MAAM;EAAS,EAAE;CACnG,GAAG;EAAC;EAAS,QAAQ;EAAM;CAAQ,CAAC;CAIpC,OAAO;EACH;EACA;EACA,QALW,YAAY,YAAY,YAAW,aAAY,EAAE,GAAG,QAAQ,EAAE,GAAG,CAAC,CAK7E;EACA;EACA;EACA,YAAY;GACR,MAAM,QAAQ;GACd,UAAU,QAAQ;GAClB,YAAY,QAAQ;GACpB,cAAc,KAAK;GACnB,eAAc,SAAQ,YAAW,aAAY;IAAE,GAAG;IAAS;GAAK,EAAE;GAClE,mBAAkB,SAAQ,YAAW,aAAY;IAAE,GAAG;IAAS;IAAM,MAAA;GAAiB,EAAE;GACxF,qBAAoB,SAAQ,YAAW,aAAY;IAAE,GAAG;IAAS;IAAM,MAAA;GAAiB,EAAE;EAC9F;EACA,WAAW;CACf;AACJ"}

package/dist/component/organism/ViewTable/DataTableView.d.ts

@@ -0,0 +1,39 @@
+import { DataTableColumn, DataTablePaginationProps, DataTableProps } from 'mantine-datatable';
+import { Identifiable } from '../../../model/Identifiable';
+import { TableState } from './TableState';
+/** Function that defines extra attributes (e.g. aria-label) for each pagination control button. */
+type PaginationControlPropsGetter = Extract<DataTablePaginationProps, {
+    page: number;
+}>['getPaginationControlProps'];
+/**
+ * Props of the {@link DataTable} passed straight through.
+ * Only the props actually used by the callers are accepted: using `Partial<DataTableProps<M>>` makes TypeScript combine
+ * the variants of the `DataTableProps` union with the ones of `paginationProps`, which exhausts the memory of `tsc`.
+ */
+type DataTablePassThroughProps<M extends Identifiable> = Pick<DataTableProps<M>, 'onRowClick' | 'rowStyle' | 'noRecordsText' | 'highlightOnHover' | 'highlightOnHoverColor' | 'className' | 'minHeight' | 'withColumnBorders' | 'verticalSpacing' | 'horizontalSpacing'>;
+/** Props of the {@link DataTableView} that do not depend on where the table is sorted and paginated. */
+export type DataTableViewBaseProps<M extends Identifiable> = {
+    columns: DataTableColumn<M>[];
+    /** Whether the records are being loaded. */
+    loading?: boolean;
+    /** Shows the ID column, automatically added to the given columns. */
+    showIdColumn?: boolean;
+    /** Extra attributes for the pagination control buttons, when the table is paginated. */
+    getPaginationControlProps?: PaginationControlPropsGetter;
+} & DataTablePassThroughProps<M>;
+/** Props of the {@link DataTableView}. */
+type DataTableViewProps<M extends Identifiable> = DataTableViewBaseProps<M> & {
+    /** Records shown, already sorted and cut to the current page. */
+    records: M[];
+    /** Pagination and sort of the table. */
+    state: TableState<M>;
+    /** Whether the pagination controls are shown. */
+    paginated: boolean;
+};
+/**
+ * Shows records as received, with the given pagination and sort (e.g. kept by a backend that paginates). It is the
+ * visual part of the tables, on top of the mantine-datatable `DataTable`, with the texts of the locale.
+ * @template M type of the records, shown one per row
+ */
+declare const DataTableView: <M extends Identifiable>({ records, state, paginated, columns, loading, showIdColumn, getPaginationControlProps, ...rest }: DataTableViewProps<M>) => import("react/jsx-runtime").JSX.Element;
+export default DataTableView;

package/dist/component/organism/ViewTable/DataTableView.js

@@ -0,0 +1,52 @@
+"use client";
+import { useKitConfig } from "../../../provider/useKit.js";
+import { PAGE_SIZES } from "./TableState.js";
+import { useRowKey } from "./useRowKey.js";
+import { jsx } from "react/jsx-runtime";
+import { DataTable } from "mantine-datatable";
+// src/component/organism/ViewTable/DataTableView.tsx
+/**
+* Shows records as received, with the given pagination and sort (e.g. kept by a backend that paginates). It is the
+* visual part of the tables, on top of the mantine-datatable `DataTable`, with the texts of the locale.
+* @template M type of the records, shown one per row
+*/
+var DataTableView = ({ records, state, paginated, columns, loading, showIdColumn = true, getPaginationControlProps, ...rest }) => {
+	const { messages } = useKitConfig();
+	const rowKey = useRowKey();
+	const effectiveColumns = [{
+		title: "ID",
+		accessor: "id",
+		hidden: !showIdColumn,
+		sortable: true,
+		render: (item) => /* @__PURE__ */ jsx("span", { children: item.id })
+	}, ...columns];
+	const paginationProps = paginated ? {
+		page: state.page,
+		onPageChange: state.onPageChange,
+		totalRecords: state.totalRecords,
+		recordsPerPage: state.pageSize,
+		recordsPerPageOptions: PAGE_SIZES,
+		onRecordsPerPageChange: state.onPageSizeChange,
+		recordsPerPageLabel: messages.table.recordsPerPage,
+		paginationText: messages.table.pagination,
+		getPaginationControlProps
+	} : {};
+	return /* @__PURE__ */ jsx(DataTable, {
+		minHeight: 200,
+		verticalSpacing: "sm",
+		striped: true,
+		columns: effectiveColumns,
+		records,
+		idAccessor: rowKey,
+		noRecordsText: messages.table.noRecords,
+		fetching: loading,
+		sortStatus: state.sortStatus,
+		onSortStatusChange: state.onSortStatusChange,
+		customRowAttributes: (record) => ({ "data-testid": `row-${record.id}` }),
+		...paginationProps,
+		...rest
+	});
+};
+export { DataTableView as default };
+
+//# sourceMappingURL=DataTableView.js.map

package/dist/component/organism/ViewTable/DataTableView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableView.js","names":[],"sources":["../../../../src/component/organism/ViewTable/DataTableView.tsx"],"sourcesContent":["'use client';\n\nimport { DataTable, DataTableColumn, DataTablePaginationProps, DataTableProps } from 'mantine-datatable';\n\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useKitConfig } from '../../../provider/useKit';\nimport { PAGE_SIZES, TableState } from './TableState';\nimport { useRowKey } from './useRowKey';\n\n/** Function that defines extra attributes (e.g. aria-label) for each pagination control button. */\ntype PaginationControlPropsGetter = Extract<DataTablePaginationProps, { page: number }>['getPaginationControlProps'];\n\n/**\n * Props of the {@link DataTable} passed straight through.\n * Only the props actually used by the callers are accepted: using `Partial<DataTableProps<M>>` makes TypeScript combine\n * the variants of the `DataTableProps` union with the ones of `paginationProps`, which exhausts the memory of `tsc`.\n */\ntype DataTablePassThroughProps<M extends Identifiable> = Pick<\n    DataTableProps<M>,\n    | 'onRowClick'\n    | 'rowStyle'\n    | 'noRecordsText'\n    | 'highlightOnHover'\n    | 'highlightOnHoverColor'\n    | 'className'\n    | 'minHeight'\n    | 'withColumnBorders'\n    | 'verticalSpacing'\n    | 'horizontalSpacing'\n>;\n\n/** Props of the {@link DataTableView} that do not depend on where the table is sorted and paginated. */\nexport type DataTableViewBaseProps<M extends Identifiable> = {\n    columns: DataTableColumn<M>[];\n\n    /** Whether the records are being loaded. */\n    loading?: boolean;\n\n    /** Shows the ID column, automatically added to the given columns. */\n    showIdColumn?: boolean;\n\n    /** Extra attributes for the pagination control buttons, when the table is paginated. */\n    getPaginationControlProps?: PaginationControlPropsGetter;\n} & DataTablePassThroughProps<M>;\n\n/** Props of the {@link DataTableView}. */\ntype DataTableViewProps<M extends Identifiable> = DataTableViewBaseProps<M> & {\n    /** Records shown, already sorted and cut to the current page. */\n    records: M[];\n\n    /** Pagination and sort of the table. */\n    state: TableState<M>;\n\n    /** Whether the pagination controls are shown. */\n    paginated: boolean;\n};\n\n/**\n * Shows records as received, with the given pagination and sort (e.g. kept by a backend that paginates). It is the\n * visual part of the tables, on top of the mantine-datatable `DataTable`, with the texts of the locale.\n * @template M type of the records, shown one per row\n */\nconst DataTableView = <M extends Identifiable>({\n    records,\n    state,\n    paginated,\n    columns,\n    loading,\n    showIdColumn = true,\n    getPaginationControlProps,\n    ...rest\n}: DataTableViewProps<M>) => {\n    const { messages } = useKitConfig();\n    const rowKey = useRowKey<M>();\n\n    const effectiveColumns: DataTableColumn<M>[] = [\n        {\n            title: 'ID',\n            accessor: 'id',\n            hidden: !showIdColumn,\n            sortable: true,\n            render: item => <span>{item.id}</span>\n        },\n        ...columns\n    ];\n\n    /* Typed only with the pagination props (and not as Partial<DataTableProps>) to not exhaust the memory of tsc.\n       See the comment of DataTablePassThroughProps. */\n    const paginationProps: DataTablePaginationProps = paginated\n        ? {\n              page: state.page,\n              onPageChange: state.onPageChange,\n              totalRecords: state.totalRecords,\n              recordsPerPage: state.pageSize,\n              recordsPerPageOptions: PAGE_SIZES,\n              onRecordsPerPageChange: state.onPageSizeChange,\n              recordsPerPageLabel: messages.table.recordsPerPage,\n              paginationText: messages.table.pagination,\n              getPaginationControlProps\n          }\n        : {};\n\n    // This DataTable is the one of https://www.npmjs.com/package/mantine-datatable (there are other libraries with this name).\n    return (\n        <DataTable\n            minHeight={200}\n            verticalSpacing=\"sm\"\n            striped\n            columns={effectiveColumns}\n            records={records}\n            idAccessor={rowKey}\n            noRecordsText={messages.table.noRecords}\n            fetching={loading}\n            sortStatus={state.sortStatus}\n            onSortStatusChange={state.onSortStatusChange}\n            customRowAttributes={record => ({ 'data-testid': `row-${record.id}` })}\n            {...paginationProps}\n            {...rest}\n        />\n    );\n};\n\nexport default DataTableView;\n"],"mappings":";;;;;;;;;;;;AA8DA,IAAM,iBAAyC,EAC3C,SACA,OACA,WACA,SACA,SACA,eAAe,MACf,2BACA,GAAG,WACsB;CACzB,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,SAAS,UAAa;CAE5B,MAAM,mBAAyC,CAC3C;EACI,OAAO;EACP,UAAU;EACV,QAAQ,CAAC;EACT,UAAU;EACV,SAAQ,SAAQ,oBAAC,QAAD,EAAA,UAAO,KAAK,GAAS,CAAA;CACzC,GACA,GAAG,OACP;CAIA,MAAM,kBAA4C,YAC5C;EACI,MAAM,MAAM;EACZ,cAAc,MAAM;EACpB,cAAc,MAAM;EACpB,gBAAgB,MAAM;EACtB,uBAAuB;EACvB,wBAAwB,MAAM;EAC9B,qBAAqB,SAAS,MAAM;EACpC,gBAAgB,SAAS,MAAM;EAC/B;CACJ,IACA,CAAC;CAGP,OACI,oBAAC,WAAD;EACI,WAAW;EACX,iBAAgB;EAChB,SAAA;EACA,SAAS;EACA;EACT,YAAY;EACZ,eAAe,SAAS,MAAM;EAC9B,UAAU;EACV,YAAY,MAAM;EAClB,oBAAoB,MAAM;EAC1B,sBAAqB,YAAW,EAAE,eAAe,OAAO,OAAO,KAAK;EACpE,GAAI;EACJ,GAAI;CACP,CAAA;AAET"}

package/dist/component/organism/ViewTable/TableState.d.ts

@@ -0,0 +1,30 @@
+import type { DataTableSortStatus } from 'mantine-datatable';
+/** Options of records per page. The largest one lets long tables (and end-to-end tests) show every row in one page. */
+export declare const PAGE_SIZES: number[];
+/** Number of the first page of a table. */
+export declare const FIRST_PAGE = 1;
+/** Default sort when neither `defaultSortStatus` nor `compare` is given. */
+export declare const DEFAULT_SORT_STATUS: {
+    readonly columnAccessor: 'id';
+    readonly direction: 'asc';
+};
+/**
+ * Pagination and sort of a table, with the callbacks that change them.
+ * @template M type of the records
+ */
+export type TableState<M> = {
+    /** Current page, starting at 1. */
+    page: number;
+    /** Records per page. */
+    pageSize: number;
+    /** Current sort. */
+    sortStatus: DataTableSortStatus<M>;
+    /** Total of records of all pages. */
+    totalRecords: number;
+    /** Called when the user chooses a page. */
+    onPageChange: (page: number) => void;
+    /** Called when the user chooses the records per page. */
+    onPageSizeChange: (pageSize: number) => void;
+    /** Called when the user chooses the sort. */
+    onSortStatusChange: (sortStatus: DataTableSortStatus<M>) => void;
+};

package/dist/component/organism/ViewTable/TableState.js

@@ -0,0 +1,19 @@
+"use client";
+// src/component/organism/ViewTable/TableState.ts
+/** Options of records per page. The largest one lets long tables (and end-to-end tests) show every row in one page. */
+var PAGE_SIZES = [
+	10,
+	20,
+	50,
+	200
+];
+/** Number of the first page of a table. */
+var FIRST_PAGE = 1;
+/** Default sort when neither `defaultSortStatus` nor `compare` is given. */
+var DEFAULT_SORT_STATUS = {
+	columnAccessor: "id",
+	direction: "asc"
+};
+export { DEFAULT_SORT_STATUS, FIRST_PAGE, PAGE_SIZES };
+
+//# sourceMappingURL=TableState.js.map

package/dist/component/organism/ViewTable/TableState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableState.js","names":[],"sources":["../../../../src/component/organism/ViewTable/TableState.ts"],"sourcesContent":["import type { DataTableSortStatus } from 'mantine-datatable';\n\n/*\nPagination and sort state of a table, and its initial values, shared by the state kept in the browser and the one kept\nfor a backend that paginates.\n*/\n\n/** Options of records per page. The largest one lets long tables (and end-to-end tests) show every row in one page. */\nexport const PAGE_SIZES = [10, 20, 50, 200];\n\n/** Number of the first page of a table. */\nexport const FIRST_PAGE = 1;\n\n/** Default sort when neither `defaultSortStatus` nor `compare` is given. */\nexport const DEFAULT_SORT_STATUS = { columnAccessor: 'id', direction: 'asc' } as const;\n\n/**\n * Pagination and sort of a table, with the callbacks that change them.\n * @template M type of the records\n */\nexport type TableState<M> = {\n    /** Current page, starting at 1. */\n    page: number;\n\n    /** Records per page. */\n    pageSize: number;\n\n    /** Current sort. */\n    sortStatus: DataTableSortStatus<M>;\n\n    /** Total of records of all pages. */\n    totalRecords: number;\n\n    /** Called when the user chooses a page. */\n    onPageChange: (page: number) => void;\n\n    /** Called when the user chooses the records per page. */\n    onPageSizeChange: (pageSize: number) => void;\n\n    /** Called when the user chooses the sort. */\n    onSortStatusChange: (sortStatus: DataTableSortStatus<M>) => void;\n};\n"],"mappings":";;;AAQA,IAAa,aAAa;CAAC;CAAI;CAAI;CAAI;AAAG;;AAG1C,IAAa,aAAa;;AAG1B,IAAa,sBAAsB;CAAE,gBAAgB;CAAM,WAAW;AAAM"}

package/dist/component/organism/ViewTable/ViewTable.d.ts

@@ -1,26 +1,13 @@
-import { DataTableColumn, DataTablePaginationProps, DataTableProps, DataTableSortStatus } from 'mantine-datatable';
+import { DataTableSortStatus } from 'mantine-datatable';
 import { Identifiable } from '../../../model/Identifiable';
 import { Comparator } from './ColumnComparator';
-/** Function that defines extra attributes (e.g. aria-label) for each pagination control button. */
-type PaginationControlPropsGetter = Extract<DataTablePaginationProps, {
-    page: number;
-}>['getPaginationControlProps'];
-/**
- * Props of the {@link DataTable} passed straight through by the ViewTable.
- * Only the props actually used by the callers are accepted: using `Partial<DataTableProps<M>>` makes TypeScript combine
- * the variants of the `DataTableProps` union with the ones of `paginationProps`, which exhausts the memory of `tsc`.
- */
-type DataTablePassThroughProps<M extends Identifiable> = Pick<DataTableProps<M>, 'onRowClick' | 'rowStyle' | 'noRecordsText' | 'highlightOnHover' | 'highlightOnHoverColor' | 'className' | 'minHeight' | 'withColumnBorders' | 'verticalSpacing' | 'horizontalSpacing'>;
-/**
- * TableProps is a generic type for the ViewTable component props.
- */
-type TableProps<M extends Identifiable> = {
+import { DataTableViewBaseProps } from './DataTableView';
+/** Props of the {@link ViewTable}. */
+type ViewTableProps<M extends Identifiable> = DataTableViewBaseProps<M> & {
+    /** All records of the table. */
     data: M[];
-    columns: DataTableColumn<M>[];
-    loading?: boolean;
+    /** Whether the table is paginated; defaults to true. Without it, every record is shown (e.g. a printed report). */
     pagination?: boolean;
-    /** Shows the ID column, automatically added to the given columns. */
-    showIdColumn?: boolean;
     /**
      * Initial sort of the table. Default: by `id`, ascending.
      * Give another value when the natural order of the data should not be by `id` (e.g. when the backend already
@@ -34,20 +21,11 @@ type TableProps<M extends Identifiable> = {
      * header of a column, the sort of the column applies.
      */
     compare?: Comparator<M>;
-    /** Extra attributes for the pagination control buttons. It only has effect when `pagination` is true. */
-    getPaginationControlProps?: PaginationControlPropsGetter;
-} & DataTablePassThroughProps<M>;
+};
 /**
- * The ViewTable component is a wrapper for the Mantine DataTable component.
- * @template M - Model that extends from {@link Identifiable}
- * @param data the data to be displayed in this ViewTable
- * @param {DataTableColumn<M>[]} columns - The columns to be displayed in this ViewTable
- * @param loading Indicates if the data to be displayed is being loaded yet or not
- * @param pagination Indicates whether to show pagination or not.
- * @param getPaginationControlProps extra attributes for the pagination control buttons
- * @param compare comparison function of the initial order, replaced by the sort of the column chosen in the header
- * @param rest remaining props, passed to the DataTable
- * @return the table with the data, sortable and (optionally) paginated
+ * Table that sorts (following the locale) and paginates in the browser all the given records, on top of the
+ * mantine-datatable `DataTable`.
+ * @template M type of the records, shown one per row
  */
-declare const ViewTable: <M extends Identifiable>({ data, columns, loading, pagination, showIdColumn, defaultSortStatus, compare, getPaginationControlProps, ...rest }: TableProps<M>) => import("react/jsx-runtime").JSX.Element;
+declare const ViewTable: <M extends Identifiable>({ data, pagination, defaultSortStatus, compare, ...rest }: ViewTableProps<M>) => import("react/jsx-runtime").JSX.Element;
 export default ViewTable;