mbrn / material-table

Datatable for React based on material-ui's table with additional features

Home Page:https://material-table.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Filtering Material-Table with remote Data doesn't work with query.filters

RevisTrost opened this issue · comments

commented

I made a table with MaterialTable in react. In this table I have to make a call to the back end every time we filter a column. Currently the code is as follows:

<MaterialTable
                style={{fontFamily:'Roboto'}}
                icons={tableIcons}
                title={""}
                columns={columns}
                data={(query) =>
                  new Promise((resolve, reject) => {
                    let url = "/items/orders?";
                    url += "pageSize=" + query.pageSize;
                    url += "&pageIndex=" + (query.page + 1);
                    url += query.filters.length >0 ? query.filters.map(z => "filter=" + z.column.field + z.operator + z.value):"";

                    axios.get(url)
                      .then(res => {
                        sessionStorage.setItem("data", res.data);
                        resolve({
                         data: res.data.data,
                          page: res.data.pageIndex - 1,
                          totalCount: res.data.count
                        });
                      })
                  })
                }   
                options={{
                  sorting:true,
                  search: false,
                  filtering:true,
                  actionsColumnIndex:-1,
                  pageSize:10,
                  exportButton: true,
                  exportDelimiter:';',
                  exportFileName: 'WO list',
                  exportAllData: true,
                  // filtering: enableFilteringVariable, 
                  //padding:'dense',
                  draggable:true,
                  columnsButton:true
                }}
 />

the filter on the back end is applied like this:


var items = await query.Where(filter) 
                       .OrderBy(orderBy)
                       .Skip(pageSize * pageIndex)
                       .Take(pageSize)
                       .ToListAsync();

But when the api is called it returns "data not found" because a search is carried out based on the filter of each single entered character (type: "name = a") Also I shouldn't do a specific search but type "LIKE"

How can I prevent making a call for every single entered character?

How can I filter the api data more generically like for SQL with the LIKE operator?

commented

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.