How can I sort using mui-datatables using value, instead of what's in my custom body render?

Question

Before implementing the custom filter options, the temperature (of type Number) was displayed as a string with the "° C" appended to it, but still held the value, as it was able to be sorted accordingly (ascending and descending). After implementing the custom filter options, I am no longer able to filter based on the value but it filters based on the string that is returned from customBodyRender. For example, if I specify a minimum value as 3, values like 20 and 10 will not be returned, as it seems like it's now sorting alphanumerically. When I remove the customBodyRender, it works perfectly.

How can I get the MUI Data table to render the way I'd like it to, while preserving the sorting of the actual value itself? I pasted the code below. Being that I'm new to react, I will continue to do more research and update the question over time.

const columns = [
    {name: "Temperature", options:{
      filter: true,
      customBodyRender: (value) => {
        return (value + "° C")
      },
      filterType: 'custom',
      filterList: [],
      customFilterListOptions: {
        render: value => {
          if (value[0] && value[1]) {
            return `Min Temp: ${value[0]}, Max Temp: ${value[1]}`;
          } else if (value[0]) {
            return `Min Temp: ${value[0]}`;
          } else if (value[1]) {
            return `Max Temp: ${value[1]}`;
          }
          return false;
        },
        update: (filterList, filterPos, index) => {
          console.log('customFilterListOnDelete: ', filterList, filterPos, index);

          if (filterPos === 0) {
            filterList[index].splice(filterPos, 1, '');
          } else if (filterPos === 1) {
            filterList[index].splice(filterPos, 1);
          } else if (filterPos === -1) {
            filterList[index] = [];
          }

          return filterList;
        },
      },
      filterOptions: {
        names: [],
        logic(value, filters) {
          if (filters[0] && filters[1]) {
            return (value < filters[0]) || value > filters[1];
          } else if (filters[0]) {
            return value < filters[0];
          } else if (filters[1]) {
            return value > filters[1];
          }
          return false;
        },
        display: (filterList, onChange, index, column) => (
          <div>
            <FormLabel>Temperature</FormLabel>
            <FormGroup row>
              <TextField
                label="min"
                value={filterList[index][0] || ''}
                onChange={event => {
                  filterList[index][0] = event.target.value;
                  onChange(filterList[index], index, column);
                }}
                style={{ width: '45%', marginRight: '5%' }}
              />
              <TextField
                label="max"
                value={filterList[index][1] || ''}
                onChange={event => {
                  filterList[index][1] = event.target.value;
                  onChange(filterList[index], index, column);
                }}
                style={{ width: '45%' }}
              />
            </FormGroup>
          </div>
        ),
      },
    }}
]

Klaus · Accepted Answer · 2019-12-20 14:25:26Z

I found two little problems in your code.

First one: The render function in customFilterListOptions should return a string or string[] (see documentation). Second one: In the logic function of filterOptions it was necessary to convert values and filters to numbers before comparing them.

If you have any questions, let me know.

This shall work now:

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import { TextField, FormLabel, FormGroup } from "@material-ui/core";
import { toNumber } from "lodash";

import "./styles.css";

const TEMPERATURE_PREFIX = "° C";

function App() {
  const columns = [
    {
      name: "city",
      label: "City",
      options: {
        filter: true,
        sort: false
      }
    },
    {
      name: "temp",
      label: "Temperature",
      options: {
        sort: true,
        customBodyRender: value => {
          return value + TEMPERATURE_PREFIX;
        },
        filter: true,
        filterType: "custom",
        filterList: [],
        customFilterListOptions: {
          render: value => {
            if (value[0] && value[1]) {
              return `Min Temp: ${value[0]}, Max Temp: ${value[1]}`;
            } else if (value[0]) {
              return `Min Temp: ${value[0]}`;
            } else if (value[1]) {
              return `Max Temp: ${value[1]}`;
            }
            return [];
          },
          update: (filterList, filterPos, index) => {
            console.log(
              "customFilterListOnDelete: ",
              filterList,
              filterPos,
              index
            );

            if (filterPos === 0) {
              filterList[index].splice(filterPos, 1, "");
            } else if (filterPos === 1) {
              filterList[index].splice(filterPos, 1);
            } else if (filterPos === -1) {
              filterList[index] = [];
            }

            return filterList;
          }
        },
        filterOptions: {
          names: [],
          logic(value, filters) {
            const temperature = toNumber(
              value.replace(TEMPERATURE_PREFIX, "")
            );
            const lower = toNumber(filters[0]);
            const upper = toNumber(filters[1]);
            if (lower && upper) {
              return temperature < lower || temperature > upper;
            } else if (lower) {
              return temperature < lower;
            } else if (upper) {
              return temperature > upper;
            }
            return false;
          },
          display: (filterList, onChange, index, column) => (
            <div>
              <FormLabel>Temperature</FormLabel>
              <FormGroup row>
                <TextField
                  label="min"
                  value={filterList[index][0] || ""}
                  onChange={event => {
                    filterList[index][0] = event.target.value;
                    onChange(filterList[index], index, column);
                  }}
                  style={{ width: "45%", marginRight: "5%" }}
                />
                <TextField
                  label="max"
                  value={filterList[index][1] || ""}
                  onChange={event => {
                    filterList[index][1] = event.target.value;
                    onChange(filterList[index], index, column);
                  }}
                  style={{ width: "45%" }}
                />
              </FormGroup>
            </div>
          )
        }
      }
    }
  ];

  const data = [
    { city: "Yonkers", temp: 3 },
    { city: "Hartford", temp: 11 },
    { city: "Tampa", temp: 25 },
    { city: "Dallas", temp: 30 }
  ];

  const options = {
    filterType: "checkbox"
  };

  return (
    <div className="App">
      <MUIDataTable
        title={"Employee List"}
        data={data}
        columns={columns}
        options={options}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

(https://codesandbox.io/s/competent-kirch-uc01b)

Awesome, this worked! Thank you. Understand what went wrong now

jbrainz · Accepted Answer · 2022-01-12 17:00:28Z

0

in the options add the code below.

options={{
  sort: true,
  sortOrder: { name: 'id', direction: 'desc' },
}}

answered Jan 12, 2022 at 17:00

jbrainz

592 bronze badges

Collectives™ on Stack Overflow

How can I sort using mui-datatables using value, instead of what's in my custom body render?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related