MUI数据表正在表外移动筛选器

Question

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

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

Can Name，Title&位置是否也在上面呈现并与表交互？

下面是我渲染的一个示例组件，它有过滤器选项，但我更喜欢像上面的codesandbox示例一样。

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} />
);
}

}

导出默认示例；

Answer 1

我知道我来不及回答了。。但只是为了帮助其他到达这里的人找到答案。

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

在这里，我只应用了一个"0"的滤波器；业务分析员"；到标题列。这是一个游戏场地，您可以根据需要应用更多的过滤器。

"；列"；数组需要更新为包含选项。filterList以应用来自外部数据表的筛选器。

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