How do I reset the state (filters, sorting, pagination, etc.) of an object-table

General Q&A
1

I want to reset all the filters, sorting, pagination, etc., of an object-table component.

How can I do this?

2

This is reasonably easy to do. Practically, you need to execute a setState() action on the <object-table> in question. The basics are described in the Object Table: State section of the documentation - specifically you want to look at the very last section, called Changing the state from javascript.

Here is a basic example of a JS Function, called from a button, that will reset the state of a specific <object-table>.

<object-table id="table-1" query="table_query">
  <column heading="Name">{name}</column>
  ...
  <button-group>
     <button label="Reset Table" on-press="resetTable" />
  </button-group>
</object-table>

function resetTable() {
   var newState = {
     filters: {},
     sorting: [],
     page: 1,
     search: null
   };
   component.objectTable({ id: "table-1" }).setState(newState);
}

Please note, the setState method merges the current state of the table with the state values passed to the method, so cannot just pass in an empty state object, you need to pass in a state object that will override the current values. So yes, it should actually be called updateState not setState - thanks for pointing that out.

2 Likes
3

How do I get the table state (filters, sorting, pagination) from a regular JS function without requiring the user to send the state from a table button-group. I tried component.objectTable({ id: “table-1” }).getState() but that functionality does not appear to exist.