Select all rows in a perspectives table

I have a table that I am using as a schedule to send data to a plc. I would like to be able to have a select all button to select and highlight all the rows in the table so I can iterate through them to send to the plc. Any help on the select all would be appreciated.

The table's props.data has that information for you.

This won't highlight the row though. I know I can iterate through the props.data and send everything but I need them to be able to select them all. Also on a touch screen there is no way to multi select without a keyboard and have them highlight.

The Perspective table doesn't seem to expose the properties that you want. I checked by copying the data property into selection.data and it doesn't apply highlighting to cells.

Does anyone know of a creative work around

Unfortunately, Table.props.selection.data is read-only, and writing data to that property will not modify the state or appearance of the Table. The primary reason for this is that there is no guarantee of uniqueness in Table data.

Imagine you had a Table with a single column "x" (just to keep the example simple), and it only had three rows:

  x
-----
  1
  2
  1

Suppose now that you wrote the row data for the 2th (3rd) row with the expectation that the 2th row would display as selected. Well... {"x": 1} actually defines the underlying data of two rows, so which should be selected?

There's no good work around, because there is no current way for the Table to dynamically or systematically have selection applied to it.

A bad workaround is to add a new column to the Table (and your data) as the 0th column, render it as a boolean field (checkbox or toggle), and use some external component (perhaps a Button) to set the underlying value of the data to have all rows selected. You would also then need to supply your OWN style to each row to designate the row as selected.

3 Likes

I'm not so sure that isn't better. Particularly with touchscreens.

Perhaps, but I'm always hesitant whenever I suggest driving behaviors in one component via a second component.

The work around which might be "bad" seems like that it would be better than what I was going to try which I'm not sure was going to work. I started looking in to seeing if I could do it with java script injection by capturing the pointer event and adding ctrl. Haven't got far though, never did anything with java script.