How to select in a Table a row?

Hi ! How to select in a row in a Table View to help the user to find a row?

Like this example.

Thanks, Mario

Hi @Mario_Ghersi

Just to clarify a few details:

  • Are you using the built-in Data Table component or a custom one?
  • Is your goal to highlight a row when it’s selected, to help the user visually identify it?

Regards,
Viktor

Hi Viktor

I’m using built in Data Table. Yes highlight a row to help the user the selection, Yes, check the sample made by myself with a click over the row. This should be programmatically.

Mario

Hello Mario!

Unfortunately, there isn’t a built-in way to achieve this out of the box, but you can easily handle it using a Custom Code block.

Here’s an example you can use as a starting point. This script searches for a row by objectId and adds the Mui-selected class to highlight the row. Of course, you can adjust the conditions or use your own custom class based on your needs:


const rows = document.querySelectorAll('.MuiTableRow-root')

for (const row of rows) {
  const cells = row.querySelectorAll('td')
  
  for (const cell of cells) {
    if (cell.textContent.trim() === objectId) {
      row.classList.add('Mui-selected')
      
      break
    }
  }
}

Regards,
Alexander