gregnb / gregnb/mui-datatables

Filter table column ascending or descending instead of using values

Open
#1,552 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.7k
Forks
906
PR merge metrics
No merged PRs in 30d

Description

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](https://codesandbox.io/s/muidatatables-custom-toolbar-rvmcj?file=/index.js), 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 | |

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the linked CodeSandbox's index.js and reproduce the mobile filter flow: open the Filter icon and select the name dropdown. Trace how filter options are built and how column sorting works in the table. Done means a column can expose ascending and descending choices in the mobile filter while retaining value-based filtering where configured.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.