Table component for DataStore (CKAN) API

[anuveyatsu]

Acceptance criteria

• [ ] We can have preview component that works with DataStore API.

Notes

Using FlatUiTable component

Current FlatUiTable component works well with CSV data - https://storybook.portaljs.org/?path=/docs/components-flatuitable--docs where data can be provided as raw CSV text, a list of lists (basically JS object) or URL to CSV data file.

Now, we'd like to add support for DataStore API (in particular datastore_search) so that data from CKAN's DataStore can be rendered using FlatUiTable component. There are 2 options:

1. Extend current component and support DataStore API. This could be simple to implement, e.g., another if/else statement etc. in https://github.com/datopian/portaljs/blob/main/packages/components/src/components/FlatUiTable.tsx#L84-L88
2. Create a new component that works with DataStore API. This could mean a clean and simple components without complex logic.

Question if doing option 2: where would you put a FlatUiTable component that works with DataStore (CKAN)? I can see that we have multiple places for components: https://github.com/datopian/portaljs/tree/main/packages (i.e., ckan vs components directory).

One important note is how we handle filtering data? Currently FlatUiTable only filters in browser but we want to fetch DataStore API instead 🤔 this is how we are just passing data object to Grid comonent - https://github.com/datopian/portaljs/blob/main/packages/components/src/components/FlatUiTable.tsx#L80

From @demenech - https://github.com/githubocto/flat-ui/blob/main/src/components/grid.tsx#L37 the table by default does not support the events that we'd need. it has the filters, sort, data and etc but not sure if that suffices (e.g. no way to detect the scroll has reached the end).

Using Table component

See the current component in storybook - https://storybook.portaljs.org/?path=/docs/components-table--docs

Existing DataExplorer

For Graphql:

• Demo: https://datopian.github.io/data-explorer-graphql/?path=/story/templates--biennial-operating-budget
• Repo: https://github.com/datopian/data-explorer-graphql

For DataStore endpoint:

• https://github.com/datopian/data-explorer

Brand new component

TODO

[Gutts-n]

@anuveyatsu will we have sorting, search, and pagination for use with the datastore-api? Will we call directly the data-api or will we use the graphql API as the data explorer component?