How do I sort an object-table programmatically

Best Practice
2

It is reasonably easy to sort and filter an object-table programmatically. In fact you can set the entire state of the object-table programmatically.

Essentially you have 2 options for doing this (state reference).

  1. Using the init-state="" directive to set the initial state of the object table when it loads for the first time (ie when the view loads).

In your view XML you can specify an init-state="someFunction" directive for your object-table component and have the function return a valid state object with the initial values you want your object table's state to have. Like so.

View XML

<object-table init-state="$:initState()" label="Select one to view details" query="tickets" empty-message="No recent field tickets" limit="10">
    <column heading="Date">{date}</column>
    <column filter="true" heading="Customer">{customer}</column>
    <column filter="true" heading="Pad">{pad_name}</column>
    <column heading="Well">{well_name}</column>
    <column filter="true" heading="Rig">{rig}</column>
    <column filter="true" heading="Ticket Status">{status}</column>
    <column heading="Total">{ticket_total}</column>
</object-table>

View JS

function initState() {
    // Sort by Descending Status - column 5, and descending date - column 0
    // Filter for only 'Pending' and 'Complete' Status values - column 5
    var state = {
        sorting: [{key:"5","type":"desc"}, {key: "0", type:"desc"}], 
            // array of 'sorting' objects, applied in the order in which it is specified
            // the value of 'key' is the 0-based 'index' of the column you want to apply the sort on
        filters: {"5":{factory: "text", filters:{"Pending": true, "Complete": true}}} 
            // object of filter objects, specified per column index
    };
    return state;
}
  1. Using the setState() method to update the current state of the object table. In order to use the setState() method you need to give your object-table an ID so that you can reference it from your your view XML you can specify an directive for your object-table component and have the function return a valid state object with the initial values you want your object table's state to have. Like so.

View XML

<object-table id="table-1" init-state="$:initState()" on-state-change="$:tableStateChange($state)" label="Select one to view details" query="tickets" empty-message="No recent field tickets" limit="10">
    <column heading="Date">{date}</column>
    <column filter="true" heading="Customer">{customer}</column>
    <column filter="true" heading="Pad">{pad_name}</column>
    <column heading="Well">{well_name}</column>
    <column filter="true" heading="Rig">{rig}</column>
    <column filter="true" heading="Ticket Status">{status}</column>
    <column heading="Total">{ticket_total}</column>

    <button-group>
        <button label="Reset State to Default" on-press="defaultState" validate="false" style="solid" />
    </button-group>
</object-table>

View JS

function defaultState() {
    var newState = {
        sorting: [{key:"5",type:"desc"}, {key: "0", type:"desc"}],
        filters: {"5":{factory: "text", filters:{"Pending": true}}},
        search: "Hilc"
    };

    component.objectTable({ id: "table-1" }).setState(newState); // setState merges the current state with the 'state' object you pass into the method
}

To clear/reset the state of your object-table take a look at this question.

In general, to help understand how to work with the state of an object-table, it is quite useful to log the state and see how it changes depending on how interact with the object-table in the UI. Like so.

View XML

<object-table on-state-change="$:tableStateChange($state)" label="Select one to view details" query="tickets" empty-message="No recent field tickets" limit="10">

function tableStateChange(state){
  console.log(JSON.stringify(state));
}
2 Likes