-
Notifications
You must be signed in to change notification settings - Fork 1
/
DataTableBase.tsx
110 lines (104 loc) · 2.85 KB
/
DataTableBase.tsx
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import { useColorMode, useTheme } from "@chakra-ui/react";
import DataTable,{ TableColumn } from "react-data-table-component";
import classnames from "classnames";
interface Props {
columns: TableColumn<any>[];
data: any[];
title?: string;
}
export default function DataTableBase({ columns, data, title = "" }: Props) {
const { colorMode } = useColorMode();
const theme = useTheme();
const tableCustomStyles = {
table: {
style: {
color:
colorMode == "dark"
? theme.colors.gray["300"]
: theme.colors.gray["500"],
backgroundColor:
colorMode == "dark" ? theme.colors.gray["800"] : "white",
},
},
header: {
style: {
fontSize: "22px",
color:
colorMode == "dark"
? theme.colors.gray["200"]
: theme.colors.gray["800"],
backgroundColor:
colorMode == "dark" ? theme.colors.gray["800"] : "white",
minHeight: "56px",
paddingLeft: "16px",
paddingRight: "8px",
},
},
headRow: {
style: {
fontSize: "16px",
color:
colorMode == "dark"
? theme.colors.gray["200"]
: theme.colors.gray["500"],
backgroundColor:
colorMode == "dark" ? theme.colors.gray["800"] : "white",
},
},
rows: {
style: {
color: colorMode == "dark" ? "white" : "black",
backgroundColor:
colorMode == "dark" ? theme.colors.gray["800"] : "white",
},
// selectedHighlightStyle: {
// // use nth-of-type(n) to override other nth selectors
// "&:nth-of-type(n)": {
// color: "red",
// backgroundColor: "red",
// borderBottomColor: "red",
// },
// },
},
noData: {
style: {
color: colorMode == "dark" ? "white" : "black",
backgroundColor:
colorMode == "dark" ? theme.colors.gray["800"] : "white",
},
},
pagination: {
style: {
color:
colorMode == "dark"
? theme.colors.gray["300"]
: theme.colors.gray["500"],
fontSize: "13px",
minHeight: "56px",
backgroundColor:
colorMode == "dark" ? theme.colors.gray["800"] : "white",
borderTopStyle: "solid",
borderTopWidth: "1px",
},
},
};
const paginationOptions = {
rowsPerPageText: "Página:",
rangeSeparatorText: "of",
};
return (
<DataTable
title={title}
columns={columns}
data={data}
pagination
fixedHeaderScrollHeight="300px"
customStyles={tableCustomStyles}
noDataComponent="Nenhum registro encontrado."
paginationPerPage={5}
paginationRowsPerPageOptions={[5, 10, 20]}
className={colorMode === "dark" ? "dark" : "light"}
paginationComponentOptions={paginationOptions}
/>
);
}