-
Notifications
You must be signed in to change notification settings - Fork 931
/
index.js
94 lines (85 loc) · 2.35 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "../../src/";
class Example extends React.Component {
state = {
counter: 0,
data: [
{ name: "Gabby George", title: "Business Analyst", location: "Minneapolis", age: 30, salary: "$100,000", phone: { home: '867-5309', cell: '123-4567' } },
{ name: "Aiden Lloyd", title: "Business Consultant", location: "Dallas", age: 55, salary: "$200,000", phone: { home: '867-5310', cell: '123-4568' } },
{ name: "Jaden Collins", title: "Attorney", location: "Santa Ana", age: 27, salary: "$500,000", phone: { home: '867-5311', cell: '123-4569' } },
{ name: "Franky Rees", title: "Business Analyst", location: "St. Petersburg", age: 22, salary: "$50,000", phone: { home: '867-5312', cell: '123-4569' } }
]
}
rerender = () => {
this.setState((prevState, props) => ({
counter: prevState.counter + 1
}));
}
render() {
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
display: 'excluded',
}
},
{
name: "title",
label: "Modified Title Label",
options: {
filter: true,
}
},
{
name: "location",
label: "Location",
options: {
filter: false,
}
},
{
name: "age",
Label: "Age",
options: {
filter: true,
}
},
{
name: "salary",
label: "Salary",
options: {
filter: true,
sort: false
}
},
{
name: "phone.home",
label: "Home Phone",
},
{
name: "phone.cell",
label: "Cell Phone #",
},
{
name: "phone2.home",
label: "Not An Attribute",
}
];
const options = {
filter: true,
filterType: 'dropdown',
responsive: 'vertical',
enableNestedDataAccess: '.', // allows nested data separated by "." (see column names and the data structure above)
};
return (
<React.Fragment>
<button onClick={this.rerender}>Re-render - {this.state.counter}</button>
<MUIDataTable title={"ACME Employee list"} data={this.state.data} columns={columns} options={options} />
</React.Fragment>
);
}
}
export default Example;