added data table
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import EditGuestBookEntryModal from './EditGuestBookEntryModal'
|
||||
// import GuestBookTable from './tables/GuestBookTable'
|
||||
|
||||
interface GuestBookEntry {
|
||||
id: string
|
||||
@@ -63,36 +64,39 @@ export default function GuestBookList({ entries, view }: { entries: GuestBookEnt
|
||||
return (
|
||||
<div className='space-y-4'>
|
||||
{view === 'TABLE' ? (
|
||||
<div className='overflow-hidden rounded-xl'>
|
||||
<table className='table-auto w-full mb-16 p-4'>
|
||||
<thead className='bg-brand-primary text-brand-background border border-brand-primary'>
|
||||
<tr className='text-left'>
|
||||
<th className='px-4 py-2'>Name</th>
|
||||
<th className='px-4 py-2'>Email</th>
|
||||
<th className='px-4 py-2'>Phone</th>
|
||||
<th className='px-4 py-2'>Address</th>
|
||||
<th className='px-4 py-2'>Congratulated Engagement</th>
|
||||
<th className='px-4 py-2'>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className=''>
|
||||
{entries.map(entry => (
|
||||
<tr
|
||||
key={entry.id}
|
||||
className='odd:bg-brand-primary-900 even:bg-brand-primary-950 hover:cursor-pointer hover:bg-brand-primary-700 hover:text-brand-background transition-colors duration-50'
|
||||
onClick={() => setEditingEntry(entry)}
|
||||
>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.fName + ' ' + entry.lName} <span className='text-sm'>(Side: {entry.side})</span></td>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.email || 'N/A'}</td>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.phone || 'N/A'}</td>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.address || 'N/A'}</td>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.congratulated == true ? 'Yes' : "No"}</td>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.notes || 'N/A'}</td>
|
||||
<>
|
||||
<div className='overflow-hidden rounded-xl'>
|
||||
<table className='table-auto w-full mb-16 p-4'>
|
||||
<thead className='bg-brand-primary text-brand-background border border-brand-primary'>
|
||||
<tr className='text-left'>
|
||||
<th className='px-4 py-2'>Name</th>
|
||||
<th className='px-4 py-2'>Email</th>
|
||||
<th className='px-4 py-2'>Phone</th>
|
||||
<th className='px-4 py-2'>Address</th>
|
||||
<th className='px-4 py-2'>Congratulated Engagement</th>
|
||||
<th className='px-4 py-2'>Notes</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody className=''>
|
||||
{entries.map(entry => (
|
||||
<tr
|
||||
key={entry.id}
|
||||
className='odd:bg-brand-primary-900 even:bg-brand-primary-950 hover:cursor-pointer hover:bg-brand-primary-700 hover:text-brand-background transition-colors duration-50'
|
||||
onClick={() => setEditingEntry(entry)}
|
||||
>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.fName + ' ' + entry.lName} <span className='text-sm'>(Side: {entry.side})</span></td>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.email || 'N/A'}</td>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.phone || 'N/A'}</td>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.address || 'N/A'}</td>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.congratulated == true ? 'Yes' : "No"}</td>
|
||||
<td className='border border-brand-primary px-4 py-2'>{entry.notes || 'N/A'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* <GuestBookTable guestBookEntries={entries} /> */}
|
||||
</>
|
||||
) : (
|
||||
<div className='space-y-4 mx-auto'>
|
||||
<div className='grid grid-cols-3 gap-4 w-full'>
|
||||
|
||||
@@ -2,14 +2,10 @@
|
||||
|
||||
import * as React from "react"
|
||||
import {
|
||||
IconCamera,
|
||||
IconChartBar,
|
||||
IconBuildingArch,
|
||||
IconDashboard,
|
||||
IconDatabase,
|
||||
IconFileAi,
|
||||
IconFileDescription,
|
||||
IconFileWord,
|
||||
IconFolder,
|
||||
IconHelp,
|
||||
IconInnerShadowTop,
|
||||
IconListDetails,
|
||||
@@ -50,6 +46,11 @@ const data = {
|
||||
url: "/guest-book",
|
||||
icon: IconUsers,
|
||||
},
|
||||
{
|
||||
title: "Locations",
|
||||
url: "/locations",
|
||||
icon: IconBuildingArch,
|
||||
},
|
||||
],
|
||||
// navClouds: [
|
||||
// {
|
||||
|
||||
87
components/tables/DataTable.tsx
Normal file
87
components/tables/DataTable.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
66
components/tables/GuestBookTable.tsx
Normal file
66
components/tables/GuestBookTable.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
65
components/tables/LocationsTable.tsx
Normal file
65
components/tables/LocationsTable.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user