Discussion about row selection

[bjrmatos]

Hi, first of all I want to thank all the work @cosminnicula made to bring this functionality to griddle.

I want to discuss a little more this functionality to ensure that the most important use cases are covered

This is my list of things I think should be covered:

• Types of row selection that must be supported: Single, Multiple (ctrl + click) and Multiple With checkboxes.

// or "multiple", or "multiple.check", or pass false  to desactivate row selection, 
// maybe these options could be variables -> 
// Griddle.SINGLE_SELECTION, Griddle.MULTIPLE_SELECTION, 
// Griddle.MULTIPLE_CHECK_SELECTION, defaults to "single"
<Griddle  results={data} rowSelection="single"  /> 

• Correct synchronization between app state and griddle (selectedRows), as mentioned in selected rows are lost when the component re-render #151 the current API for get the current selected rows is a little tricky.

i propose something like this:

var data = [{
  id: 1,
  name: 'Boris'
}, {
  id: 2,
  name: 'Junior'
}]

var App = React.createClass({
  getInitialState: function() {
    return {
      selectedRow: null // String, Number, or Object[rowId] = rowData, when multiple selection is enabled
    };
  },

  /* we have correct sync between app state and griddle selectedRow data */
  _onRowSelectionChange: function(selectedRow, rowData) {
    /* this is inspired by react-datagrid */

    // `selectedRow` always have all the current selected row(s)
    // on single mode `selectedRow` will be a String, Number value. `selectedRow` -> 2
    // on multiple mode `selectedRow` will be a Object with all the selectedRows `{ [row_id_here]: { [row data props] } }`. `selectedRow` -> { 2: { id: 2, name: 'Junior' } }
    // `rowData` always have the current selected row data, null when un-selecting a row

    /* 
      Here we can do something with rowData.. 
      like show a detail of the person selected in another view..
    */

    this.setState({
      selectedRow: selectedRow
    });
  },

  render: function() {
    return (
      <Griddle 
        results={data} 
        rowSelection="single" 
        selectedRow={this.state.selectedRow}
        uniqueIdentifier="id" // "id" is the default value, I put this only to make the example more clear
        onRowSelectionChange={this._onRowSelectionChange}
      />
    );
  }
});

• A property to specify the name of the CSS class / classes to add when a row is selected

`rowSelectionCssClass` defaults to 'selected' when no specified
<Griddle results={data} rowSelection="single" rowSelectionCssClass="row-selected another-class" />

• ensure order of events: onRowSelectionChange -> onRowClick -> onCellClick (a cellClick event would be useful?)

I like to send a pull request with all these features, but first I want to discuss this with you.

What do you think?

[larryhengl]

@bjrmatos,
I like your thinking on this, and can use much of this functionality myself. I just found this component and I'm now trying to implement it in a project. Week-old thread with no responses here (maybe you already made a PR), but I have some quick thoughts:

• single vs multiple
  I don't really like the way react-datagrid determines this. If you pass a primitive into the config then it deems it as single selection and returns a value back to the selection cb. And if you pass an object with an id key (or any key) then it deems it as multiple and returns an array or hash of data objects (rows) to the selection cb. I thought it'd be simpler to always use the same structures for both single and multiple. Keep them as arrays or hashes so we can always iterate thru, as needed. So always treat it as multiple, even if none or 1 row is selected. Then we could have a boolean prop: enableRowSelection.
• selectedRows
  Perhaps this property on Griddle can be an array of data objects or simply and array of ids of those objects? Your object hash would be good too. Passing in an array of ids would be simpler for preselections. Or maybe this can be pushed thru via columnMeta. Just spit-ballin'.
• ctrl+click 👍
  or cmd+click for multi-row selections = select all rows in-between the clicked row and closest or last selected row. Maybe have alt+click for selecting single rows while keeping other selected rows intact. Can be the same behavior with checkboxes.
• css class
  Your idea for rowSelectionCssClass looks good to me.

Thanks for your attention on this topic. I hope these features make it in sometime soon.

Cheers,
:Larry

[bjrmatos]

single vs multiple
I don't really like the way react-datagrid determines this. If you pass a primitive into the config then it deems it as single selection and returns a value back to the selection cb. And if you pass an object with an id key (or any key) then it deems it as multiple and returns an array or hash of data objects (rows) to the selection cb. I thought it'd be simpler to always use the same structures for both single and multiple. Keep them as arrays or hashes so we can always iterate thru, as needed. So always treat it as multiple, even if none or 1 row is selected. Then we could have a boolean prop: enableRowSelection.

I would love to see an example of this :)..

I also think that we should use the same structure for both (perhaps treat everything as a hash of data objects)

selectedRows
Perhaps this property on Griddle can be an array of data objects or simply and array of ids of those objects? Your object hash would be good too. Passing in an array of ids would be simpler for preselections. Or maybe this can be pushed thru via columnMeta. Just spit-ballin'.

selectedRows prop must be the same that what is passed to onRowSelectionChange callback so we should stick with a hash of data objects

ctrl+click
or cmd+click for multi-row selections = select all rows in-between the clicked row and closest or last selected row. Maybe have alt+click for selecting single rows while keeping other selected rows intact. Can be the same behavior with checkboxes.

perfect 👍 this will improve UX a lot!

[jhawthor]

Does anyone have a work around for this??? Right now I'm trying to set the row background color using jquery in a handleRowClick function so that it "selects" the first row and resets the other rows, however it not working. Any help would be greatly appreciated.

/** User click on a row in the table, update the selected item(s) criteria
* and highlight the row
*/
handleActiveEventRowClick: function(row, event) {
console.log("Clicked on Id: " + row.props.data["Id"]);
this.setState({selectedRow: row.props.data["Id"]});
this.setState({selectedRows: row.props.multipleSelectionSettings.getSelectedRowIds()});

    $('td').click(function(){
        $('tr td').css({ 'background-color' : 'transparent'});
        $('td', this).css({ 'background-color' :  'rgba(0,0,0,.1)' });
    }); 
},

[dw3e9]

@bjrmatos thank you for your contributions to this functionality.
I've been trying to get allSelectedIds to persist when selecting different pages of the table, but they seem to go away after rerendering. any suggestions on how to fix this issue?

[mikestopcontinues]

@darrenwong23 Use prop rowMetadata: {bodyCssClassName: (rowData) =>} to make the rows look selected after render. And store the selected rows in state/store. Maybe in selectedRows[page][index].

[karthikiyengar]

Know it's a bit late, but thanks for the suggestion @mikestopcontinues. Works for me.

[ryanlanciaux]

Thank you all for this discussion! We have tried to make the core version of Griddle have less features but add a customization and plugin architecture. We'd love to see this functionality exist as a plugin but this will not be part of core Griddle for now.

If anyone wants to take this on, we'd love to help but in the mean-time the plugins section on the docs may be useful