Mui-datatables: want to applied custom filter example (for date)

[mhmmdakbr]

So if i take a look to the custom filter example, it is built for string and int , what if i want to custom it to date format ?

Expected Behavior

so there's a column for date in my table, i want to filter the data based on before the date I choose. ( for example i have column created at, if i choose 22/06/2019 at my created at filter, it will show the data that created before or on 22/06/2019.

Current Behavior

so this is my code for filtered it

 {
        name: "Date",
        label: " Entertaint Date",
        options: {
          filter: true,
          filterOptions: {
            logic(date, filters) {
              const show = (filters.indexOf() >= 0 && Tanggal <= filters[0]);
              const filtered = !show;
              console.log(filtered)
              return filtered;
            }
          },
        },
      },

it show nothing on my table, i want to custom just the logic , not the name
my question is :

1. what does the filter logic mean?
2. why it's return true or false ?
3. how can i get the value of my filtered that i selected in filter logic?

sorry for my bad english

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | |
| MUI-datatables | 2.5.1 |
| React | |
| browser | |
| etc | |

[gabrielliwerant]

You can definitely use logic without names to supply your own filter logic. The way it works is as follows:

The logic function is called for every row of the table. For each row, it will supply the value of the column the option is in, and any existing filters. You return true | false to tell the table whether or not you want the value filtered in (true) or out (false). After the table has run the function on each row, it will have a results set of all the of true values and will display these rows only.

You may also want to supply your own filter fields. You will be able to do this once https://github.com/gregnb/mui-datatables/pull/708 is merged and added to a release, most likely the next release.

[mhmmdakbr]

so in custom filter example , the filter name is custom

 names: ["young", "adult", "middle-age", "senior", "elderly"],
            logic(age, filters) {
              const show = (filters.indexOf("young") >= 0 && age <= 35) ||
                (filters.indexOf("adult") >= 0 && age > 35 && age <= 45) ||
                (filters.indexOf("middle-age") >= 0 && age > 45 && age <= 65) ||
                (filters.indexOf("senior") >= 0 && age > 65 && age <= 75) ||
                (filters.indexOf("elderly") >= 0 && age > 75);
              const filtered = !show;
              return filtered;

in the const show = filters.indexOf("young") because you know there's a 'young' in the filter list,
So if i want to custom only the logic, how can i get the value in the filter list ? is it filters.indexOf(filters.value) maybe?

sorry for my bad english

[gabrielliwerant]

It's difficult to help because I don't know what your code looks like or what exactly you are trying to do, and the need for precision at this point is higher than can be explained in just words. You don't have to do anything with indexOf if you don't want. You need to decide what values you want to filter and then return true or false based on those. Sorry, I don't think I can help more.

[joe-bb]

Using the example given, here is how I filtered between dates. I set the hours of the first date to (0,0,0,0) and second date hours to (23,59,59,59) if the user wants date-times of a single day.

{
        name: "date",
        label: "Date",
        options: {
          filter: true,
          sort: true,
          sortDirection: 'desc',
          customBodyRender: (value) => {
            return new Date(value).toString();
          },
          filterType: 'custom',
          customFilterListRender: v => {
            if (v[0] && v[1]) {
              return `Start Date: ${v[0]}, End Date: ${v[1]}`;
            } else if (v[0]) {
              return `Start Date: ${v[0]}`;
            } else if (v[1]) {
              return `End Date: ${v[1]}`;
            }
            return false;
          },
          filterOptions: {
            names: [],
            logic(date, filters) {
              var check = new Date(date);
              var from = new Date(filters[0]);
              var to = new Date(filters[1]);
              from.setDate(from.getDate() + 1);
              to.setDate(to.getDate() + 1);
              from = new Date(from).setHours(0,0,0,0);
              to = new Date(to).setHours(23,59,59,59);

              if(filters[0] && filters[1] && check >= to && check <= from) {
                return true;
              } else if (filters[0] && check >= to) {
                return true;
              } else if (filters[1] && check <= from) {
                return true;
              }
              return false;
            },
            display: (filterList, onChange, index, column) => (
              <div>
                <FormLabel>Date</FormLabel>
                <FormGroup row>
                  <TextField
                    id="startDate"
                    label="Start Date"
                    type="date"
                    InputLabelProps={{
                      shrink: true,
                    }}
                    value={filterList[index][0] || ''}
                    onChange={event => {
                      filterList[index][0] = event.target.value;
                      onChange(filterList[index], index, column);
                    }}
                    style={{ width: '45%', marginRight: '5%' }}
                  />
                  <TextField
                    id="endDate"
                    label="End Date"
                    type="date"
                    InputLabelProps={{
                      shrink: true,
                    }}
                    value={filterList[index][1] || ''}
                    onChange={event => {
                      filterList[index][1] = event.target.value;
                      onChange(filterList[index], index, column);
                    }}
                    style={{ width: '45%', marginRight: '5%' }}
                  />
                </FormGroup>
              </div>
            ),
          },
          print: false,
        },
      },