+ );
+ })}
+
+ );
+}
+
+// Special memoized wrapper for our table body that we will use during column resizing.
+// See https://tanstack.com/table/v8/docs/framework/react/examples/column-resizing-performant
+const MemoizedTableBody = React.memo(
+ TableBody,
+ (prev, next) => prev.table.options.data === next.table.options.data
+) as typeof TableBody;
+
+/**
+ * Instead of calling `column.getSize()` on every render for every header
+ * and especially every data cell (very expensive),
+ * we will calculate all column sizes at once at the root table level in a useMemo
+ * and pass the column sizes down as CSS variables to the
element.
+ */
+function useColumnSizeVars(table: TanstackTable) {
+ const columnSizingInfo = table.getState().columnSizingInfo;
+ const columnSizing = table.getState().columnSizing;
+ const tableHeaders = table.getFlatHeaders();
+
+ // Needs to be useMemo, not useEffect, to avoid multiple render calls?
+ // Need to add columnSizingInfo to the dependency array to make resizing work
+ return useMemo(() => {
+ // Not used directly, but the memo must re-execute whenever this changes.
+ // Not: columnSizing seems to be needed as well, because otherwise resetting the column size (header.column.resetSize())
+ // won't to anything.
+ void columnSizingInfo, columnSizing;
+ const colSizes: { [key: string]: number } = {};
+ for (let i = 0; i < tableHeaders.length; i++) {
+ const header = tableHeaders[i]!;
+ colSizes[`--header-${header.id}-size`] = header.getSize();
+ colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+ }
+ return colSizes;
+ }, [tableHeaders, columnSizingInfo, columnSizing]);
+}
+
+type SortState = SortDirection | false;
+function mapAriaSorting(sortState: SortState) {
+ switch (sortState) {
+ case "asc":
+ return "ascending";
+ case "desc":
+ return "descending";
+ default:
+ return "none";
+ }
+}
diff --git a/src/packages/result-list/DataTable/SelectCheckbox.tsx b/src/packages/result-list/DataTable/SelectCheckbox.tsx
new file mode 100644
index 00000000..805a13d7
--- /dev/null
+++ b/src/packages/result-list/DataTable/SelectCheckbox.tsx
@@ -0,0 +1,49 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { Checkbox, Tooltip, chakra } from "@open-pioneer/chakra-integration";
+import { ChangeEvent } from "react";
+
+export interface SelectCheckboxProps {
+ className?: string;
+ ariaLabel?: string;
+ toolTipLabel?: string;
+ isIndeterminate?: boolean;
+ isChecked?: boolean;
+ isDisabled?: boolean;
+ onChange?: (event: ChangeEvent) => void;
+}
+
+export function SelectCheckbox({
+ isIndeterminate,
+ className,
+ toolTipLabel,
+ ariaLabel,
+ isChecked,
+ onChange,
+ isDisabled
+}: SelectCheckboxProps) {
+ const checkboxComponent = (
+
+ );
+ return toolTipLabel ? (
+
+
+ {checkboxComponent}
+
+
+ ) : (
+ checkboxComponent
+ );
+}
diff --git a/src/packages/result-list/DataTable/createColumns.test.ts b/src/packages/result-list/DataTable/createColumns.test.ts
new file mode 100644
index 00000000..2b715475
--- /dev/null
+++ b/src/packages/result-list/DataTable/createColumns.test.ts
@@ -0,0 +1,101 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { createIntl } from "@open-pioneer/test-utils/vanilla";
+import { AccessorFnColumnDef } from "@tanstack/react-table";
+import { afterEach, expect, it, vi } from "vitest";
+import { ResultColumn } from "../ResultList";
+import { SELECT_COLUMN_SIZE, createColumns } from "./createColumns";
+
+afterEach(() => {
+ vi.restoreAllMocks();
+});
+
+const intl = createIntl();
+
+it("expect createColumn to create columns correctly", async () => {
+ const resultListColumns = createResultListColumns();
+
+ // Slice away the selection checkbox column
+ const columns = createColumns(resultListColumns, intl).slice(1);
+ expect(columns.length).toEqual(resultListColumns.length);
+ const [simplePropColumn, colWithDisplayName, colWithWidth, colWithGetter] = columns;
+
+ expect(simplePropColumn!.id).toBe("result-list-col_0");
+ expect(simplePropColumn!.header).toBe("a");
+
+ expect(colWithDisplayName!.id).toBe("result-list-col_1");
+ expect(colWithDisplayName!.header).toBe("column title");
+
+ expect(colWithWidth!.id).toBe("result-list-col_2");
+ expect(colWithWidth!.size).toBe(150);
+
+ expect(colWithGetter!.id).toBe("result-list-col_3");
+ expect((colWithGetter as AccessorFnColumnDef).accessorFn({} as any, 123)).toBe(
+ "virtual value"
+ );
+});
+
+it("expect createColumn to distribute remaining width on columns with undefined width", async () => {
+ const metaData = dummyMetaDataMissingWidth;
+ const fullWidth = 1000;
+ // Slice away the selection checkbox column
+ const columns = createColumns(metaData, intl, fullWidth).slice(1);
+ const expectedWidth = (fullWidth - SELECT_COLUMN_SIZE - 300) / 2;
+ expect(columns[0]?.size).toEqual(metaData[0]!.width);
+ expect(columns[1]?.size).toEqual(expectedWidth);
+ expect(columns[2]?.size).toEqual(expectedWidth);
+ expect(columns[3]?.size).toEqual(metaData[3]!.width);
+});
+
+function createResultListColumns() {
+ const columns: ResultColumn[] = [
+ {
+ // no display name
+ id: "0",
+ propertyName: "a"
+ },
+ {
+ // display name
+ id: "1",
+ displayName: "column title",
+ propertyName: "a"
+ },
+ {
+ // explicit width
+ id: "2",
+ propertyName: "c",
+ width: 150
+ },
+ {
+ // Getter
+ id: "3",
+ propertyName: "d",
+ getPropertyValue(_feature) {
+ return "virtual value";
+ }
+ }
+ ];
+
+ return columns;
+}
+
+const dummyMetaDataMissingWidth: ResultColumn[] = [
+ {
+ propertyName: "h",
+ displayName: "Spalte H",
+ width: 100
+ },
+ {
+ propertyName: "i",
+ displayName: "Spalte I"
+ },
+ {
+ propertyName: "j",
+ displayName: "Spalte J"
+ },
+ {
+ propertyName: "k",
+ displayName: "Spalte K",
+ width: 200
+ }
+];
diff --git a/src/packages/result-list/DataTable/createColumns.tsx b/src/packages/result-list/DataTable/createColumns.tsx
new file mode 100644
index 00000000..cf0b24a6
--- /dev/null
+++ b/src/packages/result-list/DataTable/createColumns.tsx
@@ -0,0 +1,125 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { chakra } from "@open-pioneer/chakra-integration";
+import { BaseFeature } from "@open-pioneer/map";
+import { PackageIntl } from "@open-pioneer/runtime";
+import { createColumnHelper } from "@tanstack/react-table";
+import { Table as TanstackTable } from "@tanstack/table-core/build/lib/types";
+import { SelectCheckbox } from "./SelectCheckbox";
+import { ResultColumn } from "../ResultList";
+
+export const SELECT_COLUMN_SIZE = 70;
+const columnHelper = createColumnHelper();
+
+export function createColumns(columns: ResultColumn[], intl: PackageIntl, tableWidth?: number) {
+ const remainingColumnWidth: number | undefined =
+ tableWidth === undefined ? undefined : calcRemainingColumnWidth(columns, tableWidth);
+ const selectionColumn = createSelectionColumn(intl);
+ const columnDefs = columns.map((column, index) => {
+ const columnWidth = column.width || remainingColumnWidth;
+ const configuredId = column.id ?? column.propertyName ?? String(index);
+ return createColumn(column, columnWidth, "result-list-col_" + configuredId);
+ });
+ return [selectionColumn, ...columnDefs];
+}
+
+function createColumn(column: ResultColumn, columnWidth: number | undefined, id: string) {
+ const { propertyName, getPropertyValue } = column;
+ const hasPropertyValue = getPropertyValue != null || propertyName != null;
+
+ // TODO: Another issue
+ if (!hasPropertyValue) {
+ throw new Error(
+ "Display columns are not yet implemented. You must either specify 'propertyName' or 'getPropertyValue'."
+ );
+ }
+
+ return columnHelper.accessor(
+ (feature: BaseFeature) => {
+ return getPropertyValue?.(feature) ?? feature.properties?.[propertyName!];
+ },
+ {
+ id: id,
+ cell: (info) => {
+ const cellValue = info.getValue();
+ if (cellValue == null) {
+ return "";
+ }
+ return String(cellValue);
+ },
+ header: column.displayName ?? column.propertyName,
+ size: columnWidth
+ }
+ );
+}
+
+function createSelectionColumn(intl: PackageIntl) {
+ return columnHelper.display({
+ id: "selection-buttons",
+ size: SELECT_COLUMN_SIZE,
+ enableSorting: false,
+ header: ({ table }) => {
+ return (
+ {
+ e.stopPropagation();
+ }}
+ className="result-list-select-all-checkbox-container"
+ >
+
+
+ );
+ },
+ cell: ({ row }) => {
+ return (
+ {
+ e.stopPropagation();
+ }}
+ className="result-list-select-row-checkbox-container"
+ >
+
+
+ );
+ }
+ });
+}
+
+function calcRemainingColumnWidth(
+ columns: ResultColumn[],
+ tableWidth: number,
+ selectColumnWidth: number = SELECT_COLUMN_SIZE
+) {
+ const fullWidth = columns.reduce((sum, column) => (column.width ?? 0) + sum, 0);
+ const undefinedWidthCount = columns.reduce(
+ (sum, column) => (column.width === undefined ? sum + 1 : sum),
+ 0
+ );
+ const remainingWidth = tableWidth - selectColumnWidth - fullWidth;
+ return remainingWidth / undefinedWidthCount;
+}
+
+function getCheckboxToolTip(table: TanstackTable, intl: PackageIntl) {
+ if (table.getIsAllRowsSelected()) {
+ return intl.formatMessage({ id: "deSelectAllTooltip" });
+ } else {
+ return intl.formatMessage({ id: "selectAllTooltip" });
+ }
+}
diff --git a/src/packages/result-list/DataTable/useSetupTable.tsx b/src/packages/result-list/DataTable/useSetupTable.tsx
new file mode 100644
index 00000000..554ca599
--- /dev/null
+++ b/src/packages/result-list/DataTable/useSetupTable.tsx
@@ -0,0 +1,43 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { BaseFeature } from "@open-pioneer/map";
+import {
+ RowSelectionState,
+ SortingState,
+ getCoreRowModel,
+ getSortedRowModel,
+ useReactTable
+} from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import { DataTableProps } from "./DataTable";
+
+export function useSetupTable(props: DataTableProps) {
+ const { data, columns } = props;
+ const [sorting, setSorting] = useState([]);
+ const [rowSelection, setRowSelection] = useState({});
+
+ // Only sort by columns which actually exist
+ const actualSort = useMemo(() => {
+ return sorting.filter((sort) => columns.some((c) => c.id === sort.id));
+ }, [sorting, columns]);
+
+ const table = useReactTable({
+ columns: columns,
+ data,
+ getRowId(feature) {
+ return String(feature.id);
+ },
+ columnResizeMode: "onChange",
+ getCoreRowModel: getCoreRowModel(),
+ enableRowSelection: true,
+ onRowSelectionChange: setRowSelection,
+ onSortingChange: setSorting,
+ getSortedRowModel: getSortedRowModel(),
+ state: {
+ sorting: actualSort,
+ rowSelection
+ }
+ });
+
+ return { table, sorting, rowSelection };
+}
diff --git a/src/packages/result-list/LICENSE b/src/packages/result-list/LICENSE
new file mode 100644
index 00000000..7a4a3ea2
--- /dev/null
+++ b/src/packages/result-list/LICENSE
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/src/packages/result-list/README.md b/src/packages/result-list/README.md
new file mode 100644
index 00000000..ef4a2447
--- /dev/null
+++ b/src/packages/result-list/README.md
@@ -0,0 +1,186 @@
+# @open-pioneer/result-list
+
+This package provides a UI component to display features and their attributes.
+
+## Usage
+
+To add the package to your app, import `ResultList` from `@open-pioneer/result-list`.
+
+```tsx
+import { ResultList } from "@open-pioneer/result-list";
+;
+```
+
+See below for how to assemble the `input` parameter.
+
+### Configuring result list data and columns
+
+The `input` prop determines which features are displayed (`input.data`) and in what format (`input.columns`).
+`input` must conform to the TypeScript interface `ResultListInput`.
+
+`input.data` must be an array of features (TypeScript interface `BaseFeature`).
+Features can be defined manually (they are rather simple objects), but they can also be obtained from other package's UI Components,
+for example from `@open-pioneer/search` and `@open-pioneer/selection`.
+
+`input.columns` is an array of column definitions (TypeScript interface `ResultColumn`).
+These columns define which properties of the configured features are shown.
+The `ResultList` will render the specified columns in the order in which they are given.
+
+Consider a set of features which all have the properties `name` and `age`.
+In that case, a simple configuration of the `ResultList` may look as follows:
+
+```jsx
+
+```
+
+The `propertyName` of a column also serves as the default header content for that column.
+If you want to display the column with a different title, you can configure an optional `displayName`.
+
+If you want a column to have a defined width, you can provide the optional `width` attribute
+of the result list column in pixels.
+If some columns do not have an explicit width, the remaining space is distributed along these columns:
+
+```js
+// Column with explicit width.
+const columns = [
+ {
+ propertyName: "name",
+ width: 100
+ }
+];
+```
+
+If you want to display values that are not present directly on the feature (i.e. `feature.properties[propertyName]`),
+you can provide a `getPropertyValue` function to provide a custom value:
+
+```js
+// Simple computed column.
+// The `getPropertyValue` function is called for every feature.
+// It should be efficient because it can be invoked many times.
+const columns = [
+ {
+ displayName: "ID",
+ getPropertyValue(feature: BaseFeature) {
+ return feature.id;
+ }
+ }
+]
+```
+
+### Selection
+
+The user can select (and deselect) individual features by clicking on the checkbox at the beginning of a row.
+Another checkbox is present in the header of the table to select (or deselect) _all_ features in the table.
+
+### Sorting Data
+
+The user can click on a column header to sort the table by property values associated with that column.
+An icon within the header indicates the current sort order.
+
+Note that sorting only works for columns with associated sortable property values.
+
+### State management
+
+The result list will preserve its internal state by default if properties change.
+For example, when `data` or `columns` is modified, the scroll position, the selection and the sort order will remain the same (assuming the sorted column still exists).
+
+This is done to enable use cases such as:
+
+- dynamically showing or hiding certain columns depending on application state
+- dynamically adding new items to or removing items from the component
+- ...
+
+See example "Resetting component state" for how to throw away existing state under some circumstances.
+
+## Examples
+
+### Defining result list metadata on a layer
+
+Result list metadata (columns etc.) can be defined anywhere.
+It can be convenient to define them directly on a layer (via `attributes`), if features from that layer are always displayed in a certain way. For example:
+
+```js
+new SimpleLayer({
+ id: "ogc_kitas",
+ title: "Kindertagesstätten",
+ olLayer: createKitasLayer(),
+ attributes: {
+ "resultListColumns": [
+ {
+ propertyName: "id",
+ displayName: "ID",
+ width: 100,
+ getPropertyValue(feature: BaseFeature) {
+ return feature.id;
+ }
+ },
+ {
+ propertyName: "pointOfContact.address.postCode",
+ displayName: "PLZ",
+ width: 120
+ }
+ ]
+ }
+});
+```
+
+You can then simply retrieve the `resultListColumns` attribute at a later time by accessing `layer.attributes["resultListColumns"]`.
+Note that neither the map model nor the result list will interpret `resultListColumns` by itself in any way - this is a user defined attribute.
+You have to forward this attribute into the `columns` prop on your own.
+
+### Integrating the result list above the map
+
+The following snippet embeds the result list into a fixed-height box at the bottom of the container.
+The example assumes that the surround element (or one its parents) uses `position: relative`.
+
+Consider configuring the `viewPadding` on the related `MapContainer` whenever the result list component is being displayed
+to inform the map about the "overlay".
+
+```jsx
+
+
+
+```
+
+### Resetting component state
+
+As described under "Usage", the result list will usually attempt to preserve its existing state (selection, sort order, etc.) if its properties (data, columns, etc.) change.
+
+This may not be what you want if you're filling the result list with new, completely unrelated data.
+To force the result list to throw away its existing state, simply use React's `key` prop and assign it a new value, for example:
+
+```jsx
+
+```
+
+## License
+
+Apache-2.0 (see `LICENSE` file)
diff --git a/src/packages/result-list/ResultList.test.tsx b/src/packages/result-list/ResultList.test.tsx
new file mode 100644
index 00000000..36b7fb2e
--- /dev/null
+++ b/src/packages/result-list/ResultList.test.tsx
@@ -0,0 +1,398 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { BaseFeature } from "@open-pioneer/map";
+import { PackageContextProvider } from "@open-pioneer/test-utils/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { SpyInstance, afterEach, beforeEach, expect, it, vi } from "vitest";
+import { ResultColumn, ResultList, ResultListInput } from "./ResultList";
+import { Point } from "ol/geom";
+
+afterEach(() => {
+ vi.restoreAllMocks();
+});
+
+let errorSpy!: SpyInstance;
+beforeEach(() => {
+ errorSpy = vi.spyOn(console, "error");
+});
+
+function doNothing() {}
+
+it("expect result list to be created successfully", async () => {
+ render(
+
+
+
+ );
+
+ const { resultListDiv } = await waitForResultList();
+ expect(resultListDiv).toMatchSnapshot();
+});
+
+it("expect result list column and row count to match data/metadata", async () => {
+ render(
+
+
+
+ );
+
+ const { allHeaderElements, allRows } = await waitForResultList();
+
+ // +1 because of the added selection column
+ expect(allHeaderElements.length).toEqual(dummyColumns.length + 1);
+ expect(allRows.length).toEqual(dummyFeatureData.length);
+});
+
+it("expect empty data text to be shown", async () => {
+ const emptyData: ResultListInput = {
+ data: [],
+ columns: dummyColumns
+ };
+
+ let error;
+ try {
+ render(
+
+
+
+ );
+ } catch (e) {
+ error = new Error("unexpected failure");
+ }
+
+ const { resultListDiv } = await waitForResultList();
+
+ expect(error).not.toBeDefined();
+ expect(resultListDiv.textContent).toEqual("noDataMessage");
+ expect(resultListDiv).toMatchSnapshot();
+});
+
+it("expect empty metadata to throw error", async () => {
+ errorSpy.mockImplementation(doNothing);
+
+ const emptyMetadata: ResultListInput = {
+ data: dummyFeatureData,
+ columns: []
+ };
+
+ expect(() => {
+ render(
+
+
+
+ );
+ }).toThrowErrorMatchingSnapshot();
+
+ expect(errorSpy).toHaveBeenCalledOnce();
+});
+
+it("expect getPropertyValue to be used correctly", async () => {
+ const getPropertyValueMock = vi.fn((_feature) => {
+ return "virtual property";
+ });
+ const dummyFeatureData: BaseFeature[] = [
+ {
+ id: "1",
+ properties: {
+ "b": "123",
+ "c": undefined
+ },
+ geometry: undefined
+ }
+ ];
+ const columns: ResultColumn[] = [
+ {
+ propertyName: "properties.b",
+ displayName: "Spalte B",
+ width: 50,
+ getPropertyValue: getPropertyValueMock
+ }
+ ];
+ const resultListInput = {
+ data: dummyFeatureData,
+ columns: columns
+ };
+
+ render(
+
+
+
+ );
+
+ const { allRows } = await waitForResultList();
+
+ expect(getPropertyValueMock).toHaveBeenCalled();
+ expect(getPropertyValueMock).toHaveBeenCalledWith(dummyFeatureData[0]);
+ expect(allRows.item(0).children[1]?.textContent).toEqual("virtual property");
+});
+
+it("expect changes of data and metadata to change full table", async () => {
+ const renderResult = render(
+
+
+
+ );
+
+ const { allHeaderElements, allRows } = await waitForResultList();
+
+ // +1 because of the added selection column
+ expect(allHeaderElements.length).toEqual(dummyColumns.length + 1);
+ expect(allRows.length).toEqual(dummyFeatureData.length);
+
+ renderResult.rerender(
+
+
+
+ );
+
+ const { allHeaderElements: allHeaderElementsAlt, allRows: allRowsAlt } =
+ await waitForResultList();
+
+ // Ensure dummydata is different
+ expect(allHeaderElements.length).not.toEqual(allHeaderElementsAlt.length);
+ expect(allRows.length).not.toEqual(allRowsAlt.length);
+ // +1 because of the added selection column
+ expect(allHeaderElementsAlt.length).toEqual(dummyMetaDataAlt.length + 1);
+ expect(allRowsAlt.length).toEqual(dummyFeatureDataAlt.length);
+});
+
+it("expect selection column to be added", async () => {
+ render(
+
+
+
+ );
+
+ const { selectAllSelect, selectRowSelects } = await waitForResultList();
+ expect(selectAllSelect).toBeDefined();
+ expect(selectRowSelects).toBeDefined();
+ expect(selectRowSelects.length).toEqual(dummyFeatureData.length);
+});
+
+it("expect all rows to be selected and deselected", async () => {
+ render(
+
+
+
+ );
+
+ const { selectAllSelect, selectRowSelects } = await waitForResultList();
+ expect(selectAllSelect).toBeDefined();
+ expect(selectRowSelects).toBeDefined();
+
+ expect(selectAllSelect!.checked).toBeFalsy();
+ selectRowSelects.forEach((checkbox) => expect(checkbox.checked).toBeFalsy());
+
+ act(() => {
+ fireEvent.click(selectAllSelect!);
+ });
+
+ expect(selectAllSelect!.checked).toBeTruthy();
+ selectRowSelects.forEach((checkbox) => expect(checkbox.checked).toBeTruthy());
+
+ act(() => {
+ fireEvent.click(selectAllSelect!);
+ });
+
+ expect(selectAllSelect!.checked).toBeFalsy();
+ selectRowSelects.forEach((checkbox) => expect(checkbox.checked).toBeFalsy());
+});
+
+it("expect result list display all data types", async () => {
+ render(
+
+
+
+ );
+
+ const { allRows } = await waitForResultList();
+ const firstRowCells = Array.from(allRows[0]!.querySelectorAll("td"));
+ expect(firstRowCells).toHaveLength(6);
+
+ const [selectCell, stringCell, integerCell, floatCell, trueCell, ..._rest] = firstRowCells;
+ expect(selectCell!.innerHTML).includes(" {
+ const resultListDiv: HTMLDivElement | null =
+ await screen.findByTestId("result-list");
+ if (!resultListDiv) {
+ throw new Error("Result list not rendered");
+ }
+
+ const allHeaderElements =
+ resultListDiv.querySelectorAll("thead tr th");
+
+ const allRows = resultListDiv.querySelectorAll("tbody tr");
+
+ const selectAllSelect = resultListDiv.querySelector(
+ ".result-list-select-all-checkbox input"
+ );
+
+ const selectRowSelects = resultListDiv.querySelectorAll(
+ ".result-list-select-row-checkbox input"
+ );
+
+ return {
+ resultListDiv,
+ allHeaderElements,
+ allRows,
+ selectAllSelect,
+ selectRowSelects
+ };
+ });
+}
+
+const DATE_FORMAT = Intl.DateTimeFormat("de-DE", {
+ dateStyle: "full",
+ timeStyle: "full",
+ timeZone: "UTC"
+});
+
+// Stable date format for tests.
+function formatDate(date: Date) {
+ return DATE_FORMAT.format(date);
+}
+
+const dummyFeatureData: BaseFeature[] = [
+ {
+ id: "1",
+ properties: {
+ "a": "Test",
+ "b": 123,
+ "c": 4.567,
+ "d": true,
+ "e": formatDate(new Date("2020-05-12T23:50:21.817Z"))
+ },
+ geometry: new Point([404567.3, 5757788.32])
+ },
+ {
+ id: "2",
+ properties: {
+ "a": "Test123",
+ "b": 434,
+ "c": 78.567,
+ "d": false,
+ "e": formatDate(new Date("2021-05-12T23:50:21.817Z"))
+ },
+ geometry: new Point([406510.87, 5758314.82])
+ },
+ {
+ id: "3",
+ properties: {
+ "a": "Testabc",
+ "b": 666,
+ "c": 8.597,
+ "d": true,
+ "e": formatDate(new Date("2020-10-12T23:30:21.817Z"))
+ },
+ geometry: new Point([406590.87, 5758311.82])
+ },
+ {
+ id: "4",
+ properties: {
+ "a": null,
+ "b": undefined,
+ "c": "",
+ "d": undefined,
+ "e": undefined
+ },
+ geometry: new Point([406590.87, 5758311.82])
+ }
+];
+
+const dummyColumns: ResultColumn[] = [
+ {
+ propertyName: "a",
+ displayName: "Spalte A",
+ width: 100
+ },
+ {
+ propertyName: "b",
+ displayName: "Spalte B",
+ width: 50
+ },
+ {
+ propertyName: "c",
+ displayName: "Spalte C",
+ width: 150
+ },
+ {
+ propertyName: "d",
+ displayName: "Spalte D",
+ width: 75
+ },
+ {
+ propertyName: "e",
+ displayName: "Spalte E",
+ width: 50
+ }
+];
+
+const dummyFeatureDataAlt: BaseFeature[] = [
+ {
+ id: "1",
+ properties: {
+ "f": "Test 42",
+ "g": undefined
+ },
+ geometry: undefined
+ }
+];
+
+const dummyMetaDataAlt: ResultColumn[] = [
+ {
+ propertyName: "f",
+ displayName: "Spalte F",
+ width: 200
+ },
+ {
+ propertyName: "g",
+ displayName: "Spalte G",
+ width: 300
+ }
+];
diff --git a/src/packages/result-list/ResultList.tsx b/src/packages/result-list/ResultList.tsx
new file mode 100644
index 00000000..672dc2a0
--- /dev/null
+++ b/src/packages/result-list/ResultList.tsx
@@ -0,0 +1,134 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { Box } from "@open-pioneer/chakra-integration";
+import { BaseFeature } from "@open-pioneer/map";
+import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
+import { useIntl } from "open-pioneer:react-hooks";
+import { FC, RefObject, useEffect, useMemo, useRef, useState } from "react";
+import { DataTable } from "./DataTable/DataTable";
+import { createColumns } from "./DataTable/createColumns";
+
+/**
+ * Configures a column in the result list component.
+ *
+ * A column typically renders a property from the underlying feature.
+ */
+export interface ResultColumn {
+ /**
+ * Use this option to define an explicit column id.
+ * This can be helpful to track your column when it moves in the table (for example, the sort order can be maintained).
+ *
+ * If this is not defined, {@link propertyName} will serve as a fallback.
+ * If that is also not defined, the column index will be used instead.
+ */
+ id?: string;
+
+ /**
+ * The display name of this column.
+ *
+ * If no `displayName` has been configured, {@link propertyName} will serve as a fallback value.
+ * If `propertyName` is also undefined, no column header will be rendered at all.
+ */
+ displayName?: string;
+
+ /**
+ * The width of this column, in pixels.
+ */
+ width?: number;
+
+ /**
+ * The property name to render.
+ *
+ * The value is expected to be available as `feature.properties[propertyName]`.
+ *
+ * See also {@link getPropertyValue}.
+ */
+ propertyName?: string;
+
+ /**
+ * Define this function to return a custom property value for this column.
+ *
+ * This can be used to create derived columns (by combining multiple properties into one value)
+ * or to create columns for property that don't exist directly on the feature.
+ *
+ * The return value of this function will be rendered by the table.
+ */
+ getPropertyValue?: (feature: BaseFeature) => unknown;
+}
+
+/**
+ * Configures the result list's content.
+ */
+export interface ResultListInput {
+ /**
+ * Configures the columns shown by the result list.
+ */
+ columns: ResultColumn[];
+
+ /**
+ * The data shown by the result list component.
+ * Every feature will be rendered as an individual row.
+ */
+ data: BaseFeature[];
+}
+
+/**
+ * Properties supported by the {@link ResultList} component.
+ */
+export interface ResultListProps extends CommonComponentProps {
+ /**
+ * The id of the map.
+ */
+ mapId?: string;
+
+ /**
+ * Describes the data rendered by the component.
+ */
+ input: ResultListInput;
+}
+
+/**
+ * A component that displays a set of features as a list.
+ */
+export const ResultList: FC = (props) => {
+ const { containerProps } = useCommonComponentProps("result-list", props);
+ const intl = useIntl();
+ const {
+ input: { data, columns }
+ } = props;
+ if (columns.length === 0) {
+ throw Error("No columns were defined. The result list cannot be displayed.");
+ }
+
+ const containerRef = useRef(null);
+ const tableWidth = useTableWidth(containerRef);
+ const dataTableColumns = useMemo(
+ () => createColumns(columns, intl, tableWidth),
+ [columns, intl, tableWidth]
+ );
+
+ return (
+
+
+
+ );
+};
+
+function useTableWidth(tableRef: RefObject | null) {
+ const [tableWidth, setTableWidth] = useState();
+
+ useEffect(() => {
+ if (!tableRef?.current) return;
+ const resizeObserver = new ResizeObserver((event) => {
+ // Depending on the layout, you may need to swap inlineSize with blockSize
+ // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize
+ const width = event[0]?.contentBoxSize[0]?.inlineSize;
+ if (width != null) {
+ setTableWidth(width);
+ }
+ });
+ resizeObserver.observe(tableRef.current);
+ return () => resizeObserver.disconnect();
+ }, [tableRef]);
+ return tableWidth;
+}
diff --git a/src/packages/result-list/__snapshots__/ResultList.test.tsx.snap b/src/packages/result-list/__snapshots__/ResultList.test.tsx.snap
new file mode 100644
index 00000000..1a3573eb
--- /dev/null
+++ b/src/packages/result-list/__snapshots__/ResultList.test.tsx.snap
@@ -0,0 +1,437 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`expect empty data text to be shown 1`] = `
+