Material-table: Server Side Sorting

[nataliepatton13]

I'm trying to do sorting only server-side and I'm having trouble figuring out how to disable client-side sorting. It currently works for filtering, so when the user types in a filter, it doesn't do the filtering client-side but for sorting, whenever the user sorts, it sends the request to fetch the data with the orderBy and orderDirection fields and then after the data is returned, it sorts the data client-side which I'm hoping to figure out how to disable. Has anyone run into this issue before and might know of a fix?

[samotoo]

I use a hacky method, in column options, set customSort option to a method that always returns 0, as a result, client sort does nothing. It is not perfect but at least it works, hope it helps.

[samotoo]

By the way, I would like to control the current sorted field and order, e.g., if the sorting function on the server returns failure, the table sort field or order should not change.

Howerver, the material table component seems to update the sort field and order immediately after clicking the table header.

Is there any way to control the sort field and order?

[nataliepatton13]

@samotoo I actually ended up overwriting the onOrderChange function when I pass it into the Column Header component so instead of passing in the default onOrderChange function that comes from props, I pass in this function...

  handleSortOrderChange(orderedColumnId, orderDirection) {
    this.setState({ sortedColumnId: orderedColumnId, sortedColumnDirection: orderDirection })
    this.tableRef.current && this.tableRef.current.onQueryChange() // To force the data to get fetched again
  }

I also send in the orderBy and orderDirection fields to the ColumnHeader with sortedColumnId and sortedColumnDirection from the state instead of sending in the ones that are coming from the default props. So in your case I think you could store both the current and new sort order and direction and then when your call to the server comes back successfully, you could set the current sort order and direction to the new ones (or if it comes back as a failure, don't set them)

[samotoo]

@nataliepatton13 Thanks so much for your response. And if my understanding is correct, you override the table header component with your own implementation?

[nataliepatton13]

Yes I created my own custom header but you can probably just use the default one unless there are other things you need to change. If you were to use the default one your Table might look something like this....

<MaterialTable 
tableRef={this.tableRef} 
        columns={this.columns}
        data={this.fetchData}
        components={{
          Header: props => (
            <MTableHeader {...props} onOrderChange={this.handleSortOrderChange} orderBy={this.state.sortedColumnId} orderDirection={this.state.sortedColumnDirection}  />
          )
        }}
      />

[samotoo]

That's brilliant!! You saved my day.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.