如何在MUI数据表中实现自定义排序功能?

时间:2019-06-06 17:17:53

标签: sorting date currency mui mui-datatable

我正在尝试实现mui数据表,该数据表允许用户按日期和货币值对订单进行排序。这两个数据点当前都存储为字符串。

我对JavaScript还是很陌生,所以我很难理解MUI数据表存储库中的示例,这些示例演示了如何执行此操作。

MUI数据表GitHub存储库中的示例代码,说明如何实现自定义排序

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "../../src/";

class Example extends React.Component {

  render() {

    const columns = ["Name", "SurveyScore", "Date"];

    const data = [
      ["Gabby George", 3, "2018-07-06T23:58:59.000Z"],
      ["Aiden Lloyd", 10, "2018-07-06T23:58:53.000Z"],
      ["Jaden Collins", 3, "2018-07-06T23:55:51.000Z"],
      ["Franky Rees", 3, "2018-07-06T22:47:56.000Z"],
      ["Aaren Rose", 8, "2018-07-06T21:59:20.000Z"]
    ];

    const options = {
      filter: true,
      filterType: 'dropdown',
      responsive: 'stacked',
      customSort: (data, colIndex, order) => {
        return data.sort((a, b) => {
          return (a.data[colIndex].length < b.data[colIndex].length ? -1: 1 ) * (order === 'desc' ? 1 : -1);
        });
      }
    };

    return (
      <MUIDataTable title={"Survey Scores"} data={data} columns={columns} options={options} />
    );

  }
}

ReactDOM.render(<Example />, document.getElementById("app-root"));

0 个答案:

没有答案