OmniBlocks® extends the default Ant Design table interface to provide managed features including sorting and filters for columns.

Example

An example of a column array entry that sets up the “SKU” column from our new MMR table interface…

title: ‘SKU’,
dataIndex: 'produced_cat_num',
searchable: true,
defaultFilteredValue: filter.produced_cat_num,
sorter: Sorter.DEFAULT,


Table Column Properties

searchable

Set to true puts the search icon on the column header and will activate a popup box.

It requires the dataIndex be an actual property name on the data set that is rendered on the table.   For this to work properly you’ll want to make sure the value in dataIndex matches the response coming back from the API server.   You can use the browser debug mode and look at the network tab to see the raw data.  It is usually in the response.records[] array.

defaultFilteredValue

used to define whether a filter is set on initial page rendering.    For statements this may not be useful as I don’t think they are using context yet and the inherited redux/saga implementation is very flawed and thus does not properly store/recall data between page navigation.   For the pages that are using context, like the new MMR table listed above, this value is retrieved from the context so navigating away from the new MMR table and coming back no only keeps the previous filter that was used active but defaultFilteredValue makes sure there is a visual indicator that shows the active filter.

sorter

Setting to sorter.DEFAULT sets the column as sortable via string sort methods (the default).    There are date and numeric sorts available if you look at the sorter definitions.

How Search/Sort Works With API

The search and sort from the front end works best on the top level properties of the returned data. If a table column is rendering a nested or child of a top-level property it requires extra work on the API and/or front end to ensure the sorting, filtering, and related subsequent pagination or other operations work as expected.

Most of the API is designed to handle top-level property searching and sorting which only requires the dataIndex used on the front end match a table column ID from the API or a top-level property name returned by the API data model. You can find this in a browser session by looking at the returned data when a table is first loaded on a page.

See this vid for more info:
https://drive.google.com/file/d/1rLcVWulfuGJkeYd_ve1O7IjBVDR5nNT_/view?usp=drivesdk