javascript Mui-Datatable,列上有过滤器,在顶部显示过滤属性。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript Mui-Datatable,列上有过滤器,在顶部显示过滤属性。相关的知识,希望对你有一定的参考价值。
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import Chip from "@material-ui/core/Chip";
class Example extends React.Component {
render() {
const columns = [
{
name: "Name",
options: {
filter: true,
filterList: ["Franky Miles"],
customFilterListRender: v => `Name: ${v}`,
filterOptions: {
names: ["a", "b", "c", "Business Analyst"]
}
}
},
{
name: "Title",
options: {
filter: true,
filterList: ["Business Analyst"],
customFilterListRender: v => `Title: ${v}`,
filterType: "textField" // set filterType's at the column level
}
},
{
name: "Location",
options: {
filter: false
}
},
{
name: "Age",
options: {
filter: true,
customFilterListRender: v => `Age: ${v}`
}
},
{
name: "Salary",
options: {
filter: true,
customFilterListRender: 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: true,
filterType: "dropdown",
responsive: "stacked",
rowsPerPage: 10,
page: 1
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);
以上是关于javascript Mui-Datatable,列上有过滤器,在顶部显示过滤属性。的主要内容,如果未能解决你的问题,请参考以下文章
javascript Mui-Datatable与自定义页脚。
javascript Mui-Datatable with search filter。
javascript Mui-Datatable,列上有选择,删除选项。
javascript Mui-Datatable可以删除,添加和编辑行的选项。