0

在这里做出反应的相当新，所以不确定 MUIdatatable 是否允许这样做，但是是否可以像这里显示的示例一样将过滤器移动到 MUI 数据表之外 -

https://codesandbox.io/s/muidatatables-custom-toolbar-rvmcj?file=/index.js

名称、标题和位置是否也可以呈现在表格上方并与表格交互？

下面是我渲染的一个示例组件，它具有过滤器选项，但我更希望它像上面的代码框示例一样。

import React from "react";
import MUIDataTable from "mui-datatables";

class Example extends React.Component {

render() {

const columns = [
  {
    name: "Name",
    options: {
      filter: true,
      filterList: ['Franky Miles'],
      customFilterListOptions: { render: v => `Name: ${v}` },
      filterOptions: {
        names: ['a', 'b', 'c', 'Business Analyst']
      },
    }
  },
  {
    name: "Title",
    options: {
      filter: true,
      filterList: ['Business Analyst'],
      customFilterListOptions: { render: v => `Title: ${v}` },
      filterType: 'textField' // set filterType's at the column level
    }
  },
  {
    name: "Location",
    options: {
      filter: false,
    }
  },
  {
    name: "Age",
    options: {
      customBodyRenderLite: (dataIndex) => {
        let val = data[dataIndex][3];
        return val;
      },
      filter: true,
      customFilterListOptions: { render: v => `Age: ${v}` },
    }
  },
  {
    name: "Salary",
    options: {
      filter: true,
      customFilterListOptions: { render: v => `Salary: ${v}` },
      sort: false
    }
  }
];
const data = [
  ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000],
  ["Business Analyst", "Business Consultant", "Dallas",  55, 200000],
  ["Jaden Collins", "Attorney", "Santa Ana", 27, 500000],
  ["Franky Rees", "Business Analyst", "St. Petersburg", 22, 50000],
  ["Aaren Rose", "Business Consultant", "Toledo", 28, 75000],
  ["Blake Duncan", "Business Management Analyst", "San Diego", 65, 94000],
  ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, 210000],
  ["Lane Wilson", "Commercial Specialist", "Omaha", 19, 65000],
  ["Robin Duncan", "Business Analyst", "Los Angeles", 20, 77000],
  ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, 135000],
  ["Harper White", "Attorney", "Pittsburgh", 52, 420000],
  ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000],
  ["Frankie Long", "Industrial Analyst", "Austin", 31, 170000],
  ["Brynn Robbins", "Business Analyst", "Norfolk", 22, 90000],
  ["Justice Mann", "Business Consultant", "Chicago", 24, 133000],
  ["Addison Navarro", "Business Management Analyst", "New York", 50, 295000],
  ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, 200000],
  ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, 400000],
  ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, 110000],
  ["Danny Leon", "Computer Scientist", "Newark", 60, 220000],
  ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, 180000],
  ["Jesse Hall", "Business Analyst", "Baltimore", 44, 99000],
  ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, 90000],
  ["Terry Macdonald", "Commercial Specialist", "Miami", 39, 140000],
  ["Justice Mccarthy", "Attorney", "Tucson", 26, 330000],
  ["Silver Carey", "Computer Scientist", "Memphis", 47, 250000],
  ["Franky Miles", "Industrial Analyst", "Buffalo", 49, 190000],
  ["Glen Nixon", "Corporate Counselor", "Arlington", 44, 80000],
  ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, 45000],
  ["Mason Ray", "Computer Scientist", "San Francisco", 39, 142000]
];

const options = {
  filter: true,
  onFilterChange: (changedColumn, filterList) => {
    console.log(changedColumn, filterList);
  },
  selectableRows: 'multiple',
  filterType: 'dropdown',
  responsive: 'vertical',
  rowsPerPage: 10,
};

return (
  <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
);

}

}

导出默认示例；

4

1 回答 1

1

我知道我回答太迟了..但只是为了帮助到达这里的其他人找到答案。

答案：https ://codesandbox.io/s/muidatatables-custom-toolbar-forked-0izyt

在这里，我只对标题列应用了一个“业务分析师”过滤器。它是一个游乐场，您可以根据需要应用更多过滤器。

需要更新“列”数组以包含options.filterList以应用来自外部数据表的过滤器。

  // const columns = ["Name", "Title", "Location"];
  const columns = [
    { name: "Name" },
    { name: "Title", options: { filterList: ["Business Analyst"] } },
    { name: "Location" }
  ];
于 2021-06-01T04:53:27.683 回答