gregnb / mui-datatables

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

Filter table column ascending or descending instead of using values #1552

Open RaymondMwaura opened 4 years ago

RaymondMwaura commented 4 years ago

Is there a way to customize the filtering options for a field? Particularly in my case, I want to switch from filtering some columns by their specific values and use an ascending or descending approach instead. This is easy with a desktop view since the column headers are visible and you can simply sort ascending or descending. However, for a mobile view, you can only access the filters using the Filter icon which offers no way of sorting ascending/descending. It only allows you to sort the column by the specific values it contains.

Expected Behavior

I expect that I can customize the filter for a particular field to have just two options; specifically, ascending and descending. I think this would be useful if you have a large set of records and sorting by one name field is not exactly what you want to do. This is not a problem on a desktop view. However, on a mobile view, the filter is the only way of filtering the data since the mobile view lacks the option to filter the columns using their headers like with the desktop view.

Current Behavior

I think the filter should have an option per column to allow for sorting ascending or descending or by the values themselves as is currently the case.

Steps to Reproduce (for bugs)

Using the demo sandbox, follow the steps below to recreate the problem

  1. Select the filter icon
  2. Select the name dropdown within the filter menu
  3. All the names that are in the records appear as options in the drop-down options

Your Environment

Tech Version
Material-UI 4.9.13
MUI-datatables 3.4.1
React 16.3.1
browser Chrome - latest
etc
wdh2100 commented 4 years ago

ref : Turn off sortFilterList and define filterOptions.names

Name Type Default Description
filterOptions object   These options affect the filter display and functionality from the filter dialog. To modify the filter chips that display after selecting filters, see customFilterListOptionsThis option is an object of several options for customizing the filter display and how filtering works.names: custom names for the filter fields Examplelogic: custom filter logic Exampledisplay(filterList, onChange(filterList, index, column), index, column, filterData): Custom rendering inside the filter dialog Example. filterList must be of the same type in the main column options, that is an array of arrays, where each array corresponds to the filter list for a given column.renderValue: A function to customize filter choices Example. Example use case: changing empty strings to "(empty)" in a dropdown.fullWidth (boolean): Will force a filter option to take up the grid's full width.
sortFilterList boolean true Enable/disable alphanumeric sorting of filter lists.
-- -- -- --
RaymondMwaura commented 3 years ago

ref : Turn off sortFilterList and define filterOptions.names

Name Type Default Description filterOptions object   These options affect the filter display and functionality from the filter dialog. To modify the filter chips that display after selecting filters, see customFilterListOptionsThis option is an object of several options for customizing the filter display and how filtering works.names: custom names for the filter fields Examplelogic: custom filter logic Exampledisplay(filterList, onChange(filterList, index, column), index, column, filterData): Custom rendering inside the filter dialog Example. filterList must be of the same type in the main column options, that is an array of arrays, where each array corresponds to the filter list for a given column.renderValue: A function to customize filter choices Example. Example use case: changing empty strings to "(empty)" in a dropdown.fullWidth (boolean): Will force a filter option to take up the grid's full width. sortFilterList boolean true Enable/disable alphanumeric sorting of filter lists.


I've added the "flterOptions.names" ['Descending', 'Ascending'] and they are appearing on the filter dropDown. Now I'll work on the functionality to trigger the actual sorting. I'll close this once it's done. It's been a while since I got time to get back to this.