React-data-grid: Keeping sorted column and rows between refreshes.

Created on 26 Feb 2016  路  4Comments  路  Source: adazzle/react-data-grid

Hi,

A few questions about sorting:

  1. Is there a way to initialize the grid with a given sort column and type (asc/desc)?
  2. When the grid is refreshed with new rows, I notice the sorted symbol remains on the column header but the new rows aren't sorted accordingly. What's the best way to address this problem?

Thanks,
Alvaro

Question enhancement

Most helpful comment

Hi, thanks for your questions

  1. There is currently no way to pass an initial sort column to the grid with a sort direction. That is something we could implement. As a workaround, you could get access to the grid via a ref from your component and then set the state in your component after the grid has been mounted
componentDidMount() {
this.refs.grid.setState({sortColumn: 'column1', sortDirection: 'ASC'})
}
  1. Yes, this is something that the grid should handle but does not provide a good way for doing so at the moment. We can change the code so that when new rows are passed to the grid that the onGridSort will be called if the sortColumn state is set. In the meantime you could do somethign like this in your component
componentWillReceiveProps() {
 if (this.refs.grid.state.sortColumn != null) {
   // sort the rows you pass as props to ReactDataGrid
 }
}

All 4 comments

Hi, thanks for your questions

  1. There is currently no way to pass an initial sort column to the grid with a sort direction. That is something we could implement. As a workaround, you could get access to the grid via a ref from your component and then set the state in your component after the grid has been mounted
componentDidMount() {
this.refs.grid.setState({sortColumn: 'column1', sortDirection: 'ASC'})
}
  1. Yes, this is something that the grid should handle but does not provide a good way for doing so at the moment. We can change the code so that when new rows are passed to the grid that the onGridSort will be called if the sortColumn state is set. In the meantime you could do somethign like this in your component
componentWillReceiveProps() {
 if (this.refs.grid.state.sortColumn != null) {
   // sort the rows you pass as props to ReactDataGrid
 }
}

Thanks for the reply, @malonecj. Your suggestions worked fine.

@alvaro1728 Did the solution for your first question actually work?

@malonecj I'm trying to implement this as well, but it's not working for me. I see the caret showing on the column I'm trying to sort, but the data is not sorted. I have set my sort to run in componentDidMount() as suggested. My data is being fetched asynchronously, but the data is there once my data grid is created. Any other idea/solutions here?

Thanks - this is exactly what I needed when syncing the sorting widgets, for data loaded across multiple grids.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gauravagam picture gauravagam  路  3Comments

JimLynchCodes picture JimLynchCodes  路  4Comments

Thilagm picture Thilagm  路  3Comments

GenoD picture GenoD  路  3Comments

JordanBonitatis picture JordanBonitatis  路  4Comments