Modify results page to utilize Elasticsearch paginate - Datatable

maxsibilla commented 2 months ago

This card requires two major components to be modified: the datatable that displays the results and the actual query issued to Search API/Elasticsearch. Related card for the query: https://github.com/sennetconsortium/portal-ui/issues/1573

Instead of returning the whole of the Elasticsearch index based on the query, we will limit it to however many items the user specifies via the dropdown menu:

We will need to override the functionality of the following Datatable features:

[ ] Sorting by column will need to issue a query to the Search API/Elaticsearch to specify which property is to be sorted and if its in ascending or descending order

[ ] Clicking the arrows needs to be in sync with the paginate call made to Elasticsearch

maxsibilla commented 2 months ago

Potentially relevant Search UI component https://www.elastic.co/docs/current/search-ui/api/react/components/paging

libpitt commented 2 months ago

https://ant.design/components/table

Search for "Ajax" on the page.

libpitt commented 2 months ago

Some huge custom functionality added with the current react-data-table-component:

Bulk export and dropdown
- Bulk export should be fairly straightforward (though maybe tedious) to replace with antd's Table component but the custom dropdown in the header, will be a bit tricky to get going
Column reordering and that order is saved and reflected in bulk exported file
Dynamic column toggling

Major limitation of react-data-table-component: The rows per page Select component uses defaultValue prop, but not value prop. So cannot trigger a dynamic change without "hacks".

Biggest hurdle besides reimplementing the above custom features, would be replacing the many places that this component exists.

sennetconsortium / portal-ui

Modify results page to utilize Elasticsearch paginate - Datatable #1572