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
|
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';
function Dashboard() {
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 table = useMaterialReactTable({
columns,
data: guests,
muiPaginationProps: {
color: 'primary',
shape: 'rounded',
showRowsPerPage: false,
variant: 'outlined',
},
paginationDisplayMode: 'pages',
renderDetailPanel: ({ row }) =>
row.original.partySize > 1
? row.original.partyList.map((guest, index) => {
return (
<div
key={index}
style={{
width: '34%',
display: 'flex',
justifyContent: 'space-around',
}}
>
<p>{guest.firstName}</p>
<p>{guest.lastName}</p>
</div>
);
})
: null,
});
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
>
<div style={{ marginTop: 128 }}>
<MaterialReactTable table={table} />
</div>
</div>
);
}
export default Dashboard;
|
