diff options
Diffstat (limited to 'client/src/components/Dashboard.tsx')
-rw-r--r-- | client/src/components/Dashboard.tsx | 42 |
1 files changed, 33 insertions, 9 deletions
diff --git a/client/src/components/Dashboard.tsx b/client/src/components/Dashboard.tsx index 20758fc..40c84f6 100644 --- a/client/src/components/Dashboard.tsx +++ b/client/src/components/Dashboard.tsx @@ -5,7 +5,7 @@ import { useMaterialReactTable, type MRT_ColumnDef, } from 'material-react-table'; -import type { Guest } from '../slices/api/adminSlice'; +import type { Guest } from '../models'; function Dashboard() { const guests: Guest[] = useOutletContext(); @@ -14,12 +14,12 @@ function Dashboard() { { accessorKey: 'firstName', header: 'First Name', - size: 150, + size: 50, }, { accessorKey: 'lastName', header: 'Last Name', - size: 150, + size: 50, }, { accessorKey: 'attendance', @@ -41,20 +41,44 @@ function Dashboard() { header: 'Party Size', size: 50, }, - // { - // accessorKey: 'partyList', - // header: 'Party List', - // size: 150, - // }, ], [] ); const table = useMaterialReactTable({ columns, data: guests, + renderDetailPanel: ({ row }) => + row.original.partySize > 1 + ? row.original.partyList.map((guest, index) => { + return ( + <div + key={index} + style={{ + width: '32%', + display: 'flex', + justifyContent: 'space-around', + }} + > + <p>{guest.firstName}</p> + <p>{guest.lastName}</p> + </div> + ); + }) + : null, }); - return <MaterialReactTable table={table} />; + return ( + <div + style={{ + display: 'flex', + justifyContent: 'center', + }} + > + <div style={{ marginTop: 128 }}> + <MaterialReactTable table={table} /> + </div> + </div> + ); } export default Dashboard; |