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
111
112
|
import React, { useMemo } from 'react';
import { useOutletContext } from 'react-router-dom';
import {
MaterialReactTable,
useMaterialReactTable,
type MRT_ColumnDef,
} from 'material-react-table';
import type { Guest } from '../models';
import { Button, createTheme, ThemeProvider, useTheme } from '@mui/material';
import { mkConfig, generateCsv, download } from 'export-to-csv';
function Dashboard() {
const tableTheme = createTheme({
...useTheme(),
typography: {
fontFamily: ['Roboto', 'sans-serif'].join(','),
},
});
const guests: Guest[] = useOutletContext();
const columns = useMemo<MRT_ColumnDef<Guest>[]>(
() => [
{
accessorKey: 'firstName',
header: 'First Name',
size: 50,
},
{
accessorKey: 'lastName',
header: 'Last Name',
size: 50,
},
{
accessorKey: 'attendance',
header: 'Attendance',
size: 50,
},
{
accessorKey: 'email',
header: 'Email',
size: 150,
},
{
accessorKey: 'message',
header: 'Message',
size: 200,
},
{
accessorKey: 'partySize',
header: 'Party Size',
size: 50,
},
],
[]
);
const csvConfig = mkConfig({
fieldSeparator: ',',
decimalSeparator: '.',
useKeysAsHeaders: true,
});
const handleExportData = () => {
let data = guests.map(({ id, partyList, ...guest }) => guest);
guests.forEach((guest) => {
const { attendance, partySize } = guest;
guest?.partyList?.forEach((partyGuest) =>
data.push({ ...partyGuest, attendance, partySize })
);
});
download(csvConfig)(generateCsv(csvConfig)(data));
};
const table = useMaterialReactTable({
columns,
data: guests,
renderTopToolbarCustomActions: () => (
<div style={{ marginLeft: 'auto' }}>
<Button variant="outlined" size="small" onClick={handleExportData}>
Export
</Button>
</div>
),
muiPaginationProps: {
color: 'primary',
shape: 'rounded',
showRowsPerPage: false,
variant: 'outlined',
},
paginationDisplayMode: 'pages',
enableExpanding: true,
filterFromLeafRows: true,
getSubRows: (row) => row.partyList as Guest[],
});
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
>
<div style={{ marginTop: 128 }}>
<ThemeProvider theme={tableTheme}>
<MaterialReactTable table={table} />
</ThemeProvider>
</div>
</div>
);
}
export default Dashboard;
|
