Tabulator: Select a row programmatically using tabulator selectRow method

Created on 23 Jan 2019  路  4Comments  路  Source: olifolkerd/tabulator

I have asked this question on stackoverflow.

The reason why I open an issue here is lack of supporting documentation for this use case. I am happy to do a pull case on the documentation once I understand how/if the selectRow method works.

I am following the documentation for Tabulator 4.1.5 which is the latest version at time of writing this.

http://tabulator.info/docs/4.1/select

It is stated several times that I can _pass the any of the standard row component look up options into the first argument of the function_

But there is no example apart from a single integer which refers to the index I assume.

I don't think it will be possible to know how to put a row component lookup up into the selectRow function without additional documentation.

Most helpful comment

Ah, I get it now...

table.selectRow(table.getRows().filter(row => row.getData().name == 'Bob'));

Sorry for working rather slow on this. It just helps myself if I see code examples.

All 4 comments

Have you tried clicking the link that says row component look up options?
Try that.
The link displays this information:

Programmatic Row Selection
As well as clicking on a row, you can trigger the selection or deselection of a row programmatically.

Select Row
To programmatically select a row you can use the selectRow function.

To select a specific row you can pass the any of the standard row component look up options into the first argument of the function. If you leave the argument blank you will select all rows (if you have set the selectable option to a numeric value, it will be ignored when selecting all rows).

$("#example-table").tabulator("selectRow", 1); //select row with id of 1
If you want to select multiple rows you can pass an array of row component look up options into the first parameter

If you do not pass any arguments to the selectRow function, all rows will be selected. To select only rows that have been filtered pass true as the first argument.

Now that is what I call great documentation. Each of these examples and options will redirect you with a link, yet again.

Now if you want to scroll through a table and find the row with a column value equal to "Dennis", then you need to do just like you did. It is perfectly intuitive!

It takes in either of these params:

A RowComponent
The index value of the row
DOM node of the row

So either throw in the row, and then you have to getData and check for instance for name="xxx".
Or you have defined an id/index for each row, and you can say "give me row with id=39".
Or the DOM node of the row.

It would be helpful though to have an example for selecting a row by condition in the documentation.

Select all rows:

table.selectRow();

Select row at index 1:

table.selectRow(1);

Select row(s) where field _name_ is 'Bob';

table.getRows()
    .filter(row => row.getData().name == 'Bob')
    .forEach(row => row.toggleSelect());

I still do not understand what this means: _To select a specific row you can pass any of the standard row component look up options into the first argument of the function._

Component Lookup
Any function that takes a component as an argument will also attempt to find that component based on the value provided if it is not a component itself. The following values can be used for each copmonent type:

Row
A RowComponent
The index value of the row
DOM node of the row
Column
A ColumnComponent
The field name of the column
DOM node of the column
Cell
A CellComponent

Ah, I get it now...

table.selectRow(table.getRows().filter(row => row.getData().name == 'Bob'));

Sorry for working rather slow on this. It just helps myself if I see code examples.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sphynx79 picture sphynx79  路  3Comments

cemmons picture cemmons  路  3Comments

jiaqianliCn picture jiaqianliCn  路  3Comments

aballeras01 picture aballeras01  路  3Comments

AndrewHutcheson picture AndrewHutcheson  路  3Comments