added data table

components/tables/DataTable.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    SortingState,
+    getSortedRowModel
+} from '@tanstack/react-table'
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from '../ui/table'
+
+import { useState } from 'react'
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+    className?: string
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    className
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = useState<SortingState>([])
+
+    const table = useReactTable({
+        data,
+        columns,
+        state: { sorting },
+        onSortingChange: setSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel()
+    })
+
+    return (
+        <div className={`rounded-md border ${className || ''}`}>
+            <Table>
+                <TableHeader>
+                    {table.getHeaderGroups().map(headerGroup => (
+                        <TableRow key={headerGroup.id} >
+                            {headerGroup.headers.map(header => (
+                                <TableHead key={header.id} className="whitespace-nowrap">
+                                    {header.isPlaceholder
+                                        ? null
+                                        : flexRender(
+                                            header.column.columnDef.header,
+                                            header.getContext()
+                                        )}
+                                </TableHead>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+
+                <TableBody>
+                    {table.getRowModel().rows.length ? (
+                        table.getRowModel().rows.map(row => (
+                            <TableRow key={row.id}>
+                                {row.getVisibleCells().map(cell => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={columns.length} className="text-center">
+                                No results
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}

components/tables/GuestBookTable.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+import { DataTable } from './DataTable'
+
+interface GuestBookEntryRow {
+  id: string
+  fName: string
+  lName: string
+  side: string
+  address: string
+  notes?: string | null
+  phone?: string | null
+  email?: string | null
+  congratulated?: boolean | null
+}
+
+interface Props {
+  guestBookEntries: GuestBookEntryRow[]
+}
+
+const columns: ColumnDef<GuestBookEntryRow>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    cell: ({ row }) => row.original.fName + " " + row.original.lName
+  },
+  {
+    accessorKey: 'side',
+    header: 'Side'
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    cell: ({ row }) => row.original.email || '—'
+  },
+  {
+    accessorKey: 'phone',
+    header: 'Phone',
+    cell: ({ row }) => row.original.phone || '—'
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address',
+    cell: ({ row }) => row.original.address || '—'
+  },
+  {
+    accessorKey: 'congratulated',
+    header: 'Congratulated Engagement',
+    cell: ({ row }) => row.original.congratulated == true ? "Yes" : 'No'
+  },
+  {
+    accessorKey: 'notes',
+    header: 'Notes',
+    cell: ({ row }) => row.original.notes || '—'
+  },
+
+]
+
+export default function GuestBookTable({ guestBookEntries }: Props) {
+  return (
+    <div className="mt-4">
+      <DataTable columns={columns} data={guestBookEntries} />
+    </div>
+  )
+}

components/tables/LocationsTable.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+import { DataTable } from './DataTable'
+
+interface LocationRow {
+  id: string
+  name: string
+  address: string
+  city: string
+  state: string
+  postalCode: string
+  country: string
+  phone?: string | null
+  email?: string | null
+}
+
+interface Props {
+  eventLocations: LocationRow[]
+}
+
+const columns: ColumnDef<LocationRow>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name'
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address'
+  },
+  {
+    accessorKey: 'city',
+    header: 'City'
+  },
+  {
+    accessorKey: 'state',
+    header: 'State'
+  },
+  {
+    accessorKey: 'postalCode',
+    header: 'Postal Code'
+  },
+  {
+    accessorKey: 'country',
+    header: 'Country'
+  },
+  {
+    accessorKey: 'phone',
+    header: 'Phone',
+    cell: ({ row }) => row.original.phone || '—'
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    cell: ({ row }) => row.original.email || '—'
+  }
+]
+
+export default function LocationsTable({ eventLocations }: Props) {
+  return (
+    <div className="mt-4">
+      <DataTable columns={columns} data={eventLocations} />
+    </div>
+  )
+}