added data table

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>
+  )
+}