# FilteredData

## Overview

- A generic library for rendering a filtered list of items (not a standalone web component).
- Currently used by several web components, e.g. Furniture overview, Inspired gallery, Product catalogue, MSDS Search.

## Arguments

- `getData (props)` - Asynchronous function responsible for loading data, receives all additional props passed to the main component. The data should be returned as a list of objects. Keys should be proper names, translated if necessary (e.g. Categorie, Titel). This is important as the data will be used for the filters. Example:

  ```js
  ;[
    {
      Category: 'Foo',
      Title: 'Bar',
      Text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eademne, quae restincta siti',
      'Last Updated': '2024-07-23T11:14:12.001Z',
      'Multiple values': ['Foo', 'Bar']
    },
    {
      // ...
    }
  ]
  ```

- `filters` - A list of filters (or a function to return them, receiving `items`). Each filter is an object with three mandatory keys: `type`, `label` and `keys`:

  ```js
  ;[
    {
      type: 'text', // One of 'text', 'select' or 'order'.
      label: 'Search', // Display name, defaults to first existing field name from the "keys" entry.
      keys: ['Title', 'Text', 'Category'] // Data fields to include in the filter. Non-existing data field (including empty string) creates a placeholder label for dropdowns. The last entry is used for hash navigation, ensure it is unique among all keys.
    }
  ]
  ```

- `Items ({ items })` - Preact component to render the item list.
- `i18n` - An object for translations with the following structure (set to `null` to disable particular feature):

  ```js
  {
    loading: 'Loading...',
    loadingError: 'Failed to load data.',
    loadMore: 'Load more',
    resetFilters: 'Reset filters',
    ascending: 'ascending',
    descending: 'descending',
    noResults: 'No results found.'
  }
  ```
