Mui-datatables: [Feature Request] Controlled components

[dmtrKovalenko]

Feature request of controlled component state. Let users a way to manage the data.
It should be really helpful because a lot of where its really helpful to manage the sorting/filtering via react state.
BTW in a lot of projects are using persisting state of tables to save sortings/column width and selection of users.
I`m happy to open a PR if you will accept. :)

[gregnb]

Sorry, I'm trying to understand a little bit more of what you mean. Are you suggesting moving the local state data source that is inside of DataTable.js to an outside component so a user could do whatever they wish to that data set?

Sounds interesting just want to understand a little bit more

[dmtrKovalenko]

Example from react-table.
Just add an ability to manage all state-management by user and pass it via props

[gregnb]

Ok, I'm looking at that example now. So obviously we're already providing pass in columns/data but you're asking about this other functionality. Soon as anything changes you can be notified (in this example, say, onFilteredChange triggers) and react to those changes and then pass in the newly changed state. Do I have that right?

          defaultPageSize={10}
          className="-striped -highlight"
          // Controlled props
          sorted={this.state.sorted}
          page={this.state.page}
          pageSize={this.state.pageSize}
          expanded={this.state.expanded}
          resized={this.state.resized}
          filtered={this.state.filtered}
          // Callbacks
          onSortedChange={sorted => this.setState({ sorted })}
          onPageChange={page => this.setState({ page })}
          onPageSizeChange={(pageSize, page) =>
            this.setState({ page, pageSize })}
          onExpandedChange={expanded => this.setState({ expanded })}
          onResizedChange={resized => this.setState({ resized })}
          onFilteredChange={filtered => this.setState({ filtered })}

[dmtrKovalenko]

@gregnb exactly

[gregnb]

Sounds good to me, but before we start lets put together a list of which actions we're looking to have for props and finalize that list? BTW thanks for suggesting and even wanting to take this up! Pretty nice of you

[dmtrKovalenko]

@gregnb BTW why you are not using react defaultProps - it would be much more efficient from the rendering side. At all I have a lot of small refactoring suggestions. Where it would more convenient to place?

[gregnb]

Ok, let's try to separate the concerns. I've had some refactoring thoughts of my own as well. I would rank things in this order

1) Server side pagination
2) Refactoring
3) Controlled component

As for the refactoring, if you knock out the server side pagination let's open up an issue and discuss what items you think are worth redoing. How about that?

[JordanKadish]

@gregnb I realise this is where the idea for the callbacks onRowsSelected and oneRowsDelete come from. I was thinking instead of onRowsDelete, the function should be more generic and take in an svg. So something like onButtonClicked, and then when rows have been selected the button that pops up in the "x rows selected" div could be whatever material-ui icon the dev puts in along with the function (for example, sending all selected rows back to server to update/delete/whatever)

[gregnb]

A lot of work has been done to add more support for SSR. If there are items still lacking open up new issues