gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.71k stars 932 forks source link

Search and filter functionality doesn't work if serverSide is true #1037

Open SantiagoCoronado opened 4 years ago

SantiagoCoronado commented 4 years ago

Hello, I'm currently having a problem with the data-tables because i want to use the search or the filter functionality as well as the serverSide one. In the past (about 2 months ago) both functionalities could work in parallel. Somehow today when i reviewed the system I'm working on, it doesn't work anymore.

Expected Behavior

As I mentioned above, the search and filter functionality should work despite the serverSide functionality is active (as it did a couple months ago)

Current Behavior

The search and filter functionality doesn't work if the serverSide functionality is active.

Steps to Reproduce (for bugs)

  1. It didn't work in my project so I thought i was my setup so what i did was copied the example from https://www.npmjs.com/package/mui-datatables with customisable columns
  2. I ran the code on a local host and made sure that the search and filter functionality worked and they did.
  3. I added the option serverSide: true
  4. The search and filter functionality didn't work anymore

This is the example that I used:

const columns = [ { name: "name", label: "Name", options: { filter: true, sort: true, } }, { name: "company", label: "Company", options: { filter: true, sort: false, } }, { name: "city", label: "City", options: { filter: true, sort: false, } }, { name: "state", label: "State", options: { filter: true, sort: false, } }, ];

const data = [ { name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" }, { name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" }, { name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" }, { name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" }, ];

const options = { filterType: 'checkbox', serverSide: true, };

<MUIDataTable title={"Employee List"} data={data} columns={columns} options={options} />

Your Environment

Tech Version
Material-UI 4.5.1
MUI-datatables 2.12.4
React 16.9.0-alpha.0
Chrome 80 (newest)
wdh2100 commented 4 years ago

FYI https://github.com/gregnb/mui-datatables/blob/master/examples/serverside-filters/index.js

gabrielliwerant commented 4 years ago

Right now, there isn't any fine-grained control over which functions are serverside and which are not. So if you have serverside set to true, you can expect the table to expect that everything which can be handled serverside, is handled serverside. So, if I understand the issue correctly, you want to do something like serverside search and clientside filters, or vice versa, correct? Not serverside search and clientside search at the same time, as I'm not sure how that would work.

What is probably needed is a more advanced API, something like a serverside object which has properties for each different feature, to allow fine-grained control.

SantiagoCoronado commented 4 years ago

@gabrielliwerant thank you for the reply. So just to be completely clear, there's no way that I can do the search and filter client side and the pagination serverside? I would have to develop a serverside search and filter call?

danielbyun commented 4 years ago

@SantiagoCoronado Yes, you would have to handle everything on the server-side. I made a good amount of it for my project but it got overwhelming so I changed up the query to just speed up the loading time for the table for now (and made server-side = false).

SantiagoCoronado commented 4 years ago

Thank you! @danielbyun