MUI-datatable将过滤器移到表外

如何解决MUI-datatable将过滤器移到表外

在这里很新，所以不确定MUIdatatable是否允许这样做，但是 是否可以将过滤器移到MUI数据表之外，如此处所示的示例-

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

名称，标题和位置也可以显示在表格上方并与表格互动吗？

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

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",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",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","St. Petersburg",22,50000],["Aaren Rose","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","Los Angeles",20,77000],["Mel Brooks","Oklahoma City",37,135000],["Harper White","Pittsburgh",52,420000],["Kris Humphrey","Laredo",150000],["Frankie Long","Industrial Analyst","Austin",31,170000],["Brynn Robbins","Norfolk",90000],["Justice Mann","Chicago",24,133000],["Addison Navarro","New York",50,295000],["Jesse Welch","Seattle",["Eli Mejia","Long Beach",400000],["Gene Leblanc","Hartford",34,110000],["Danny Leon","Computer Scientist","Newark",60,220000],["Lane Lee","Corporate Counselor","Cincinnati",180000],["Jesse Hall","Baltimore",44,99000],["Danni Hudson","Tampa",["Terry Macdonald","Miami",39,140000],["Justice Mccarthy","Tucson",26,330000],["Silver Carey","Memphis",47,250000],["Franky Miles","Buffalo",49,190000],["Glen Nixon","Arlington",80000],["Gabby Strickland","Business Process Consultant","Scottsdale",45000],["Mason Ray","San Francisco",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} />
);

}

}

导出默认示例；

解决方法

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

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

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

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

  // const columns = ["Name","Title","Location"];
  const columns = [
    { name: "Name" },{ name: "Title",options: { filterList: ["Business Analyst"] } },{ name: "Location" }
  ];