@ifto/mantine-kit 0.4.0 → 0.5.2

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;

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

@@ -1,113 +1,28 @@
 "use client";
 import { useKitConfig } from "../../../provider/useKit.js";
-import { columnComparator } from "./ColumnComparator.js";
-import { useRowKey } from "./useRowKey.js";
-import { useEffect, useMemo, useState } from "react";
+import DataTableView from "./DataTableView.js";
+import { useClientTableState } from "./useClientTableState.js";
 import { jsx } from "react/jsx-runtime";
-import { DataTable } from "mantine-datatable";
 // src/component/organism/ViewTable/ViewTable.tsx
-/** 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
-];
-/** Default sort when neither `defaultSortStatus` nor `compare` is given. */
-var DEFAULT_SORT_STATUS = {
-	columnAccessor: "id",
-	direction: "asc"
-};
 /**
-* Sort used while the `compare` function applies, when `defaultSortStatus` is not given: it matches no column, so no
-* header shows the sort indicator, and the first click on any column sorts it in ascending order.
+* 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
 */
-var NO_COLUMN_SORT_STATUS = {
-	columnAccessor: "",
-	direction: "asc"
-};
-/**
-* 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
-*/
-var ViewTable = ({ data, columns, loading, pagination = true, showIdColumn = true, defaultSortStatus, compare, getPaginationControlProps, ...rest }) => {
-	const { locale, messages } = useKitConfig();
-	const [page, setPage] = useState(1);
-	const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
-	const [sortStatus, setSortStatus] = useState(defaultSortStatus ?? (compare ? NO_COLUMN_SORT_STATUS : DEFAULT_SORT_STATUS));
-	const [compareActive, setCompareActive] = useState(compare !== void 0);
-	const sortedData = useMemo(() => {
-		const comparator = compareActive && compare ? compare : columnComparator(sortStatus, locale);
-		return [...data].sort(comparator);
-	}, [
+var ViewTable = ({ data, pagination = true, defaultSortStatus, compare, ...rest }) => {
+	const { locale } = useKitConfig();
+	const { records, ...state } = useClientTableState({
 		data,
-		sortStatus,
-		compareActive,
-		compare,
-		locale
-	]);
-	const records = useMemo(() => {
-		if (!pagination) return sortedData;
-		const from = (page - 1) * pageSize;
-		return sortedData.slice(from, from + pageSize);
-	}, [
-		sortedData,
 		pagination,
-		page,
-		pageSize
-	]);
-	const rowKey = useRowKey();
-	function changeSortStatus(status) {
-		setCompareActive(false);
-		setSortStatus(status);
-	}
-	const effectiveColumns = [{
-		title: "ID",
-		accessor: "id",
-		hidden: !showIdColumn,
-		sortable: true,
-		render: (item) => /* @__PURE__ */ jsx("span", { children: item.id })
-	}, ...columns];
-	useEffect(() => {
-		setPage(1);
-	}, [pageSize]);
-	useEffect(() => {
-		const totalPages = Math.ceil(data.length / pageSize);
-		setPage((currentPage) => totalPages && currentPage > totalPages ? totalPages : currentPage);
-	}, [data.length, pageSize]);
-	const paginationProps = pagination ? {
-		page,
-		onPageChange: (p) => setPage(p),
-		totalRecords: data.length,
-		recordsPerPage: pageSize,
-		recordsPerPageOptions: PAGE_SIZES,
-		onRecordsPerPageChange: setPageSize,
-		recordsPerPageLabel: messages.table.recordsPerPage,
-		paginationText: messages.table.pagination,
-		getPaginationControlProps
-	} : {};
-	return /* @__PURE__ */ jsx(DataTable, {
-		minHeight: 200,
-		verticalSpacing: "sm",
-		striped: true,
-		columns: effectiveColumns,
+		locale,
+		defaultSortStatus,
+		compare
+	});
+	return /* @__PURE__ */ jsx(DataTableView, {
+		...rest,
 		records,
-		idAccessor: rowKey,
-		noRecordsText: messages.table.noRecords,
-		fetching: loading,
-		sortStatus,
-		onSortStatusChange: changeSortStatus,
-		customRowAttributes: (record) => ({ "data-testid": `row-${record.id}` }),
-		...paginationProps,
-		...rest
+		state,
+		paginated: pagination
 	});
 };
 export { ViewTable as default };

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

@@ -1 +1 @@
-{"version":3,"file":"ViewTable.js","names":[],"sources":["../../../../src/component/organism/ViewTable/ViewTable.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\n\nimport {\n    DataTable,\n    DataTableColumn,\n    DataTablePaginationProps,\n    DataTableProps,\n    DataTableSortStatus\n} from 'mantine-datatable';\n\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useKitConfig } from '../../../provider/useKit';\nimport { columnComparator, Comparator } from './ColumnComparator';\nimport { useRowKey } from './useRowKey';\n\n/** Options of records per page. The largest one lets long tables (and end-to-end tests) show every row in one page. */\nconst PAGE_SIZES = [10, 20, 50, 200];\n\n/** Default sort when neither `defaultSortStatus` nor `compare` is given. */\nconst DEFAULT_SORT_STATUS = { columnAccessor: 'id', direction: 'asc' } as const;\n\n/**\n * Sort used while the `compare` function applies, when `defaultSortStatus` is not given: it matches no column, so no\n * header shows the sort indicator, and the first click on any column sorts it in ascending order.\n */\nconst NO_COLUMN_SORT_STATUS = { columnAccessor: '', direction: 'asc' } as const;\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 by the ViewTable.\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/**\n * TableProps is a generic type for the ViewTable component props.\n */\ntype TableProps<M extends Identifiable> = {\n    data: M[];\n    columns: DataTableColumn<M>[];\n    loading?: boolean;\n    pagination?: boolean;\n    /** Shows the ID column, automatically added to the given columns. */\n    showIdColumn?: boolean;\n    /**\n     * Initial sort of the table. Default: by `id`, ascending.\n     * Give another value when the natural order of the data should not be by `id` (e.g. when the backend already\n     * returns the data in an order to keep). Along with `compare`, it only tells which header shows the sort indicator\n     * in the initial order.\n     */\n    defaultSortStatus?: DataTableSortStatus<M>;\n    /**\n     * Comparison function that defines the initial order, instead of the column of `defaultSortStatus`. It allows\n     * sorting by more than one criterion (e.g. city and, in the same city, year descending). After the user clicks the\n     * header of a column, the sort of the column applies.\n     */\n    compare?: Comparator<M>;\n    /** Extra attributes for the pagination control buttons. It only has effect when `pagination` is true. */\n    getPaginationControlProps?: PaginationControlPropsGetter;\n} & DataTablePassThroughProps<M>;\n\n/**\n * The ViewTable component is a wrapper for the Mantine DataTable component.\n * @template M - Model that extends from {@link Identifiable}\n * @param data the data to be displayed in this ViewTable\n * @param {DataTableColumn<M>[]} columns - The columns to be displayed in this ViewTable\n * @param loading Indicates if the data to be displayed is being loaded yet or not\n * @param pagination Indicates whether to show pagination or not.\n * @param getPaginationControlProps extra attributes for the pagination control buttons\n * @param compare comparison function of the initial order, replaced by the sort of the column chosen in the header\n * @param rest remaining props, passed to the DataTable\n * @return the table with the data, sortable and (optionally) paginated\n */\nconst ViewTable = <M extends Identifiable>({\n    data,\n    columns,\n    loading,\n    pagination = true,\n    showIdColumn = true,\n    defaultSortStatus,\n    compare,\n    getPaginationControlProps,\n    ...rest\n}: TableProps<M>) => {\n    const { locale, messages } = useKitConfig();\n    const [page, setPage] = useState(1);\n    const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);\n    const [sortStatus, setSortStatus] = useState<DataTableSortStatus<M>>(\n        defaultSortStatus ?? (compare ? NO_COLUMN_SORT_STATUS : DEFAULT_SORT_STATUS)\n    );\n    // The `compare` function applies until the user chooses a column in the header.\n    const [compareActive, setCompareActive] = useState(compare !== undefined);\n\n    /*\n     * Sorts all records before cutting the page, so each page (including in descending order) shows its part of the\n     * whole set. The copy keeps the order of the given array. It is separate from the page cut, so not everything is\n     * sorted again on every change of page or page size.\n     */\n    const sortedData = useMemo(() => {\n        const comparator = compareActive && compare ? compare : columnComparator(sortStatus, locale);\n\n        return [...data].sort(comparator);\n    }, [data, sortStatus, compareActive, compare, locale]);\n\n    // Without pagination, shows all records (e.g. a printed report), not only the ones of the first page.\n    const records = useMemo(() => {\n        if (!pagination) return sortedData;\n\n        const from = (page - 1) * pageSize;\n        return sortedData.slice(from, from + pageSize);\n    }, [sortedData, pagination, page, pageSize]);\n    const rowKey = useRowKey<M>();\n\n    function changeSortStatus(status: DataTableSortStatus<M>): void {\n        setCompareActive(false);\n        setSortStatus(status);\n    }\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    useEffect(() => {\n        setPage(1);\n    }, [pageSize]);\n\n    /* If the data shrinks, goes back to the last existing page. The functional update avoids using an outdated `page`\n       when the effect above has just gone back to page 1. */\n    useEffect(() => {\n        const totalPages = Math.ceil(data.length / pageSize);\n        setPage(currentPage => (totalPages && currentPage > totalPages ? totalPages : currentPage));\n    }, [data.length, pageSize]);\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 = pagination\n        ? {\n              page,\n              onPageChange: p => setPage(p),\n              totalRecords: data.length,\n              recordsPerPage: pageSize,\n              recordsPerPageOptions: PAGE_SIZES,\n              onRecordsPerPageChange: setPageSize,\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={sortStatus}\n            onSortStatusChange={changeSortStatus}\n            customRowAttributes={record => ({ 'data-testid': `row-${record.id}` })}\n            {...paginationProps}\n            {...rest}\n        />\n    );\n};\n\nexport default ViewTable;\n"],"mappings":";;;;;;;;;AAkBA,IAAM,aAAa;CAAC;CAAI;CAAI;CAAI;AAAG;;AAGnC,IAAM,sBAAsB;CAAE,gBAAgB;CAAM,WAAW;AAAM;;;;;AAMrE,IAAM,wBAAwB;CAAE,gBAAgB;CAAI,WAAW;AAAM;;;;;;;;;;;;;AA+DrE,IAAM,aAAqC,EACvC,MACA,SACA,SACA,aAAa,MACb,eAAe,MACf,mBACA,SACA,2BACA,GAAG,WACc;CACjB,MAAM,EAAE,QAAQ,aAAa,aAAa;CAC1C,MAAM,CAAC,MAAM,WAAW,SAAS,CAAC;CAClC,MAAM,CAAC,UAAU,eAAe,SAAS,WAAW,EAAE;CACtD,MAAM,CAAC,YAAY,iBAAiB,SAChC,sBAAsB,UAAU,wBAAwB,oBAC5D;CAEA,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY,KAAA,CAAS;CAOxE,MAAM,aAAa,cAAc;EAC7B,MAAM,aAAa,iBAAiB,UAAU,UAAU,iBAAiB,YAAY,MAAM;EAE3F,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,UAAU;CACpC,GAAG;EAAC;EAAM;EAAY;EAAe;EAAS;CAAM,CAAC;CAGrD,MAAM,UAAU,cAAc;EAC1B,IAAI,CAAC,YAAY,OAAO;EAExB,MAAM,QAAQ,OAAO,KAAK;EAC1B,OAAO,WAAW,MAAM,MAAM,OAAO,QAAQ;CACjD,GAAG;EAAC;EAAY;EAAY;EAAM;CAAQ,CAAC;CAC3C,MAAM,SAAS,UAAa;CAE5B,SAAS,iBAAiB,QAAsC;EAC5D,iBAAiB,KAAK;EACtB,cAAc,MAAM;CACxB;CAEA,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;CAEA,gBAAgB;EACZ,QAAQ,CAAC;CACb,GAAG,CAAC,QAAQ,CAAC;CAIb,gBAAgB;EACZ,MAAM,aAAa,KAAK,KAAK,KAAK,SAAS,QAAQ;EACnD,SAAQ,gBAAgB,cAAc,cAAc,aAAa,aAAa,WAAY;CAC9F,GAAG,CAAC,KAAK,QAAQ,QAAQ,CAAC;CAI1B,MAAM,kBAA4C,aAC5C;EACI;EACA,eAAc,MAAK,QAAQ,CAAC;EAC5B,cAAc,KAAK;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,wBAAwB;EACxB,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;EACE;EACZ,oBAAoB;EACpB,sBAAqB,YAAW,EAAE,eAAe,OAAO,OAAO,KAAK;EACpE,GAAI;EACJ,GAAI;CACP,CAAA;AAET"}
+{"version":3,"file":"ViewTable.js","names":[],"sources":["../../../../src/component/organism/ViewTable/ViewTable.tsx"],"sourcesContent":["'use client';\n\nimport { DataTableSortStatus } from 'mantine-datatable';\n\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useKitConfig } from '../../../provider/useKit';\nimport { Comparator } from './ColumnComparator';\nimport DataTableView, { DataTableViewBaseProps } from './DataTableView';\nimport { useClientTableState } from './useClientTableState';\n\n/** Props of the {@link ViewTable}. */\ntype ViewTableProps<M extends Identifiable> = DataTableViewBaseProps<M> & {\n    /** All records of the table. */\n    data: M[];\n\n    /** Whether the table is paginated; defaults to true. Without it, every record is shown (e.g. a printed report). */\n    pagination?: boolean;\n\n    /**\n     * Initial sort of the table. Default: by `id`, ascending.\n     * Give another value when the natural order of the data should not be by `id` (e.g. when the backend already\n     * returns the data in an order to keep). Along with `compare`, it only tells which header shows the sort indicator\n     * in the initial order.\n     */\n    defaultSortStatus?: DataTableSortStatus<M>;\n\n    /**\n     * Comparison function that defines the initial order, instead of the column of `defaultSortStatus`. It allows\n     * sorting by more than one criterion (e.g. city and, in the same city, year descending). After the user clicks the\n     * header of a column, the sort of the column applies.\n     */\n    compare?: Comparator<M>;\n};\n\n/**\n * Table that sorts (following the locale) and paginates in the browser all the given records, on top of the\n * mantine-datatable `DataTable`.\n * @template M type of the records, shown one per row\n */\nconst ViewTable = <M extends Identifiable>({\n    data,\n    pagination = true,\n    defaultSortStatus,\n    compare,\n    ...rest\n}: ViewTableProps<M>) => {\n    const { locale } = useKitConfig();\n    const { records, ...state } = useClientTableState({ data, pagination, locale, defaultSortStatus, compare });\n\n    return <DataTableView {...rest} records={records} state={state} paginated={pagination} />;\n};\n\nexport default ViewTable;\n"],"mappings":";;;;;;;;;;;AAuCA,IAAM,aAAqC,EACvC,MACA,aAAa,MACb,mBACA,SACA,GAAG,WACkB;CACrB,MAAM,EAAE,WAAW,aAAa;CAChC,MAAM,EAAE,SAAS,GAAG,UAAU,oBAAoB;EAAE;EAAM;EAAY;EAAQ;EAAmB;CAAQ,CAAC;CAE1G,OAAO,oBAAC,eAAD;EAAe,GAAI;EAAe;EAAgB;EAAO,WAAW;CAAa,CAAA;AAC5F"}

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

@@ -0,0 +1,25 @@
+import type { DataTableSortStatus } from 'mantine-datatable';
+import { Comparator } from './ColumnComparator';
+import { TableState } from './TableState';
+/** Options of {@link useClientTableState}. */
+type ClientTableOptions<M> = {
+    /** All records of the table. */
+    data: M[];
+    /** Whether only the records of the current page are returned. */
+    pagination: boolean;
+    /** Locale of the text comparison. */
+    locale: string;
+    /** Initial sort; defaults to {@link DEFAULT_SORT_STATUS}, or to no column when `compare` is given. */
+    defaultSortStatus?: DataTableSortStatus<M>;
+    /** Comparison function of the initial order, replaced by the sort of the column chosen in the header. */
+    compare?: Comparator<M>;
+};
+/**
+ * Sorts and paginates in the browser all the records of a table.
+ * @template M type of the records
+ * @return the state of the table and the records to show
+ */
+export declare function useClientTableState<M>({ data, pagination, locale, defaultSortStatus, compare }: ClientTableOptions<M>): TableState<M> & {
+    records: M[];
+};
+export {};

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

@@ -0,0 +1,68 @@
+"use client";
+import { columnComparator } from "./ColumnComparator.js";
+import { DEFAULT_SORT_STATUS, PAGE_SIZES } from "./TableState.js";
+import { useEffect, useMemo, useState } from "react";
+// src/component/organism/ViewTable/useClientTableState.ts
+/**
+* Sort used while the `compare` function applies, when `defaultSortStatus` is not given: it matches no column, so no
+* header shows the sort indicator, and the first click on any column sorts it in ascending order.
+*/
+var NO_COLUMN_SORT_STATUS = {
+	columnAccessor: "",
+	direction: "asc"
+};
+/**
+* Sorts and paginates in the browser all the records of a table.
+* @template M type of the records
+* @return the state of the table and the records to show
+*/
+function useClientTableState({ data, pagination, locale, defaultSortStatus, compare }) {
+	const [page, setPage] = useState(1);
+	const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
+	const [sortStatus, setSortStatus] = useState(defaultSortStatus ?? (compare ? NO_COLUMN_SORT_STATUS : DEFAULT_SORT_STATUS));
+	const [compareActive, setCompareActive] = useState(compare !== void 0);
+	const sortedData = useMemo(() => {
+		const comparator = compareActive && compare ? compare : columnComparator(sortStatus, locale);
+		return [...data].sort(comparator);
+	}, [
+		data,
+		sortStatus,
+		compareActive,
+		compare,
+		locale
+	]);
+	const records = useMemo(() => {
+		if (!pagination) return sortedData;
+		const from = (page - 1) * pageSize;
+		return sortedData.slice(from, from + pageSize);
+	}, [
+		sortedData,
+		pagination,
+		page,
+		pageSize
+	]);
+	function changeSortStatus(status) {
+		setCompareActive(false);
+		setSortStatus(status);
+	}
+	useEffect(() => {
+		setPage(1);
+	}, [pageSize]);
+	useEffect(() => {
+		const totalPages = Math.ceil(data.length / pageSize);
+		setPage((currentPage) => totalPages && currentPage > totalPages ? totalPages : currentPage);
+	}, [data.length, pageSize]);
+	return {
+		records,
+		page,
+		pageSize,
+		sortStatus,
+		totalRecords: data.length,
+		onPageChange: setPage,
+		onPageSizeChange: setPageSize,
+		onSortStatusChange: changeSortStatus
+	};
+}
+export { useClientTableState };
+
+//# sourceMappingURL=useClientTableState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useClientTableState.js","names":[],"sources":["../../../../src/component/organism/ViewTable/useClientTableState.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport type { DataTableSortStatus } from 'mantine-datatable';\n\nimport { columnComparator, Comparator } from './ColumnComparator';\nimport { DEFAULT_SORT_STATUS, FIRST_PAGE, PAGE_SIZES, TableState } from './TableState';\n\n/**\n * Sort used while the `compare` function applies, when `defaultSortStatus` is not given: it matches no column, so no\n * header shows the sort indicator, and the first click on any column sorts it in ascending order.\n */\nconst NO_COLUMN_SORT_STATUS = { columnAccessor: '', direction: 'asc' } as const;\n\n/** Options of {@link useClientTableState}. */\ntype ClientTableOptions<M> = {\n    /** All records of the table. */\n    data: M[];\n\n    /** Whether only the records of the current page are returned. */\n    pagination: boolean;\n\n    /** Locale of the text comparison. */\n    locale: string;\n\n    /** Initial sort; defaults to {@link DEFAULT_SORT_STATUS}, or to no column when `compare` is given. */\n    defaultSortStatus?: DataTableSortStatus<M>;\n\n    /** Comparison function of the initial order, replaced by the sort of the column chosen in the header. */\n    compare?: Comparator<M>;\n};\n\n/**\n * Sorts and paginates in the browser all the records of a table.\n * @template M type of the records\n * @return the state of the table and the records to show\n */\nexport function useClientTableState<M>({\n    data,\n    pagination,\n    locale,\n    defaultSortStatus,\n    compare\n}: ClientTableOptions<M>): TableState<M> & { records: M[] } {\n    const [page, setPage] = useState(FIRST_PAGE);\n    const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);\n    const [sortStatus, setSortStatus] = useState<DataTableSortStatus<M>>(\n        defaultSortStatus ?? (compare ? NO_COLUMN_SORT_STATUS : DEFAULT_SORT_STATUS)\n    );\n    // The `compare` function applies until the user chooses a column in the header.\n    const [compareActive, setCompareActive] = useState(compare !== undefined);\n\n    /*\n     * Sorts all records before cutting the page, so each page (including in descending order) shows its part of the\n     * whole set. The copy keeps the order of the given array. It is separate from the page cut, so not everything is\n     * sorted again on every change of page or page size.\n     */\n    const sortedData = useMemo(() => {\n        const comparator = compareActive && compare ? compare : columnComparator(sortStatus, locale);\n\n        return [...data].sort(comparator);\n    }, [data, sortStatus, compareActive, compare, locale]);\n\n    // Without pagination, shows all records (e.g. a printed report), not only the ones of the first page.\n    const records = useMemo(() => {\n        if (!pagination) return sortedData;\n\n        const from = (page - 1) * pageSize;\n        return sortedData.slice(from, from + pageSize);\n    }, [sortedData, pagination, page, pageSize]);\n\n    function changeSortStatus(status: DataTableSortStatus<M>): void {\n        setCompareActive(false);\n        setSortStatus(status);\n    }\n\n    useEffect(() => {\n        setPage(FIRST_PAGE);\n    }, [pageSize]);\n\n    /* If the data shrinks, goes back to the last existing page. The functional update avoids using an outdated `page`\n       when the effect above has just gone back to page 1. */\n    useEffect(() => {\n        const totalPages = Math.ceil(data.length / pageSize);\n        setPage(currentPage => (totalPages && currentPage > totalPages ? totalPages : currentPage));\n    }, [data.length, pageSize]);\n\n    return {\n        records,\n        page,\n        pageSize,\n        sortStatus,\n        totalRecords: data.length,\n        onPageChange: setPage,\n        onPageSizeChange: setPageSize,\n        onSortStatusChange: changeSortStatus\n    };\n}\n"],"mappings":";;;;;;;;;AAWA,IAAM,wBAAwB;CAAE,gBAAgB;CAAI,WAAW;AAAM;;;;;;AAyBrE,SAAgB,oBAAuB,EACnC,MACA,YACA,QACA,mBACA,WACwD;CACxD,MAAM,CAAC,MAAM,WAAW,SAAA,CAAmB;CAC3C,MAAM,CAAC,UAAU,eAAe,SAAS,WAAW,EAAE;CACtD,MAAM,CAAC,YAAY,iBAAiB,SAChC,sBAAsB,UAAU,wBAAwB,oBAC5D;CAEA,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY,KAAA,CAAS;CAOxE,MAAM,aAAa,cAAc;EAC7B,MAAM,aAAa,iBAAiB,UAAU,UAAU,iBAAiB,YAAY,MAAM;EAE3F,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,UAAU;CACpC,GAAG;EAAC;EAAM;EAAY;EAAe;EAAS;CAAM,CAAC;CAGrD,MAAM,UAAU,cAAc;EAC1B,IAAI,CAAC,YAAY,OAAO;EAExB,MAAM,QAAQ,OAAO,KAAK;EAC1B,OAAO,WAAW,MAAM,MAAM,OAAO,QAAQ;CACjD,GAAG;EAAC;EAAY;EAAY;EAAM;CAAQ,CAAC;CAE3C,SAAS,iBAAiB,QAAsC;EAC5D,iBAAiB,KAAK;EACtB,cAAc,MAAM;CACxB;CAEA,gBAAgB;EACZ,QAAA,CAAkB;CACtB,GAAG,CAAC,QAAQ,CAAC;CAIb,gBAAgB;EACZ,MAAM,aAAa,KAAK,KAAK,KAAK,SAAS,QAAQ;EACnD,SAAQ,gBAAgB,cAAc,cAAc,aAAa,aAAa,WAAY;CAC9F,GAAG,CAAC,KAAK,QAAQ,QAAQ,CAAC;CAE1B,OAAO;EACH;EACA;EACA;EACA;EACA,cAAc,KAAK;EACnB,cAAc;EACd,kBAAkB;EAClB,oBAAoB;CACxB;AACJ"}

package/dist/component/template/ListPage/ListPage.d.ts

@@ -1,10 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
-import { DataTableColumn } from 'mantine-datatable';
-import { ListDataSource } from '../../../data/ListDataSource';
-import { Identifiable } from '../../../model/Identifiable';
 import { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';
-import { ActionsSettings } from '../../organism/Table/Table';
-interface ListPageProps<T, S> {
+/** Props of the {@link ListPage}. */
+type ListPageProps = {
     /** Title of the page (e.g. "Regions"). */
     title: string;
     /** Plural name of the records, used in the title of the table card. */
@@ -12,21 +9,14 @@ interface ListPageProps<T, S> {
     breadcrumbItems: BreadcrumbItem[];
     /** Route of the "Add" button; absent for no button. */
     addActionRoute?: string;
-    /** Source of the records and of their deletion. */
-    service: S;
-    tableColumns: DataTableColumn<T>[];
-    /** Base path of the pages of the records (e.g. `/region`). */
-    resourceBasePath: string;
-    actionsSettings?: Partial<ActionsSettings>;
     /** Extra content above the table (e.g. filters). */
-    children?: ReactNode;
-    customFetchMethod?: () => Promise<T[]>;
-    /** Builds the URL opened to view a record. If absent, the default view route is used. */
-    getViewUrl?: (item: T) => string;
-}
+    filters?: ReactNode;
+    /** Table of the records (e.g. a `Table`). */
+    children: ReactNode;
+};
 /**
- * List page of records: header with the "Add" button, optional extra content (e.g. filters) and the table of the
- * records, with the view, edit and delete actions.
+ * List page of records: header with the "Add" button, optional filters and the table of the records, given as
+ * children, inside a card.
  */
-declare function ListPage<M extends Identifiable, S extends ListDataSource<M>>(props: ListPageProps<M, S>): ReactElement;
+declare function ListPage({ title, titlePlural, breadcrumbItems, addActionRoute, filters, children }: ListPageProps): ReactElement;
 export default ListPage;

package/dist/component/template/ListPage/ListPage.js

@@ -2,16 +2,14 @@
 import { useDocumentTitle, useKitMessages } from "../../../provider/useKit.js";
 import PaperCard from "../../molecule/PaperCard/PaperCard.js";
 import PageHeader from "../../organism/PageHeader/PageHeader.js";
-import Table from "../../organism/Table/Table.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Group, Stack, Text } from "@mantine/core";
 // src/component/template/ListPage/ListPage.tsx
 /**
-* List page of records: header with the "Add" button, optional extra content (e.g. filters) and the table of the
-* records, with the view, edit and delete actions.
+* List page of records: header with the "Add" button, optional filters and the table of the records, given as
+* children, inside a card.
 */
-function ListPage(props) {
-	const { title, titlePlural, breadcrumbItems, addActionRoute, service, tableColumns, resourceBasePath, actionsSettings, children, customFetchMethod, getViewUrl } = props;
+function ListPage({ title, titlePlural, breadcrumbItems, addActionRoute, filters, children }) {
 	const documentTitle = useDocumentTitle(title);
 	const messages = useKitMessages();
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: documentTitle }), /* @__PURE__ */ jsxs(Stack, {
@@ -22,7 +20,7 @@ function ListPage(props) {
 				breadcrumbItems,
 				addActionRoute
 			}),
-			children && /* @__PURE__ */ jsx(Stack, { children }),
+			filters && /* @__PURE__ */ jsx(Stack, { children: filters }),
 			/* @__PURE__ */ jsxs(PaperCard, { children: [/* @__PURE__ */ jsx(Group, {
 				justify: "space-between",
 				mb: "md",
@@ -31,14 +29,7 @@ function ListPage(props) {
 					fw: 600,
 					children: messages.table.listTitle(titlePlural)
 				})
-			}), /* @__PURE__ */ jsx(Table, {
-				service,
-				basePath: resourceBasePath,
-				columns: tableColumns,
-				customFetchMethod,
-				actionsSettings,
-				getViewUrl
-			})] })
+			}), children] })
 		]
 	})] });
 }

package/dist/component/template/ListPage/ListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/ListPage/ListPage.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nimport { Group, Stack, Text } from '@mantine/core';\nimport { DataTableColumn } from 'mantine-datatable';\n\nimport { ListDataSource } from '../../../data/ListDataSource';\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useDocumentTitle, useKitMessages } from '../../../provider/useKit';\nimport { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';\nimport PaperCard from '../../molecule/PaperCard/PaperCard';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\nimport Table, { ActionsSettings } from '../../organism/Table/Table';\n\ninterface ListPageProps<T, S> {\n    /** Title of the page (e.g. \"Regions\"). */\n    title: string;\n\n    /** Plural name of the records, used in the title of the table card. */\n    titlePlural: string;\n    breadcrumbItems: BreadcrumbItem[];\n\n    /** Route of the \"Add\" button; absent for no button. */\n    addActionRoute?: string;\n\n    /** Source of the records and of their deletion. */\n    service: S;\n    tableColumns: DataTableColumn<T>[];\n\n    /** Base path of the pages of the records (e.g. `/region`). */\n    resourceBasePath: string;\n    actionsSettings?: Partial<ActionsSettings>;\n\n    /** Extra content above the table (e.g. filters). */\n    children?: ReactNode;\n    customFetchMethod?: () => Promise<T[]>;\n\n    /** Builds the URL opened to view a record. If absent, the default view route is used. */\n    getViewUrl?: (item: T) => string;\n}\n\n/**\n * List page of records: header with the \"Add\" button, optional extra content (e.g. filters) and the table of the\n * records, with the view, edit and delete actions.\n */\nfunction ListPage<M extends Identifiable, S extends ListDataSource<M>>(props: ListPageProps<M, S>): ReactElement {\n    const {\n        title,\n        titlePlural,\n        breadcrumbItems,\n        addActionRoute,\n        service,\n        tableColumns,\n        resourceBasePath,\n        actionsSettings,\n        children,\n        customFetchMethod,\n        getViewUrl\n    } = props;\n    const documentTitle = useDocumentTitle(title);\n    const messages = useKitMessages();\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader title={title} breadcrumbItems={breadcrumbItems} addActionRoute={addActionRoute} />\n                {children && <Stack>{children}</Stack>}\n                <PaperCard>\n                    <Group justify=\"space-between\" mb=\"md\">\n                        <Text fz=\"lg\" fw={600}>\n                            {messages.table.listTitle(titlePlural)}\n                        </Text>\n                    </Group>\n                    <Table<M, S>\n                        service={service}\n                        basePath={resourceBasePath}\n                        columns={tableColumns}\n                        customFetchMethod={customFetchMethod}\n                        actionsSettings={actionsSettings}\n                        getViewUrl={getViewUrl}\n                    />\n                </PaperCard>\n            </Stack>\n        </>\n    );\n}\n\nexport default ListPage;\n"],"mappings":";;;;;;;;;;;;AA4CA,SAAS,SAA8D,OAA0C;CAC7G,MAAM,EACF,OACA,aACA,iBACA,gBACA,SACA,cACA,kBACA,iBACA,UACA,mBACA,eACA;CACJ,MAAM,gBAAgB,iBAAiB,KAAK;CAC5C,MAAM,WAAW,eAAe;CAEhC,OACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD,EAAA,UAAQ,cAAqB,CAAA,GAC7B,qBAAC,OAAD;EAAO,KAAI;EAAX,UAAA;GACI,oBAAC,YAAD;IAAmB;IAAwB;IAAiC;GAAiB,CAAA;GAC5F,YAAY,oBAAC,OAAD,EAAQ,SAAgB,CAAA;GACrC,qBAAC,WAAD,EAAA,UAAA,CACI,oBAAC,OAAD;IAAO,SAAQ;IAAgB,IAAG;IAC9B,UAAA,oBAAC,MAAD;KAAM,IAAG;KAAK,IAAI;KACb,UAAA,SAAS,MAAM,UAAU,WAAW;IACnC,CAAA;GACH,CAAA,GACP,oBAAC,OAAD;IACa;IACT,UAAU;IACV,SAAS;IACU;IACF;IACL;GACf,CAAA,CACM,EAAA,CAAA;EACR;CACT,CAAA,CAAA,EAAA,CAAA;AAEV"}
+{"version":3,"file":"ListPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/ListPage/ListPage.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nimport { Group, Stack, Text } from '@mantine/core';\n\nimport { useDocumentTitle, useKitMessages } from '../../../provider/useKit';\nimport { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';\nimport PaperCard from '../../molecule/PaperCard/PaperCard';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\n\n/** Props of the {@link ListPage}. */\ntype ListPageProps = {\n    /** Title of the page (e.g. \"Regions\"). */\n    title: string;\n\n    /** Plural name of the records, used in the title of the table card. */\n    titlePlural: string;\n    breadcrumbItems: BreadcrumbItem[];\n\n    /** Route of the \"Add\" button; absent for no button. */\n    addActionRoute?: string;\n\n    /** Extra content above the table (e.g. filters). */\n    filters?: ReactNode;\n\n    /** Table of the records (e.g. a `Table`). */\n    children: ReactNode;\n};\n\n/**\n * List page of records: header with the \"Add\" button, optional filters and the table of the records, given as\n * children, inside a card.\n */\nfunction ListPage({\n    title,\n    titlePlural,\n    breadcrumbItems,\n    addActionRoute,\n    filters,\n    children\n}: ListPageProps): ReactElement {\n    const documentTitle = useDocumentTitle(title);\n    const messages = useKitMessages();\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader title={title} breadcrumbItems={breadcrumbItems} addActionRoute={addActionRoute} />\n                {filters && <Stack>{filters}</Stack>}\n                <PaperCard>\n                    <Group justify=\"space-between\" mb=\"md\">\n                        <Text fz=\"lg\" fw={600}>\n                            {messages.table.listTitle(titlePlural)}\n                        </Text>\n                    </Group>\n                    {children}\n                </PaperCard>\n            </Stack>\n        </>\n    );\n}\n\nexport default ListPage;\n"],"mappings":";;;;;;;;;;;AAgCA,SAAS,SAAS,EACd,OACA,aACA,iBACA,gBACA,SACA,YAC4B;CAC5B,MAAM,gBAAgB,iBAAiB,KAAK;CAC5C,MAAM,WAAW,eAAe;CAEhC,OACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD,EAAA,UAAQ,cAAqB,CAAA,GAC7B,qBAAC,OAAD;EAAO,KAAI;EAAX,UAAA;GACI,oBAAC,YAAD;IAAmB;IAAwB;IAAiC;GAAiB,CAAA;GAC5F,WAAW,oBAAC,OAAD,EAAA,UAAQ,QAAe,CAAA;GACnC,qBAAC,WAAD,EAAA,UAAA,CACI,oBAAC,OAAD;IAAO,SAAQ;IAAgB,IAAG;IAC9B,UAAA,oBAAC,MAAD;KAAM,IAAG;KAAK,IAAI;KACb,UAAA,SAAS,MAAM,UAAU,WAAW;IACnC,CAAA;GACH,CAAA,GACN,QACM,EAAA,CAAA;EACR;CACT,CAAA,CAAA,EAAA,CAAA;AAEV"}

package/dist/data/PageDataSource.d.ts

@@ -0,0 +1,10 @@
+import type { PageRequest, PageResult } from './PageRequest';
+/**
+ * Source of the pages of a table, sorted and paginated by the backend (e.g. a service that accesses a paginated API).
+ * Any object with this method works, without extending a class.
+ * @template M type of the records
+ */
+export interface PageDataSource<M> {
+    /** Fetches a page of records. */
+    findPage(request: PageRequest<M>): Promise<PageResult<M>>;
+}

package/dist/data/PageDataSource.js

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

package/dist/data/PageRequest.d.ts

@@ -0,0 +1,29 @@
+import type { DataTableSortStatus } from 'mantine-datatable';
+/**
+ * Page of records requested from the backend.
+ * @template M type of the records
+ */
+export type PageRequest<M> = {
+    /** Number of the page, starting at the `firstPage` option of `useServerPagination` (1 by default). */
+    page: number;
+    /** Maximum number of records of the page. */
+    size: number;
+    /** Sort to apply. `columnAccessor` holds the `sortKey` of the column, if it has one, or else its `accessor`. */
+    sort: DataTableSortStatus<M>;
+};
+/**
+ * Page of records returned by the backend.
+ * @template M type of the records
+ */
+export type PageResult<M> = {
+    /** Records of the page, already sorted by the backend. */
+    records: M[];
+    /** Total of records of all pages. */
+    totalRecords: number;
+};
+/**
+ * Fetches a page of records, as the `findPage` of a `PageDataSource`. It must be stable (e.g. with `useCallback`),
+ * since a new function means that the filter changed, so the table fetches again from page 1.
+ * @template M type of the records
+ */
+export type FetchPage<M> = (request: PageRequest<M>) => Promise<PageResult<M>>;

package/dist/data/PageRequest.js

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

package/dist/hook/useService.d.ts

@@ -1,10 +1,10 @@
 /** Values returned by {@link useService}. */
 export type UseService<D> = {
-    /** Data of the fetch, or the initial value while it has not finished (or if it failed). */
+    /** Data of the last successful fetch, or the initial value if none has finished yet. */
     data: D;
-    /** Error of the fetch; `null` if it has not finished yet or succeeded. */
+    /** Error of the current fetch; `null` if it has not finished yet or succeeded. */
     error: unknown | null;
-    /** Whether the fetch has not finished yet. */
+    /** Whether the current fetch has not finished yet. */
     loading: boolean;
 };
 /**