API for row selection handlers in UI Table

[heswell]

The Vuu UI Table component defines three props associated with row clicking / selection

1. onRowClick
2. onRowSelect
3. onRowSelectionChange

These are currently exposing data structures which should really be kept internal.

type TableRowClickHandler = (row: VuuDataRow) => void
type TableRowSelectHandler = (row: DataSourceRow) => void
type SelectionChangeHandler = (selection: Selection) => void

Firstly, TableRowClickHandler is wrong, its actually a DataSourceRow that is returned, not a VuuDataRow.
Secondly, both DataSourceRow and VuuDataRow are structures intended for internal use only. They are arrays of values which require use of a columnMap to destructure. We can provide something more user-friendly for clients.

Difference between these callbacks is:

• onRowClick fires every time any row is clicked, irrespective of whether row is selected or what selection model is in effect (there may be no selection allowed, onRowClick will still fire).
• onRowSelect fires if selection is enabled and returns the row clicked, right now it is no different from onRowClick except for the fact that it won't fire if selection is disabled.
• onRowSelectionChange fires if (and only if) the selection changes. If user clicks a selected row and deselection is disallowed, for example, the selection will not change so this callback will not fire. Also, importantly, this callback returns a parameter that includes the entire selection, which might be multiple rows. This is actually a Selection object, which is also not very user-friendly.

The two select callbacks attempt to mirror a similar selection API in Salt components like LIst/Dropdown/Combobox. I'm not sure we can really preserve this pattern for Table though.

I suggest adopting the following

type TableRowClickHandler = (  
evt: MouseEvent<HTMLDivElement>,
  row: DataSourceRowObject
) => void;

type TableRowSelectHandler = (row: DataSourceRowObject) => void;

Where DataSourceRowObject is a new structure

type DataSourceRowObject = {
  index: number;
  key: string;
  isGroupRow: boolean;
  isSelected: boolean;
  data: VuuDataRowDto;
}

VuuDataRowDto is a simple map of column names to values, so something like this

{
 id: '123',
ric: 'AAP.L',
quantity: 1000
}

The clickHandler will also return the actual click event, I think that is generally expected.
The selectHandler will just return the selected item

Not sure what to do about selectionChange handler. User could potentially select thousands of rows with a block select. The Selection object currently returned represents this efficiently, but its not easy to work with. We could add an API call on the datasource to getSelectedRows and maybe just make the selectionChange callback provide some info about the selection (row clicked, total rows selected etc)

[heswell]

additional thought, the VuuDataRowDto could potentially take an optionsl generic type param if users want to define a type for the particular table they are working with

[junaidzm13]

Do we have this option on the ui tables to provide row type? Or is it something on the roadmap?

[junaidzm13]

I like the new more user-friendly API including a very easy to understand DataSourceRowObject.

Only concern is if we can provide something like getSelectedRows on the Selection object's API itself that'd be ideal. But I understand that it might not be as straightforward given that users can select thousands of rows. Thinking if something like this could be useful for the user:

   Selection {
      ...
      ranges: Array<Range>; // Range = {startIndex: number, endIndex: number}
   }