239 lines
12 KiB
TypeScript
239 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo } from 'react';
|
|
import { EmptyState } from './empty-state';
|
|
import { TableSkeleton } from './skeleton';
|
|
|
|
interface Column<T> {
|
|
key: string;
|
|
label: string;
|
|
sortable?: boolean;
|
|
align?: 'left' | 'right' | 'center';
|
|
render: (item: T) => React.ReactNode;
|
|
}
|
|
|
|
interface FilterOption {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
interface QuickFilter {
|
|
key: string;
|
|
label: string;
|
|
options: FilterOption[];
|
|
}
|
|
|
|
interface DataTableProps<T> {
|
|
columns: Column<T>[];
|
|
data: T[];
|
|
loading?: boolean;
|
|
emptyTitle?: string;
|
|
emptyDescription?: string;
|
|
keyExtractor: (item: T) => string;
|
|
searchPlaceholder?: string;
|
|
searchValue?: string;
|
|
onSearchChange?: (value: string) => void;
|
|
quickFilters?: QuickFilter[];
|
|
activeFilters?: Record<string, string>;
|
|
onFilterChange?: (key: string, value: string) => void;
|
|
pageSize?: number;
|
|
onRowClick?: (item: T) => void;
|
|
maxHeight?: string;
|
|
headerActions?: React.ReactNode;
|
|
}
|
|
|
|
const PAGE_SIZES = [10, 20, 50, 100];
|
|
|
|
export function DataTable<T>({
|
|
columns,
|
|
data,
|
|
loading,
|
|
emptyTitle = 'No data',
|
|
emptyDescription,
|
|
keyExtractor,
|
|
searchPlaceholder,
|
|
searchValue,
|
|
onSearchChange,
|
|
quickFilters,
|
|
activeFilters,
|
|
onFilterChange,
|
|
pageSize: initialPageSize = 20,
|
|
onRowClick,
|
|
maxHeight,
|
|
headerActions,
|
|
}: DataTableProps<T>) {
|
|
const [sortKey, setSortKey] = useState<string | null>(null);
|
|
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
|
|
const [page, setPage] = useState(1);
|
|
const [perPage, setPerPage] = useState(initialPageSize);
|
|
|
|
function handleSort(key: string) {
|
|
if (sortKey === key) setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
|
|
else { setSortKey(key); setSortDir('asc'); }
|
|
setPage(1);
|
|
}
|
|
|
|
const sortedData = useMemo(() => {
|
|
if (!sortKey) return data;
|
|
return [...data].sort((a, b) => {
|
|
const aVal = (a as any)[sortKey];
|
|
const bVal = (b as any)[sortKey];
|
|
if (aVal == null) return 1;
|
|
if (bVal == null) return -1;
|
|
const cmp = typeof aVal === 'string' ? aVal.localeCompare(bVal) : aVal - bVal;
|
|
return sortDir === 'asc' ? cmp : -cmp;
|
|
});
|
|
}, [data, sortKey, sortDir]);
|
|
|
|
const totalPages = Math.ceil(sortedData.length / perPage);
|
|
const paginatedData = sortedData.slice((page - 1) * perPage, page * perPage);
|
|
const startItem = sortedData.length === 0 ? 0 : (page - 1) * perPage + 1;
|
|
const endItem = Math.min(page * perPage, sortedData.length);
|
|
|
|
// Reset page when data changes
|
|
if (page > totalPages && totalPages > 0) setPage(totalPages);
|
|
|
|
function getPageNumbers(): (number | '...')[] {
|
|
if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
const pages: (number | '...')[] = [1];
|
|
if (page > 3) pages.push('...');
|
|
for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) pages.push(i);
|
|
if (page < totalPages - 2) pages.push('...');
|
|
if (totalPages > 1) pages.push(totalPages);
|
|
return pages;
|
|
}
|
|
|
|
if (loading) return <TableSkeleton rows={6} cols={columns.length} />;
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
{/* Search + Quick Filters + Header Actions row */}
|
|
<div className="flex flex-wrap items-center justify-between gap-3 mb-4">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{onSearchChange && (
|
|
<div className="relative flex-shrink-0">
|
|
<svg className="absolute left-3 top-1/2 -translate-y-1/2 text-surface-400" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
|
|
<circle cx="7" cy="7" r="5" /><path d="M11 11l3.5 3.5" />
|
|
</svg>
|
|
<input type="text" value={searchValue} onChange={(e) => { onSearchChange(e.target.value); setPage(1); }}
|
|
placeholder={searchPlaceholder || 'Search...'} aria-label={searchPlaceholder || 'Search'}
|
|
className="w-64 pl-9 pr-3 py-2 rounded-lg border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 text-sm text-surface-900 dark:text-surface-200 placeholder:text-surface-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 transition-all duration-200" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick filter chips */}
|
|
{quickFilters && onFilterChange && quickFilters.map((filter) => (
|
|
<div key={filter.key} className="flex items-center gap-1">
|
|
<span className="text-xs text-surface-400 dark:text-surface-500 mr-1">{filter.label}:</span>
|
|
<button onClick={() => onFilterChange(filter.key, '')}
|
|
className={`px-2.5 py-1 text-xs rounded-full font-medium transition-all duration-150 cursor-pointer ${
|
|
!activeFilters?.[filter.key] ? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-400' : 'bg-surface-100 dark:bg-surface-700 text-surface-500 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-600'
|
|
}`}>All</button>
|
|
{filter.options.map((opt) => (
|
|
<button key={opt.value} onClick={() => onFilterChange(filter.key, opt.value)}
|
|
className={`px-2.5 py-1 text-xs rounded-full font-medium transition-all duration-150 cursor-pointer ${
|
|
activeFilters?.[filter.key] === opt.value ? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-400' : 'bg-surface-100 dark:bg-surface-700 text-surface-500 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-600'
|
|
}`}>{opt.label}</button>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{headerActions && <div className="flex-shrink-0">{headerActions}</div>}
|
|
</div>
|
|
|
|
{sortedData.length === 0 ? (
|
|
<div className="bg-white dark:bg-surface-800 rounded-xl border border-surface-200/80 dark:border-surface-700">
|
|
<EmptyState title={emptyTitle} description={emptyDescription}
|
|
icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><rect x="3" y="3" width="18" height="18" rx="3" /><path d="M9 9h6M9 13h4" /></svg>} />
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="bg-white dark:bg-surface-800 rounded-xl border border-surface-200/80 dark:border-surface-700 flex flex-col">
|
|
{/* Scrollable table body with sticky header */}
|
|
<div className="overflow-x-auto" style={{ maxHeight: maxHeight ?? 'calc(100vh - 300px)' }}>
|
|
<table className="min-w-full divide-y divide-surface-200 dark:divide-surface-700" role="grid">
|
|
<thead className="bg-surface-50/50 dark:bg-surface-800/80 sticky top-0 z-10">
|
|
<tr>
|
|
{columns.map((col) => (
|
|
<th key={col.key}
|
|
className={`px-5 py-3 text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider bg-surface-50/80 dark:bg-surface-800/90 backdrop-blur-sm ${
|
|
col.align === 'right' ? 'text-right' : 'text-left'
|
|
} ${col.sortable ? 'cursor-pointer select-none hover:text-surface-700 dark:hover:text-surface-300 transition-colors' : ''}`}
|
|
onClick={col.sortable ? () => handleSort(col.key) : undefined}
|
|
aria-sort={sortKey === col.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined}>
|
|
<span className="flex items-center gap-1">
|
|
{col.label}
|
|
{col.sortable && sortKey === col.key && (
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
|
{sortDir === 'asc' ? <path d="M6 3l4 6H2z" /> : <path d="M6 9l4-6H2z" />}
|
|
</svg>
|
|
)}
|
|
</span>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-surface-100 dark:divide-surface-700">
|
|
{paginatedData.map((item) => (
|
|
<tr key={keyExtractor(item)}
|
|
className={`group transition-colors duration-100 ${
|
|
onRowClick
|
|
? 'cursor-pointer hover:bg-primary-50/40 dark:hover:bg-primary-900/20 border-l-2 border-l-transparent hover:border-l-primary-400'
|
|
: 'hover:bg-surface-50/50 dark:hover:bg-surface-700/50'
|
|
}`}
|
|
onClick={onRowClick ? () => onRowClick(item) : undefined}
|
|
>
|
|
{columns.map((col) => (
|
|
<td key={col.key} className={`px-5 py-3.5 text-sm text-surface-700 dark:text-surface-300 ${col.align === 'right' ? 'text-right' : 'text-left'}`}>
|
|
{col.render(item)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pagination controls — always visible */}
|
|
<div className="mt-3 flex items-center justify-between flex-shrink-0">
|
|
<div className="flex items-center gap-2 text-sm text-surface-500 dark:text-surface-400">
|
|
<span>Showing {startItem}-{endItem} of {sortedData.length}</span>
|
|
<select value={perPage} onChange={(e) => { setPerPage(Number(e.target.value)); setPage(1); }}
|
|
aria-label="Items per page"
|
|
className="ml-2 rounded-md border border-surface-200 dark:border-surface-700 px-2 py-1 text-xs bg-white dark:bg-surface-800 text-surface-700 dark:text-surface-300 cursor-pointer focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500/20">
|
|
{PAGE_SIZES.map((s) => <option key={s} value={s}>{s}/page</option>)}
|
|
</select>
|
|
</div>
|
|
|
|
{totalPages > 1 && (
|
|
<nav className="flex items-center gap-1" aria-label="Pagination">
|
|
<button onClick={() => setPage(Math.max(1, page - 1))} disabled={page === 1}
|
|
className="p-1.5 rounded-md text-surface-400 hover:text-surface-700 dark:hover:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-700 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
|
|
aria-label="Previous page">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M10 4l-4 4 4 4" /></svg>
|
|
</button>
|
|
{getPageNumbers().map((p, i) =>
|
|
p === '...' ? (
|
|
<span key={`dots-${i}`} className="px-1 text-surface-300 dark:text-surface-500">...</span>
|
|
) : (
|
|
<button key={p} onClick={() => setPage(p as number)}
|
|
className={`min-w-[32px] h-8 rounded-md text-sm font-medium transition-colors cursor-pointer ${
|
|
page === p ? 'bg-primary-600 text-white' : 'text-surface-600 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-700'
|
|
}`}>{p}</button>
|
|
),
|
|
)}
|
|
<button onClick={() => setPage(Math.min(totalPages, page + 1))} disabled={page === totalPages}
|
|
className="p-1.5 rounded-md text-surface-400 hover:text-surface-700 dark:hover:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-700 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
|
|
aria-label="Next page">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M6 4l4 4-4 4" /></svg>
|
|
</button>
|
|
</nav>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|