'use client' import { useState } from 'react' import { PlusIcon } from 'lucide-react' import type { ColumnDef, ColumnFiltersState, SortingState, VisibilityState } from '@tanstack/react-table' import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table' import { Button } from '@/components/ui/button' import { Checkbox } from '@/components/ui/checkbox' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' const data: Payment[] = [ { id: '1', name: 'Shang Chain', amount: 699, status: 'success', email: 'shang07@yahoo.com' }, { id: '2', name: 'Kevin Lincoln', amount: 242, status: 'success', email: 'kevinli09@gmail.com' }, { id: '3', name: 'Milton Rose', amount: 655, status: 'processing', email: 'rose96@gmail.com' }, { id: '4', name: 'Silas Ryan', amount: 874, status: 'success', email: 'silas22@gmail.com' }, { id: '5', name: 'Ben Tenison', amount: 541, status: 'failed', email: 'bent@hotmail.com' } ] export type Payment = { id: string name: string amount: number status: 'pending' | 'processing' | 'success' | 'failed' email: string } export const columns: ColumnDef[] = [ { id: 'select', header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label='Select all' /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label='Select row' /> ), enableSorting: false, enableHiding: false }, { header: 'Name', accessorKey: 'name', cell: ({ row }) =>

{row.getValue('name')}

}, { accessorKey: 'status', header: 'Status', cell: ({ row }) =>

{row.getValue('status')}

}, { accessorKey: 'email', header: 'Email', cell: ({ row }) =>

{row.getValue('email')}

}, { accessorKey: 'amount', header: () =>

Amount

, cell: ({ row }) => { const amount = parseFloat(row.getValue('amount')) const formatted = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount) return

{formatted}

} } ] const DataTableDensityDemo = () => { const [tableData, setTableData] = useState(data) const [globalFilter, setGlobalFilter] = useState('') const [sorting, setSorting] = useState([]) const [columnFilters, setColumnFilters] = useState([]) const [columnVisibility, setColumnVisibility] = useState({}) const [rowSelection, setRowSelection] = useState({}) const [isSheetOpen, setIsSheetOpen] = useState(false) // Form state for adding new user const [newUser, setNewUser] = useState({ name: '', email: '', amount: '', status: 'pending' as Payment['status'] }) // Function to handle form submission const handleAddUser = () => { if (!newUser.name || !newUser.email || !newUser.amount) { return // Basic validation } const newPayment: Payment = { id: String(tableData.length + 1), name: newUser.name, email: newUser.email, amount: parseFloat(newUser.amount), status: newUser.status } setTableData([...tableData, newPayment]) // Reset form setNewUser({ name: '', email: '', amount: '', status: 'pending' }) setIsSheetOpen(false) } const table = useReactTable({ data: tableData, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), onColumnVisibilityChange: setColumnVisibility, onRowSelectionChange: setRowSelection, onGlobalFilterChange: setGlobalFilter, globalFilterFn: 'includesString', state: { sorting, columnFilters, columnVisibility, rowSelection, globalFilter } }) return (

setGlobalFilter(String(event.target.value))} className='max-w-2xs' /> Add New User Add a new user to the table. Fill in all the required information.

Name setNewUser({ ...newUser, name: e.target.value })} placeholder='Enter user name' />

Email setNewUser({ ...newUser, email: e.target.value })} placeholder='Enter email address' />

Amount setNewUser({ ...newUser, amount: e.target.value })} placeholder='Enter amount' />

Status

{table.getHeaderGroups().map(headerGroup => ( {headerGroup.headers.map(header => { return ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} ) })} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map(row => ( {row.getVisibleCells().map(cell => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} )) ) : ( No results. )}

Add new user with sheet

) } export default DataTableDensityDemo

Name	Status	Email	Amount
Shang Chain	success	shang07@yahoo.com	$699.00
Kevin Lincoln	success	kevinli09@gmail.com	$242.00
Milton Rose	processing	rose96@gmail.com	$655.00
Silas Ryan	success	silas22@gmail.com	$874.00
Ben Tenison	failed	bent@hotmail.com	$541.00

Shadcn Sheet