Skip to main content

Sortable Table

The SortableTable component provides a rich list UI component.

Delayed loading​

Sortable Table supports columns with delayed loading.

A column can be declared as such by adding the property delayLoading: true to the column definition.

The Component being rendered for the column must support the startDelayedLoading method - this will be called on the component (with the value true) whtn the table is ready for the component to render itself.

The Sortable Table will delay the loading of delay-loaded columns until the table has initially rendered and then will only ask the visible components in view to render themselves - it does this in batches until all visible columns aer updated.

When the user scrolls the page and other columns become visible, Sortable Table will ensure that these are rendered.

Typically a delayed component would initally not render itself at all - or render a simple indicator that the content has not loaded. When its startDelayedLoading method is called, it will then render its full content, fetching data as needed etc,

Table header​

There are two ways table headers are populated:

  • Custom header: You can create a customized header for the sortable table by defining it in the appropriate configuration file under shell/config/product folder. Read more how to create custom table headers for each type.

  • Header coming from Schema: If table data is coming from Schema, headers are dynamically populated by the Schema data. For the Internationalization make sure to add table headers locale key in translations YAML files.

Last updated on