Comment on page
controlsallow the user to interact with the table and its data. They include a search box and pagination controls. They will display at the bottom of an
object-tableby default, but can also be hidden or positioned at the top and/or bottom.
topposition is useful if the height of the table will be changing drastically due to large amounts of non-deterministic content. Placing the controls at the top prevents the buttons from constantly moving up and down when pages are changed.
<object-table ... controls="top">
<object-table ... controls="both">
<object-table ... controls="bottom">
<object-table ... controls="none" limit="1000">
When controls are set to
noneand the number of entries exceeds the
limit, a "Show more" button will appear.
object-tablehas sticky headers and/or footers along with
mode="paginate", the controls will also be present in the corresponding sticky header or footer.
Action buttons appear in the controls. The purpose of these buttons are to provide table actions that should in most cases, apply to the table itself.
Since space inside table controls are limited, the buttons employ a best fit algorithm to expand or collapse based on the available space in the render area.
on-press="log($filteredData, filteredDisplayData, controls)"
Since action buttons will mostly be used by engineers to apply batch operations to the data, a few variables are exposed to the
In cases where the engineer wants to force the first button to be visible but collapse the rest
mode="split"can be used on the button-group.
<button icon="fa-download" label="Export CSV" .../>
<button icon="fa-envelope" label="Email" .../>
<button icon="fa-list" label="Log" .../>
When a scrollable table is used instead of a paginated table, the action buttons are still present even without the rest of the controls: