How can we iterate over rows and click/select a row based on its data?

[Leocete]

I'm rewriting a project from jQuery to React and is currently using MUI-datatables library - it is a really great and comprehensive tool.

Now, I'm trying to find a solution on how we can select/click a particular row based on the row data, this is how it was done in the jQuery datatables:

var id = 5; // Hardcoded for a showing purposes
table.rows().iterator('row', function (context, index) {
            var data = this.row(index).data();
            if (data[3] === id) {
              $('#' + listTableId + ' tr[data-id="' + id + '"]').click();
            }
});

Here we have access to the rows data by iterating over rows and checking rows 4th parameter. How this could be done in the MUI-datatables? Thanks in advance We are iterating over rows data and clicking it if

[wdh2100]

Hello @Leocete

Do you want to trigger a click event on a specific(index) row of data? Or, know the row(indx) in the data when the click event occurs?

If you're asking the first. I don't think it will be a problem because I think the function defined in 'onRowClick' can be executed on specific data.

If you're asking the second. That function has its value in the argument (rowData, rowMeta).

happy coding

ref

onRowClick	function		Callback function that triggers when a row is clicked. function(rowData: string[], rowMeta: { dataIndex: number, rowIndex: number }) => void

[Leocete]

Hi @wdh2100 ,

Yes, I mean the first variant I don't think that onRowClick will work, because this event is triggering after a "click on a row". And what I', trying to find out, is how to click on a row, based on its data

[wdh2100]

I am not sure why this is necessary.

Do you want the row to be selected?

Refer to the sample below.

ref : https://codesandbox.io/s/muidatatables-custom-toolbar-8bhux?file=/index.js

[Leocete]

In general - yes, I want to select a row (based on the data that it contains, for ex., select row if ID == 2), and display its data in another component that is located on the right

[mxmlnglt]

I am not sure why this is necessary.

Do you want the row to be selected?

Refer to the sample below.

ref : https://codesandbox.io/s/muidatatables-custom-toolbar-8bhux?file=/index.js

Did you read @Leocete's first comment above? https://github.com/gregnb/mui-datatables/issues/1362#issue-642892888 In your example, the rowsSelected is statically defined. That's not what he wants. What he wants is that rows get selected automatically when either iterated/parsed/rendered.

@Leocete I have a question: how do you plan to provide the MUIDataTable with the information about the specific row?