'use client' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { cn } from '@/lib/utils' import { demoTableColumns, demoTableRows } from './demo/list' import { ArrowDownAZ, ArrowUpAZ, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Copy, Download, Maximize2, Minus, RefreshCw, Search, Share2, Trash2, Type } from 'lucide-react' import { useCallback, useMemo, useState } from 'react' // Filter types interface FilterCondition { id: string field: string operator: | 'contains' | 'equals' | 'startsWith' | 'endsWith' | 'isEmpty' | 'isNotEmpty' value: string } /** * Configuration for a table column. * @interface TableColumn * @template T - The row data type * @property {string} header - Column header text * @property {keyof T | string} accessor - Key to access row data or dot-notation path * @property {boolean} [sortable] - Whether the column is sortable * @property {string} [width] - CSS width value for the column * @property {"left" | "center" | "right"} [align] - Text alignment * @property {function} [render] - Custom render function for cell content */ export interface TableColumn> { header?: string accessor?: keyof T | string sortable?: boolean width?: string align?: 'left' | 'center' | 'right' render?: (value: unknown, row: T, index: number) => React.ReactNode } /** * ═══════════════════════════════════════════════════════════════════════════ * TableProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for configuring a data table component with sorting, selection, * pagination, and filtering capabilities. * * @template T - The row data type */ export interface TableProps> { data?: { /** Column definitions specifying headers, accessors, and rendering. */ columns?: TableColumn[] /** Array of row data objects to display. */ rows?: T[] /** Table title displayed in the header. */ title?: string /** Icon or image URL displayed next to the title. */ titleImage?: string /** Timestamp showing when the data was last updated. */ lastUpdated?: Date | string /** Total row count for displaying "+N more" indicator. */ totalRows?: number } actions?: { /** Called when the copy action is triggered with selected rows. */ onCopy?: (selectedRows: T[]) => void /** Called when the download action is triggered with selected rows. */ onDownload?: (selectedRows: T[]) => void /** Called when the share action is triggered with selected rows. */ onShare?: (selectedRows: T[]) => void /** Called when the refresh button is clicked. */ onRefresh?: () => void } appearance?: { /** * Row selection mode. * @default "none" */ selectable?: 'none' | 'single' | 'multi' /** * Message displayed when the table has no data. * @default "No data available" */ emptyMessage?: string /** * Whether to keep the header fixed when scrolling. * @default false */ stickyHeader?: boolean /** * Whether to use compact row height. * @default false */ compact?: boolean /** Whether to show action buttons in the header. */ showActions?: boolean /** * Whether to show the table header. * @default true */ showHeader?: boolean /** * Whether to show the table footer. * @default true */ showFooter?: boolean /** * Maximum number of rows to display in inline mode. * @default 5 */ maxRows?: number /** * Display mode: 'inline' (compact card) or 'fullscreen' (paginated with filters). * @default "inline" */ displayMode?: 'inline' | 'pip' | 'fullscreen' } control?: { /** Whether to show loading skeleton state. */ loading?: boolean /** Controlled array of selected rows. */ selectedRows?: T[] } } function SkeletonRow({ columns, compact }: { columns: number compact?: boolean }) { return ( {Array.from({ length: columns }).map((_, i) => (

))} ) } // TableHeader component (inline mode) function TableHeader({ title, titleImage, onExpand, selectable, hasSelection, onCopy, onDownload, onShare }: { title?: string titleImage?: string onExpand?: () => void selectable?: 'none' | 'single' | 'multi' hasSelection?: boolean onCopy?: () => void onDownload?: () => void onShare?: () => void }) { if (!title && !onExpand) return null return (

{titleImage && ( {title

)} {title && {title}}

{/* Action buttons - icons only, disabled when no selection */} {selectable === 'single' && onCopy && ( )} {selectable === 'multi' && ( <> {onDownload && ( )} {onShare && ( )} )} {onExpand && ( )}

) } // TableFooter component function TableFooter({ moreCount, lastUpdated, onRefresh }: { moreCount?: number lastUpdated?: Date | string onRefresh?: () => void }) { const formatTimestamp = (date: Date | string) => { const d = typeof date === 'string' ? new Date(date) : date return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' }) } const hasLeftContent = (moreCount && moreCount > 0) || lastUpdated return (

{moreCount && moreCount > 0 && +{moreCount} more} {moreCount && moreCount > 0 && lastUpdated && ( · )} {lastUpdated && Data as of {formatTimestamp(lastUpdated)}} {!hasLeftContent && }

) } /** * A data table component with optional single or multi-select modes for chat interfaces. * Supports both inline (compact) and fullscreen (paginated) display modes. * * Features: * - Column sorting (ascending/descending) * - Row selection (none, single, multi) * - Inline and fullscreen display modes * - Pagination in fullscreen mode * - Column filtering in fullscreen mode * - Custom cell rendering * - Loading skeleton state * - Copy, download, share actions * - Sticky header option * - Mobile card layout * - MCP Apps display mode support * * @component * @template T - The row data type * @example * ```tsx * console.log("Selected:", rows), * onRefresh: () => console.log("Refresh") * }} * appearance={{ * selectable: "multi", * maxRows: 10, * showHeader: true, * showFooter: true * }} * /> * ``` */ export function Table>({ data: dataProps, actions, appearance, control }: TableProps) { const resolvedData: NonNullable['data']> = dataProps ?? { columns: demoTableColumns as unknown as TableColumn[], rows: demoTableRows as unknown as T[] } const { columns = [] as unknown as TableColumn[], rows: tableData = [] as unknown as T[], title, titleImage, lastUpdated, totalRows } = resolvedData const { onCopy, onDownload, onShare, onRefresh } = actions ?? {} const { selectable = 'none', emptyMessage = 'No data available', stickyHeader = false, compact = false, showHeader = true, showFooter = true, maxRows = 5, displayMode: propDisplayMode } = appearance ?? {} const { loading = false, selectedRows: controlledSelectedRows } = control ?? {} const displayMode = propDisplayMode ?? 'inline' const [currentPage, setCurrentPage] = useState(1) const [sortConfig, setSortConfig] = useState<{ key: string direction: 'asc' | 'desc' } | null>(null) const [internalSelectedRows, setInternalSelectedRows] = useState>( new Set() ) // Filter state (fullscreen only) const [filters, setFilters] = useState([]) const [filterOpen, setFilterOpen] = useState(false) const [sortOpen, setSortOpen] = useState(false) const [sortSearch, setSortSearch] = useState('') const rowsPerPage = 15 const isFullscreen = displayMode === 'fullscreen' // Memoize controlled selection to avoid recreating Set on every render const controlledSelectedSet = useMemo(() => { if (!controlledSelectedRows) return null return new Set(controlledSelectedRows.map((row) => tableData.indexOf(row))) }, [controlledSelectedRows, tableData]) const selectedRowsSet = controlledSelectedSet ?? internalSelectedRows // Apply filters to data (fullscreen only) const filteredData = useMemo(() => { if (!isFullscreen || filters.length === 0) return tableData return tableData.filter((row) => { return filters.every((filter) => { const value = String(row[filter.field as keyof T] ?? '').toLowerCase() const filterValue = filter.value.toLowerCase() switch (filter.operator) { case 'contains': return value.includes(filterValue) case 'equals': return value === filterValue case 'startsWith': return value.startsWith(filterValue) case 'endsWith': return value.endsWith(filterValue) case 'isEmpty': return value === '' case 'isNotEmpty': return value !== '' default: return true } }) }) }, [tableData, filters, isFullscreen]) const handleSort = useCallback((accessor: string) => { setSortConfig((current) => { if (current?.key === accessor) { if (current.direction === 'asc') { return { key: accessor, direction: 'desc' } } return null } return { key: accessor, direction: 'asc' } }) setSortOpen(false) }, []) const sortedData = useMemo(() => { const dataToSort = isFullscreen ? filteredData : tableData if (!sortConfig) return dataToSort return [...dataToSort].sort((a, b) => { const aValue = a[sortConfig.key as keyof T] const bValue = b[sortConfig.key as keyof T] if (aValue === bValue) return 0 let comparison = 0 if (typeof aValue === 'number' && typeof bValue === 'number') { comparison = aValue - bValue } else { comparison = String(aValue).localeCompare(String(bValue)) } return sortConfig.direction === 'asc' ? comparison : -comparison }) }, [tableData, filteredData, sortConfig, isFullscreen]) // Pagination (fullscreen) or limit rows (inline) const visibleData = isFullscreen ? sortedData.slice( (currentPage - 1) * rowsPerPage, currentPage * rowsPerPage ) : sortedData.slice(0, maxRows) const totalPages = Math.ceil(sortedData.length / rowsPerPage) const moreCount = totalRows ? totalRows - maxRows : sortedData.length > maxRows ? sortedData.length - maxRows : 0 // Filter helpers const addFilter = () => { const firstColumn = columns[0]?.accessor as string setFilters([ ...filters, { id: crypto.randomUUID(), field: firstColumn || '', operator: 'contains', value: '' } ]) } const updateFilter = (id: string, updates: Partial) => { setFilters(filters.map((f) => (f.id === id ? { ...f, ...updates } : f))) } const removeFilter = (id: string) => { setFilters(filters.filter((f) => f.id !== id)) } const filteredColumns = columns.filter((col) => (col.header ?? '').toLowerCase().includes(sortSearch.toLowerCase()) ) const handleRowSelect = useCallback( (index: number) => { if (selectable === 'none') return // In fullscreen mode, calculate global index const globalIndex = isFullscreen ? (currentPage - 1) * rowsPerPage + index : index const newSelected = new Set(selectedRowsSet) if (selectable === 'single') { if (newSelected.has(globalIndex)) { newSelected.clear() } else { newSelected.clear() newSelected.add(globalIndex) } } else { if (newSelected.has(globalIndex)) { newSelected.delete(globalIndex) } else { newSelected.add(globalIndex) } } setInternalSelectedRows(newSelected) }, [ selectable, selectedRowsSet, isFullscreen, currentPage, rowsPerPage ] ) const handleSelectAll = useCallback(() => { if (selectable !== 'multi') return const allSelected = selectedRowsSet.size === visibleData.length const newSelected = allSelected ? new Set() : new Set(visibleData.map((_, i) => i)) setInternalSelectedRows(newSelected) }, [selectable, selectedRowsSet.size, visibleData]) const getValue = (row: T, accessor: string): unknown => { const keys = accessor.split('.') let value: unknown = row for (const key of keys) { value = (value as Record)?.[key] } return value } const formatNumber = (value: unknown): string => { if (typeof value === 'number') { return new Intl.NumberFormat('en-US').format(value) } return String(value ?? '') } const getSortIcon = (accessor: string) => { if (sortConfig?.key !== accessor) { return } return sortConfig?.direction === 'asc' ? ( ) : ( ) } const handleExpand = () => { // Display mode changes are handled by the host wrapper (HostAPIProvider) } const hasSelection = selectedRowsSet.size > 0 const getSelectedRows = () => sortedData.filter((_, i) => selectedRowsSet.has(i)) // FULLSCREEN MODE - fills 100% of available space (host controls the container) if (isFullscreen) { return (

{/* Fullscreen Header */}

{titleImage && ( {title

)} {title && {title}}

{/* Action buttons and Filter/Sort */}

{selectable === 'single' && onCopy && ( )} {selectable === 'multi' && ( <> {onDownload && ( )} {onShare && ( )} )} {/* Filter Button */}

{filters.length === 0 ? (

No filter conditions are applied

) : (

{filters.map((filter, index) => (

{index === 0 ? 'Where' : 'And'} {filter.operator !== 'isEmpty' && filter.operator !== 'isNotEmpty' && ( updateFilter(filter.id, { value: e.target.value }) } className="w-32" /> )}

))}

)}

{/* Sort Button */}

Sort by

setSortSearch(e.target.value)} className="pl-8" />

{filteredColumns.map((col) => ( ))}

{/* Table Content */}

{selectable !== 'none' && ( ))} {visibleData.map((row, rowIndex) => { const globalIndex = (currentPage - 1) * rowsPerPage + rowIndex return ( handleRowSelect(rowIndex)} className={cn( 'border-b border-border last:border-0 transition-colors', selectable !== 'none' && 'cursor-pointer hover:bg-muted/30' )} > {selectable !== 'none' && ( )} {columns.map((column, colIndex) => { const value = getValue(row, (column.accessor ?? '') as string) const displayValue = column.render ? column.render(value, row, rowIndex) : formatNumber(value) return ( ) })} ) })}

)} {columns.map((column, index) => (	column.sortable && handleSort((column.accessor ?? '') as string) } > {column.header ?? ''} {column.sortable && getSortIcon((column.accessor ?? '') as string)}
{selectedRowsSet.has(globalIndex) && ( )}	{displayValue}

{/* Pagination */} {totalPages > 1 && (

Showing {(currentPage - 1) * rowsPerPage + 1}- {Math.min(currentPage * rowsPerPage, sortedData.length)} of{' '} {sortedData.length} rows

Page {currentPage} of {totalPages}

)} {/* Footer */}

{sortedData.length} records found {lastUpdated && ( <> · Data as of{' '} {(typeof lastUpdated === 'string' ? new Date(lastUpdated) : lastUpdated ).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' })} )}

) } // INLINE MODE - compact card with limited rows return (

{/* Table Header */} {showHeader && ( 0} onCopy={ onCopy ? () => onCopy(visibleData.filter((_, i) => selectedRowsSet.has(i))) : undefined } onDownload={ onDownload ? () => onDownload( visibleData.filter((_, i) => selectedRowsSet.has(i)) ) : undefined } onShare={ onShare ? () => onShare(visibleData.filter((_, i) => selectedRowsSet.has(i))) : undefined } /> )} {/* Mobile: Card view */}

{loading ? ( Array.from({ length: 3 }).map((_, i) => (

{columns.slice(0, 4).map((_, j) => (

))}

)) ) : visibleData.length === 0 ? (

{emptyMessage}

) : ( visibleData.map((row, rowIndex) => ( )) )}

{/* Desktop: Table view */}

{selectable === 'multi' && ( )} {selectable === 'single' && ( ))} {loading ? ( Array.from({ length: maxRows }).map((_, i) => ( )) ) : visibleData.length === 0 ? ( ) : ( visibleData.map((row, rowIndex) => ( handleRowSelect(rowIndex)} className={cn( 'border-b border-border last:border-0 transition-colors', selectable !== 'none' && 'cursor-pointer hover:bg-muted/30' )} role="row" aria-selected={selectedRowsSet.has(rowIndex)} > {selectable !== 'none' && ( )} {columns.map((column, colIndex) => { const value = getValue(row, (column.accessor ?? '') as string) const displayValue = column.render ? column.render(value, row, rowIndex) : formatNumber(value) return ( ) })} )) )}

	)} {columns.map((column, index) => (	column.sortable && handleSort((column.accessor ?? '') as string) } role={ column.sortable ? 'columnheader button' : 'columnheader' } aria-sort={ sortConfig?.key === column.accessor ? sortConfig?.direction === 'asc' ? 'ascending' : 'descending' : undefined } > {column.header ?? ''} {column.sortable && getSortIcon((column.accessor ?? '') as string)}
{emptyMessage}
{selectedRowsSet.has(rowIndex) && ( )}	{displayValue}

{/* Table Footer */} {showFooter && ( )}

) }