tleunen / react-mdl

React Components for Material Design Lite
https://tleunen.github.io/react-mdl/
MIT License
1.76k stars 255 forks source link

[DataTable] selectedRows as a prop #404

Closed dymat closed 7 years ago

dymat commented 7 years ago

Hey Folks! I'm working with DataTable and a list of row-Objects on which I need to apply a filter.

Here is an example:

var rowsList = this.props.store.Persons
    .filter(
        person => (person.name.toLowerCase().indexOf(this.state.filter.toLowerCase()) != -1 ));
<Textfield
    label="Filter"
    onChange={(event) => {this.setState({filter: event.target.value})}}
/>

<DataTable 
    selectable 
    rows={rowsList} 
    rowKeyColumn="id"
    onSelectionChanged={(data) => console.log(data)}
> ... </DataTable>

When I apply a filter rowsList and rerender the Table-Component I loose my some IDs in the selectedRows-List. I need to persist these selections even if a filter is applied.

So I propose to enable selectedRows as a prop which is used to have rows selected "by default".

<DataTable 
    selectable 
    rows={rowsList} 
    rowKeyColumn="id"
    onSelectionChanged={(data) => console.log(data)}
    selectedRows={[1,6,2,...]}
> ... </DataTable>

Or is there another way I can't see?

Greeting, ~dymat

tleunen commented 7 years ago

Do you mean that if you select a row with the table unfiltered, then filter it in order to remove the selected row, and then change the filter again to see the row.. The row should still be selected?

If that's the case, maybe we could add a prop to check the value of something in the row instead of relying on an internal state.

So let's say you have your person with this:

{
  name: 'X',
  lastname: 'Y',
  selected: true
}

Then we could add a new prop on the table, something like selectedRowKey (or maybe rowKeySelected to match the other rowKeyColumn :D)

dymat commented 7 years ago

Wow! You are fast! Thanks for reply!

You got exactly my point. It would be great if you could add such a prop.

BTW: this new prop would be a good base for writing a pagination add on which keeps track of selected rows over all pages...

Thanks again! Bye, ~dymat

tleunen commented 7 years ago

For the pagination, it really depends on how it's built. I have a similar component at work and the selected elements are kept in memory, it doesn't care if there's an pagination or not ;)