Access filtered data in an object-table

I have a table of items that have checkboxes, as well as ‘Check All’ and ‘Uncheck All’ buttons. And there is also an automatic search box from object-table component.
Is there some easy way to get the filtered data and change its values?

Or the only way is to get the current state of the table (which contains a value of table ‘Search’ field) and filter it by myself? Or is it better to use controlled tables and do manual searching?

Hi Khilda

The <object-table> has a predefined variable called $filteredData that you can use to access the currently filtered data. This should not to be confused with filteredDisplayData (no $ for this one), which stores the currently visible data in your object table, taking into account pagination, filtering and searching)

The $filteredData variable is an object that contains two arrays, an array of headers - $filteredData.headers - and an array of DB objects - $filteredData.rows - that make up the current state of the table (taking into account filtering and any search field, but ignoring pagination).

You can access it as follows,

<object-table label="Select a ticket to view details" query="tickets" empty-message="No recent field tickets" limit="10">
        <column heading="Date">{date}</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>
        
        <action on-press="selectTicket($selection)" />
        <button-group>
            <button label="Log Filtered" on-press="logFiltered($filteredData)" icon="fa-comment" />
        </button-group>
</object-table>
function logFiltered(data) {
    console.log("Data: ", JSON.stringify(data));
    console.log("Headers: ", JSON.stringify(data.headers));
    console.log("Rows: ", JSON.stringify(data.rows));
    console.log("1st Object ID", JSON.stringify(data.rows[0].id));
}
1 Like