-
Notifications
You must be signed in to change notification settings - Fork 931
/
index.js
84 lines (77 loc) · 2.97 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
import React from "react";
import ReactDOM from "react-dom";
import { Chip } from "@mui/material";
import MUIDataTable from "../../src/";
class Example extends React.Component {
render() {
const columns = [
{
name: "Name",
},
{
name: "Title",
},
{
name: "Age",
options: {
/*
In this case, age is a string, but we want to compare it as if it was a number.
If you comment out the sortCompare method, you'll see how sorting as a string
is different than sorting as a number. Typically an age field would be a number
so we wouldn't need to write a function like this. But the sortCompare is available
if you run into a situation like this.
*/
sortCompare: (order) => {
return (obj1, obj2) => {
console.log(order);
let val1 = parseInt(obj1.data, 10);
let val2 = parseInt(obj2.data, 10);
return (val1 - val2) * (order === 'asc' ? 1 : -1);
};
}
}
},
{
name: "Hobbies",
options: {
sortCompare: (order) =>
({ data: hobbyList1 }, { data: hobbyList2 }) =>
(hobbyList1.length - hobbyList2.length) * (order === 'asc' ? 1 : -1),
hint: 'Sort by amount of hobbies',
customBodyRender: hobbies => hobbies.map((hobby, index) => <Chip key={index} label={hobby} />)
}
}
];
const data = [
["Gabby George", "Business Analyst", "30", ["Sports"]],
["Business Analyst", "Business Consultant", "55", ["Water Polo"]],
["Jaden Collins", "Attorney", "27", ["Sports", "TV"]],
["Franky Rees", "Business Analyst", "22", ["Baking", "Hiking"]],
["Aaren Rose", "Business Consultant", "28", ["Hiking"]],
["Blake Duncan", "Business Management Analyst", "65", ["Sprots", "Cooking", "Baking"]],
["Frankie Parry", "Agency Legal Counsel", "71", []],
["Lane Wilson", "Commercial Specialist", "19", ["Cooking"]],
["Robin Duncan", "Business Analyst", "20", ["Acting"]],
["Mel Brooks", "Business Consultant", "37", ["Puzzles", "Sewing"]],
["Harper White", "Attorney", "52", ["Fising"]],
["Kris Humphrey", "Agency Legal Counsel", "30", []],
["Frankie Long", "Industrial Analyst", "31", []],
["Brynn Robbins", "Business Analyst", "22", ["Fishing", "Hiking"]],
["Justice Mann", "Business Consultant", "24", ["Footbal"]],
["JoJo", "Business Consultant", "2", ["Sleeping"]],
["Bobby Smith", "Business Consultant", "3", []],
["Addison Navarro", "Business Management Analyst", "50", ["Photography"]]
];
const options = {
filter: true,
filterType: 'dropdown',
responsive: 'vertical',
rowsPerPage: 50,
rowsPerPageOptions: [50],
};
return (
<MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
);
}
}
export default Example;