You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The problem
When viewing a large data set in a pharos table, it would be nice to be able to click the headings and have the table resort it based on that column.
The solution
Add a sortable property which will enable the UI for sorting a table. Clicking a sort element will emit a custom event pharos-table-sort which the consuming application is in charge of listening for and sorting the data that is passed into the table as needed.
The custom event will also need to provide the current pagination values so that the parent application can handle resetting the page or not based on the needs of the application.
Individual columns could have a new optional key like disableSort to disable sorting on that specific column.
Alternatives considered
Implementing some sort of sorting logic internal to the component. Because the table is mostly a display component this seems difficult to do well, by utilizing a callback the consumer can be responsible for determining the sort type and implementing it. We could add some examples of various methods to storybook to help get people started.
Add an optional onSort property to the table which accepts a callback that is fired when a column is clicked. The UI for sorting could be shown only when this property is set, meaning the default experience would remain the same. The callback could be passed the column that was clicked, and the sort order. The callback itself would be wholly repsponsible for sorting the data before it is passed into the table,
Additional information
Potential Design, although we would want to work with the design team to finalize it:
The text was updated successfully, but these errors were encountered:
The problem
When viewing a large data set in a pharos table, it would be nice to be able to click the headings and have the table resort it based on that column.
The solution
Add a
sortable
property which will enable the UI for sorting a table. Clicking a sort element will emit a custom eventpharos-table-sort
which the consuming application is in charge of listening for and sorting the data that is passed into the table as needed.The custom event will also need to provide the current pagination values so that the parent application can handle resetting the page or not based on the needs of the application.
Individual columns could have a new optional key like
disableSort
to disable sorting on that specific column.Alternatives considered
Implementing some sort of sorting logic internal to the component. Because the table is mostly a display component this seems difficult to do well, by utilizing a callback the consumer can be responsible for determining the sort type and implementing it. We could add some examples of various methods to storybook to help get people started.
Add an optional
onSort
property to the table which accepts a callback that is fired when a column is clicked. The UI for sorting could be shown only when this property is set, meaning the default experience would remain the same. The callback could be passed the column that was clicked, and the sort order. The callback itself would be wholly repsponsible for sorting the data before it is passed into the table,Additional information
Potential Design, although we would want to work with the design team to finalize it:
The text was updated successfully, but these errors were encountered: