FilterableTable

What is the FilterableTable component?

The FilterableTable component is one of the Vue components served by the @unep-wcmc/wcmc-components NPM package.

What can it do?

Using this component can save you the time and effort of building a new table in your project so you can focus on project-specific work. It partners with the wcmc_components gem, which sets up some endpoints that the FilterableTable component can shoot requests at.

The FilterableTable component includes some commonly requested features:

• Filtering
• Sorting
• Pagination controls
• A 'More Content' column automatically added to each row, which contains a button that will either redirect to a supplied URL or open a modal containing additional information about the table item.

What can't it do?

The FilterableTable component alone does not handle filtering, sorting, pagination, serialization. Rather, it only offers a User Interface for controlling these aspects of the data. This means it won't function properly without also using the web_components gem, or otherwise writing code that will respond correctly to the requests sent by the FilterableTable component — while writing bespoke code is possible, it's our intention to eliminate the need for it as much as possible, and it's generally encouraged to invest time into improving the package, rather than writing brand new code that no-one will be able to reuse 👎🏻

How does it work?

The FilterableTable takes a string as an endpoint prop. It will then send requests to this endpoint to fetch data to populate the table. Changing any of the table's parameters (filter, sort, page) will trigger a new request that reflects that change.

It also takes an object as its options prop. The contents of this object determine various aspects of the table's appearance. Colours, fonts, column widths, and much more. Any options which aren't provided will fall back on their default values, which can be found in src/components/filterable-table/constants.js

Setup

To use the component in your own project, follow these steps:

1. Add "@unep-wcmc/wcmc-components": "x.y.z" as a dependency in package.json (replace x.y.z with the desired version numbers).
2. In your project repository, run: yarn config set registry https://registry.npmjs.org/
3. In your project repository, run: yarn
4. In your main JS file, import the FilterableTable component. Do not register the component in the Vue instance. This isn't required and Vue will complain about an absent render function for the component.

import FilterableTable from '@unep-wcmc/wcmc-components'

5. In the same file, after the store has been imported and registered, add:

Vue.use(FilterableTable, { store })

Props

Prop	type	default value	description
attributes	Array	null	An array of objects that represent the columns in the table. Each object should have name and title keys, with name being the programmatic identity of the attribute being fetched, and title being the string to display in the table's header.
endpoint	String	null	A string that represents the location the FilterableTable should send requests to in order to fetch data. E.g. '/table/index'
endpointDownload	String	null	Similar to endpoint, but represents a location where a data download can be fetched.
filterArray	Array	null	An array of objects which provides information about the table's filters.
legendArray	Array	null	An array used to populate the optional legend modal
itemsPerPage	Number	10	A simple number to control how many items should be visible in a single page
options	Object	null	An object containing various settings to control how the table looks and behaves. An example of this object can be found in /src/components/filterable-table/constants.js. Any values not present in the options prop will fall back on a default value