Material-table: Add Server side paging, filtering, sorting feature

[mbrn]

Add Server side paging, filtering, sorting feature

[jakeleventhal]

+1 any idea on when this will be completed?

[mbrn]

Hi @jakeleventhal,

Nowadays i am working very hard for another project. But i will do this as soon as possible. Please star project and wait for next releases.

Also why don't you fork this project and contribute it.

[jakeleventhal]

I'm a very busy guy haha I can wait. Thanks for all the effort though.

[plummer-flex]

@mbrn I see what you mean in regard to #174

Want to delete or merge these issues?

[IllusiveBagel]

This feature would be super useful for a project im doing. Any heads up on when this will be implemented?

[mbrn]

Hi @IllusiveBagel ,

I am working on grouping feature now. I think i can start this feature after 1 months.

[IllusiveBagel]

Ok thanks @mbrn,

Is there any way of tricking it until you add that? e.g adding my own pagination on top?

(Sorry I know probably not the right place to chat about this)

[mbrn]

No problem. You may override the Components. But this would not be an effective solution.

https://mbrn.github.io/material-table/#/docz-examples-10-example-component-overriding

[IllusiveBagel]

ahh ok cool thanks this will be a good enough solution for now

[vijthang61]

I have implemented server side implementation by adding custom handlers for pagesize, page change, searching, sorting, filtering. I can use that until the server side events are implemented as part of material table. Once available I can remove my custom code. For now I am able to manage without any issues

[roseak]

Is there a way to use customSort to trigger a function that would reload the data so that sorting can be done server side? I can't seem to get it to do anything. I'd like to click on one of the table headers and then have that call a function that makes a call with the table header as a param to sort server side.

[mbrn]

@roseak , unfortunately for now.

[vijthang61]

I have implemented server side sort by overriding the onOrderChange prop, I had written by custom implementation onOrderChange={this.handleOrderChange},
here I make a server side in the function handleOrderChange, which will update the table row state variable which will automatically render the UI.
In handleOrderChange function I update the a state variable for sort fields, once I set it it will immediately call ComponentDidUpdate method from where I make the ajax call and update the state variable for table row data. Once state variable is again updated it calls render again with new data. You have to check the old query and new query so that render, state variable update doesn't get called in infinite loop.

Sample code:
/*
Method which is invoked when the column sort order is changed
*/
handleOrderChange = (orderedColumnId, orderDirection) => {
var columnField = this.props.columns[orderedColumnId].field;
this.setState({sorting:{columnName: columnField, direction: orderDirection },loading: true});
};

queryString() {
let queryUrl = ${URL};

  const { pageSize, currentPage } = this.state;
  const { filters } = this.state;
  //const { searchValue, columns } = this.state;
  const { sorting } = this.state;

  // Todo: The URL formation will undergo change based on the contract between UI and backend url

  let filter = filters.reduce((acc, { columnName, columnValue }) => {
    acc.push(`["${columnName}", "contains", "${encodeURIComponent(columnValue)}"]`);
    return acc;
  }, []).join(",\"and\",");

  if (filters.length > 1) {
    filter = `[${filter}]`;
  }

  queryUrl += `?filter=${filter}`;

  queryUrl += `&take=${pageSize}&skip=${pageSize * currentPage}`;

  if (sorting.columnName && sorting.columnName.length>0) {
    const sortDirectionString = sorting.direction === "desc" ? " desc" : "";
    queryUrl += `&orderby=${sorting.columnName}${sortDirectionString}`;
  }

  return queryUrl;
}

loadData() {        
  const queryString = this.queryString();
  if (queryString === this.lastQuery) {
    if (this.state.loading !== false) {
      this.setState({ loading: false });
    }
    return;
  }

  fetch(queryString)
    .then(response => response.json())
    .then(data => this.setState({
      rowData: data.items,
      totalCount: data.totalCount,
      loading: false,
      filterApplied:false
    }))
    .catch(() => this.setState({ loading: false }));
  this.lastQuery = queryString;

}

[mbrn]

This is done. You can download 1.21.0.

Try it:

https://mbrn.github.io/material-table/#/docz-examples-14-example-remote-data

[roseak]

Is it possible to sort and filter server side? Or is it just pagination server side?

[mbrn]

Hi @roseak ,

It supports search, pagination and sort for now. I will add filtering this weekend.

[revskill10]

@mbrn Is there any update ?
I need filtering server-side, too.

[mbrn]

Sorry, i have forgotten add a comment here:).

query already has a filters field.

[hsluoyz]

Hi @mbrn , how to use the server-side filtering? I didn't find an example in: https://mbrn.github.io/material-table

[jlubeck]

Any news about an example for server side filtering?
Thanks!

[sergeycw]

HI @mbrn! Thanks for the great project, but maybe you have any example of how to use server-side pagination?

[mbrn]

Hi @sergeycw,

Did you check these examples?: https://material-table.com/#/docs/features/remote-data

[hungbang]

Sorry, I have forgotten to add a comment here:).

query already has a filters field.

It would be great if we have an example for filtering server.

[Cristy94]

Sorry, I have forgotten to add a comment here:).
query already has a filters field.

It would be great if we have an example for filtering server.

I guess you have to send the filtering params from the material-table to your backend. I assume you know what params your backend API needs, so the question is how you get the current filtering from the material-table UI.

[omidmoradzadeh]

@mbrn Thank you for your response.
I want to use server-side sort and disable client-side sort.
someone say about this code :

title: "target value", field: "targetValue", sorting: true, customSort: () => 0,

and it's not working for me. are you have any solution to prevent default client-side sorting?
Thanks a lot.

[mmihic96]

I managed to disable client-side sorting by adding this to each column:
customSort: () = {}