Kalana B. Thilakarathna
816 lines
28 KiB
TypeScript
816 lines
28 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { HugeiconsIcon } from '@hugeicons/react';
|
|
import {
|
|
ArrowDataTransferVerticalIcon,
|
|
ArrowUp01Icon,
|
|
ArrowDown01Icon,
|
|
ChevronRightIcon,
|
|
} from '@hugeicons/core-free-icons';
|
|
|
|
import {
|
|
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
|
} from '@/components/ui/table';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { cn } from '@/lib/utils';
|
|
import { RowActionButton, RowActions } from '@/components/shared/row-actions';
|
|
|
|
import { TableToolbar } from './table-toolbar';
|
|
import { TablePagination } from './table-pagination';
|
|
import { filterData } from './hooks/use-table-filter';
|
|
import { sortData } from './hooks/use-table-sort';
|
|
import { exportTable } from './hooks/use-table-export';
|
|
import { getNestedValue, resolveUrlTemplate } from './utils/nested-value';
|
|
import type {
|
|
TableConfig, ColumnDef, FieldConfig, SortState, FilterState, PageState,
|
|
ServerSideParams, ExportFormat, RowActionItem,
|
|
} from './types';
|
|
|
|
interface DataTableProps<T extends object> {
|
|
config: TableConfig<T>;
|
|
data: T[];
|
|
loading?: boolean;
|
|
totalCount?: number;
|
|
onSortChange?: (s: SortState) => void;
|
|
onFilterChange?: (f: FilterState) => void;
|
|
onPageChange?: (p: PageState) => void;
|
|
onSelectionChange?: (rows: T[]) => void;
|
|
onRowClick?: (row: T) => void;
|
|
onRowExpand?: (row: T) => void;
|
|
onServerSideChange?: (p: ServerSideParams) => void;
|
|
}
|
|
|
|
function normalizeField(f: FieldConfig | string): FieldConfig {
|
|
return typeof f === 'string' ? { key: f } : f;
|
|
}
|
|
|
|
function formatTextValue(raw: unknown): string {
|
|
if (raw == null) return '';
|
|
if (typeof raw === 'string') return raw;
|
|
if (typeof raw === 'number' || typeof raw === 'bigint') return String(raw);
|
|
if (typeof raw === 'boolean') return raw ? 'Yes' : 'No';
|
|
|
|
if (Array.isArray(raw)) {
|
|
if (raw.length === 0) return '';
|
|
if (raw.every(item => item == null || ['string', 'number', 'bigint', 'boolean'].includes(typeof item))) {
|
|
return raw.map(item => formatTextValue(item)).filter(Boolean).join(', ');
|
|
}
|
|
return `${raw.length} item${raw.length === 1 ? '' : 's'}`;
|
|
}
|
|
|
|
if (typeof raw === 'object') {
|
|
const record = raw as Record<string, unknown>;
|
|
const namedValue = record.name ?? record.title ?? record.label ?? record.id;
|
|
return namedValue == null ? '' : formatTextValue(namedValue);
|
|
}
|
|
|
|
return String(raw);
|
|
}
|
|
|
|
function SortIcon({ colKey, sortState }: { colKey: string; sortState: SortState }) {
|
|
if (sortState.column !== colKey) {
|
|
return (
|
|
<HugeiconsIcon
|
|
icon={ArrowDataTransferVerticalIcon}
|
|
className="size-3 text-muted-foreground"
|
|
/>
|
|
);
|
|
}
|
|
return sortState.direction === 'asc'
|
|
? <HugeiconsIcon icon={ArrowUp01Icon} className="size-3" />
|
|
: <HugeiconsIcon icon={ArrowDown01Icon} className="size-3" />;
|
|
}
|
|
|
|
function DataTableRowActions<T extends object>({
|
|
row,
|
|
actions,
|
|
}: {
|
|
row: T;
|
|
actions: RowActionItem<T>[];
|
|
}) {
|
|
const visibleActions = actions.filter(action => action.visible ? action.visible(row) : true);
|
|
|
|
if (visibleActions.length === 0) return null;
|
|
|
|
return (
|
|
<RowActions>
|
|
{visibleActions.map((action) => (
|
|
<RowActionButton
|
|
key={`${action.action}-${action.label}`}
|
|
action={action.action}
|
|
label={action.label}
|
|
tone={action.tone}
|
|
disabled={action.disabled?.(row)}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
action.onClick(row);
|
|
}}
|
|
/>
|
|
))}
|
|
</RowActions>
|
|
);
|
|
}
|
|
|
|
function MobileCard<T extends object>({
|
|
row,
|
|
columns,
|
|
mobileCardCfg,
|
|
onClick,
|
|
}: {
|
|
row: T;
|
|
columns: ColumnDef<T>[];
|
|
mobileCardCfg?: TableConfig<T>['mobileCard'];
|
|
onClick?: (row: T) => void;
|
|
}) {
|
|
const actionCol = columns.find(c => c.key === '__row_actions' || (!c.title && c.cellRender));
|
|
const dataColumns = columns.filter(c => !!c.title);
|
|
|
|
const primaryCol = dataColumns[0];
|
|
// Always 2 columns, max 4 fields (2 rows) to prevent cramping
|
|
const previewCols = (mobileCardCfg?.previewColumns
|
|
? dataColumns.filter(c => mobileCardCfg.previewColumns!.includes(c.key))
|
|
: dataColumns.slice(1, 3)
|
|
).slice(0, 4);
|
|
|
|
const href = mobileCardCfg?.detailHref?.(row);
|
|
const isNavigable = !!href || !!onClick;
|
|
|
|
const inner = (
|
|
<div
|
|
className={cn(
|
|
'rounded-2xl border bg-card overflow-hidden transition-colors duration-150',
|
|
isNavigable && 'active:bg-muted/50',
|
|
)}
|
|
>
|
|
{/* Header: primary field + chevron */}
|
|
<div className="px-4 pt-4 pb-3 flex items-start gap-3">
|
|
<div className="flex-1 min-w-0 overflow-hidden">
|
|
{primaryCol && <CellContent row={row} col={primaryCol} />}
|
|
</div>
|
|
{isNavigable && (
|
|
<HugeiconsIcon
|
|
icon={ChevronRightIcon}
|
|
className="size-4 text-muted-foreground/40 shrink-0 mt-0.5"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Preview fields — fixed 2-column grid */}
|
|
{previewCols.length > 0 && (
|
|
<div className="grid grid-cols-2 gap-x-3 gap-y-4 px-4 pb-4">
|
|
{previewCols.map(col => (
|
|
<div key={col.key} className="min-w-0 overflow-hidden">
|
|
<p className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/50 mb-1.5 truncate">
|
|
{col.title}
|
|
</p>
|
|
<div className="overflow-hidden">
|
|
<CellContent row={row} col={col} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions — only when not navigating away */}
|
|
{!href && actionCol && (
|
|
<div
|
|
className="border-t px-4 py-2.5 flex justify-end"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
{actionCol.cellRender!(row, actionCol)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
if (href) {
|
|
return <Link href={href} className="block">{inner}</Link>;
|
|
}
|
|
|
|
return (
|
|
<div className={isNavigable ? 'cursor-pointer' : ''} onClick={() => onClick?.(row)}>
|
|
{inner}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CellContent<T extends object>({
|
|
row, col,
|
|
}: { row: T; col: ColumnDef<T> }) {
|
|
if (col.cellRender) return <>{col.cellRender(row, col)}</>;
|
|
|
|
const fields = col.fields.map(normalizeField);
|
|
const layout = col.layout ?? 'vertical';
|
|
|
|
if (fields.length === 1 && (fields[0].renderer ?? 'text') === 'text') {
|
|
const field = fields[0];
|
|
const raw = getNestedValue(row, field.key);
|
|
const text = field.transform
|
|
? field.transform(raw, row)
|
|
: `${field.prefix ?? ''}${formatTextValue(raw)}${field.suffix ?? ''}`;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'max-w-full',
|
|
field.truncate ? 'truncate' : 'whitespace-normal break-words',
|
|
field.primary ? 'font-medium text-foreground' : 'text-muted-foreground text-xs',
|
|
'text-sm',
|
|
field.class,
|
|
)}
|
|
style={{ color: field.primary ? 'var(--foreground)' : 'var(--muted-foreground)' }}
|
|
>
|
|
{text || '—'}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const rendered = fields.map((field, i) => {
|
|
const raw = getNestedValue(row, field.key);
|
|
const text = field.transform
|
|
? field.transform(raw, row)
|
|
: `${field.prefix ?? ''}${formatTextValue(raw)}${field.suffix ?? ''}`;
|
|
|
|
const renderer = field.renderer ?? 'text';
|
|
|
|
if (renderer === 'badge') {
|
|
const colorClass = field.badgeConfig?.colorMap?.[String(raw)] ?? field.badgeConfig?.defaultColor ?? '';
|
|
return (
|
|
<Badge key={field.key} className={cn('capitalize', colorClass)}>
|
|
{text}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
if (renderer === 'link') {
|
|
const href = field.linkConfig?.urlKey
|
|
? String(getNestedValue(row, field.linkConfig.urlKey) ?? '#')
|
|
: field.linkConfig?.urlTemplate
|
|
? resolveUrlTemplate(field.linkConfig.urlTemplate, row)
|
|
: '#';
|
|
return (
|
|
<a
|
|
key={field.key}
|
|
href={href}
|
|
target={field.linkConfig?.target ?? '_self'}
|
|
className="text-primary underline-offset-2 hover:underline"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
{text}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={field.key}
|
|
className={cn(
|
|
'max-w-full',
|
|
field.truncate ? 'truncate' : 'whitespace-normal break-words',
|
|
field.primary ? 'font-medium text-foreground' : 'text-muted-foreground text-xs',
|
|
field.class,
|
|
i === 0 && 'text-sm',
|
|
)}
|
|
style={{ color: field.primary || i === 0 ? 'var(--foreground)' : 'var(--muted-foreground)' }}
|
|
>
|
|
{text}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
const crossAlign =
|
|
col.align === 'right' ? 'items-end' : col.align === 'center' ? 'items-center' : '';
|
|
|
|
if (layout === 'horizontal') {
|
|
return (
|
|
<div className={cn(
|
|
'flex items-center gap-1.5 flex-wrap',
|
|
col.align === 'right' ? 'justify-end' : col.align === 'center' ? 'justify-center' : '',
|
|
)}>
|
|
{rendered}
|
|
</div>
|
|
);
|
|
}
|
|
return <div className={cn('flex flex-col gap-0.5', crossAlign)}>{rendered}</div>;
|
|
}
|
|
|
|
export function DataTable<T extends object>({
|
|
config,
|
|
data,
|
|
loading,
|
|
totalCount,
|
|
onSortChange,
|
|
onFilterChange,
|
|
onPageChange,
|
|
onSelectionChange,
|
|
onRowClick,
|
|
onServerSideChange,
|
|
}: DataTableProps<T>) {
|
|
const safeData = useMemo(() => (Array.isArray(data) ? data : []), [data]);
|
|
const [sortState, setSortState] = useState<SortState>({ column: null, direction: null });
|
|
const [filterState, setFilterState] = useState<FilterState>({ global: '', columns: {} });
|
|
const [pageState, setPageState] = useState<PageState>({
|
|
page: 1,
|
|
pageSize: config.pagination?.pageSize ?? 10,
|
|
});
|
|
const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
|
|
const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
|
|
const [hiddenColumns, setHiddenColumns] = useState<Set<string>>(
|
|
() => new Set(config.columns.filter(c => c.visible === false).map(c => c.key))
|
|
);
|
|
const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
|
|
const [columnOrder, setColumnOrder] = useState<string[]>(() => config.columns.map(c => c.key));
|
|
const [draggedKey, setDraggedKey] = useState<string | null>(null);
|
|
const [dropTargetKey, setDropTargetKey] = useState<string | null>(null);
|
|
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
|
const [scrollTop, setScrollTop] = useState(0);
|
|
const [containerH, setContainerH] = useState(500);
|
|
|
|
function rowKey(row: T): string {
|
|
if (!config.rowKey) return JSON.stringify(row);
|
|
if (typeof config.rowKey === 'function') return String(config.rowKey(row));
|
|
return String(row[config.rowKey as keyof T]);
|
|
}
|
|
|
|
const normalizedColumns = useMemo(() => {
|
|
const baseColumns = config.columns.map(col => ({
|
|
...col,
|
|
fields: col.fields.map(normalizeField) as FieldConfig[],
|
|
}));
|
|
|
|
if (!config.rowActions) {
|
|
return baseColumns;
|
|
}
|
|
|
|
const actionsColumn: ColumnDef<T> = {
|
|
key: '__row_actions',
|
|
title: config.rowActions.title ?? 'Action',
|
|
fields: [],
|
|
width: config.rowActions.width ?? 96,
|
|
minWidth: config.rowActions.minWidth ?? 96,
|
|
resizable: false,
|
|
hideable: false,
|
|
align: config.rowActions.align ?? 'right',
|
|
exportable: false,
|
|
cellRender: (row: T) => (
|
|
<DataTableRowActions row={row} actions={config.rowActions!.actions(row)} />
|
|
),
|
|
};
|
|
|
|
return [
|
|
...baseColumns,
|
|
actionsColumn,
|
|
];
|
|
}, [config.columns, config.rowActions]);
|
|
|
|
useEffect(() => {
|
|
setColumnOrder((prev) => {
|
|
const nextKeys = normalizedColumns.map((col) => col.key);
|
|
const kept = prev.filter((key) => nextKeys.includes(key));
|
|
const missing = nextKeys.filter((key) => !kept.includes(key));
|
|
const next = [...kept, ...missing];
|
|
|
|
if (next.length === prev.length && next.every((key, index) => key === prev[index])) {
|
|
return prev;
|
|
}
|
|
|
|
return next;
|
|
});
|
|
}, [normalizedColumns]);
|
|
|
|
const orderedColumns = useMemo(() =>
|
|
columnOrder
|
|
.map(key => normalizedColumns.find(c => c.key === key))
|
|
.filter(Boolean) as typeof normalizedColumns,
|
|
[normalizedColumns, columnOrder]
|
|
);
|
|
|
|
const visibleColumns = useMemo(() =>
|
|
orderedColumns.filter(c => c.hideable === false || !hiddenColumns.has(c.key)),
|
|
[orderedColumns, hiddenColumns]
|
|
);
|
|
|
|
const filteredData = useMemo(() =>
|
|
config.serverSide ? safeData : filterData(safeData, filterState, normalizedColumns as ColumnDef<T>[]),
|
|
[safeData, filterState, normalizedColumns, config.serverSide]
|
|
);
|
|
|
|
const sortedData = useMemo(() =>
|
|
config.serverSide ? safeData : sortData(filteredData, sortState, normalizedColumns as ColumnDef<T>[]),
|
|
[filteredData, sortState, normalizedColumns, config.serverSide]
|
|
);
|
|
|
|
const totalRecords = useMemo(() =>
|
|
config.serverSide ? (totalCount ?? safeData.length) : filteredData.length,
|
|
[config.serverSide, totalCount, safeData.length, filteredData.length]
|
|
);
|
|
|
|
const rowHeightPx = useMemo(() => {
|
|
const map: Record<string, number> = { compact: 36, normal: 48, comfortable: 60 };
|
|
return map[config.density ?? 'normal'] ?? 48;
|
|
}, [config.density]);
|
|
|
|
const virtualRange = useMemo(() => {
|
|
if (!config.virtualScroll) return null;
|
|
const buf = 6;
|
|
const start = Math.max(0, Math.floor(scrollTop / rowHeightPx) - buf);
|
|
const end = Math.min(sortedData.length, Math.ceil((scrollTop + containerH) / rowHeightPx) + buf);
|
|
return { start, end };
|
|
}, [config.virtualScroll, scrollTop, containerH, rowHeightPx, sortedData.length]);
|
|
|
|
const paginatedData = useMemo(() => {
|
|
if (config.serverSide || !config.pagination?.enabled) return sortedData;
|
|
const { page, pageSize } = pageState;
|
|
return sortedData.slice((page - 1) * pageSize, page * pageSize);
|
|
}, [sortedData, pageState, config.serverSide, config.pagination?.enabled]);
|
|
|
|
const displayData = useMemo(() =>
|
|
virtualRange ? sortedData.slice(virtualRange.start, virtualRange.end) : paginatedData,
|
|
[virtualRange, sortedData, paginatedData]
|
|
);
|
|
|
|
const spacerTop = (virtualRange?.start ?? 0) * rowHeightPx;
|
|
const spacerBottom = virtualRange ? (sortedData.length - virtualRange.end) * rowHeightPx : 0;
|
|
|
|
const selectablePageData = useMemo(() =>
|
|
config.isRowSelectable ? paginatedData.filter(r => config.isRowSelectable!(r)) : paginatedData,
|
|
[paginatedData, config.isRowSelectable]
|
|
);
|
|
const allSelected = selectablePageData.length > 0 && selectablePageData.every(r => selectedKeys.has(rowKey(r)));
|
|
const someSelected = selectablePageData.some(r => selectedKeys.has(rowKey(r))) && !allSelected;
|
|
|
|
// --- Handlers ---
|
|
|
|
function handleSort(col: ColumnDef<T>) {
|
|
if (!col.sortable) return;
|
|
setSortState(prev => {
|
|
const next: SortState =
|
|
prev.column !== col.key ? { column: col.key, direction: 'asc' }
|
|
: prev.direction === 'asc' ? { column: col.key, direction: 'desc' }
|
|
: { column: null, direction: null };
|
|
onSortChange?.(next);
|
|
if (config.serverSide) onServerSideChange?.({ sort: next, filter: filterState, page: pageState });
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function handleGlobalFilter(value: string) {
|
|
const next: FilterState = { ...filterState, global: value };
|
|
setFilterState(next);
|
|
setPageState(p => ({ ...p, page: 1 }));
|
|
onFilterChange?.(next);
|
|
if (config.serverSide) onServerSideChange?.({ sort: sortState, filter: next, page: { ...pageState, page: 1 } });
|
|
}
|
|
|
|
function toggleRow(row: T) {
|
|
if (config.isRowSelectable && !config.isRowSelectable(row)) return;
|
|
const key = rowKey(row);
|
|
const next = new Set(selectedKeys);
|
|
next.has(key) ? next.delete(key) : next.add(key);
|
|
setSelectedKeys(next);
|
|
onSelectionChange?.(safeData.filter(r => next.has(rowKey(r))));
|
|
}
|
|
|
|
function toggleAll() {
|
|
const next = new Set(selectedKeys);
|
|
if (allSelected) {
|
|
selectablePageData.map(rowKey).forEach(k => next.delete(k));
|
|
} else {
|
|
selectablePageData.forEach(r => next.add(rowKey(r)));
|
|
}
|
|
setSelectedKeys(next);
|
|
onSelectionChange?.(safeData.filter(r => next.has(rowKey(r))));
|
|
}
|
|
|
|
function clearSelection() {
|
|
setSelectedKeys(new Set());
|
|
onSelectionChange?.([]);
|
|
}
|
|
|
|
function toggleExpand(row: T) {
|
|
const key = rowKey(row);
|
|
setExpandedKeys(prev => {
|
|
const next = new Set(prev);
|
|
next.has(key) ? next.delete(key) : next.add(key);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function toggleColumnVisibility(key: string) {
|
|
const column = orderedColumns.find(col => col.key === key);
|
|
if (!column || column.hideable === false) return;
|
|
|
|
setHiddenColumns(prev => {
|
|
const next = new Set(prev);
|
|
next.has(key) ? next.delete(key) : next.add(key);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function handlePageChange(page: number) {
|
|
const next = { ...pageState, page };
|
|
setPageState(next);
|
|
onPageChange?.(next);
|
|
if (config.serverSide) onServerSideChange?.({ sort: sortState, filter: filterState, page: next });
|
|
}
|
|
|
|
function handlePageSizeChange(pageSize: number) {
|
|
const next = { page: 1, pageSize };
|
|
setPageState(next);
|
|
onPageChange?.(next);
|
|
if (config.serverSide) onServerSideChange?.({ sort: sortState, filter: filterState, page: next });
|
|
}
|
|
|
|
function handleScroll(e: React.UIEvent<HTMLDivElement>) {
|
|
setScrollTop(e.currentTarget.scrollTop);
|
|
setContainerH(e.currentTarget.clientHeight);
|
|
}
|
|
|
|
const handleResizeStart = useCallback((e: React.PointerEvent<HTMLDivElement>, colKey: string) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const th = (e.currentTarget as HTMLElement).closest('th') as HTMLElement;
|
|
if (!th) return;
|
|
const startX = e.clientX;
|
|
const startWidth = th.offsetWidth;
|
|
th.setPointerCapture(e.pointerId);
|
|
|
|
const onMove = (ev: PointerEvent) => {
|
|
const newWidth = Math.max(80, startWidth + ev.clientX - startX);
|
|
setColumnWidths(w => ({ ...w, [colKey]: newWidth }));
|
|
};
|
|
const onUp = () => {
|
|
th.removeEventListener('pointermove', onMove);
|
|
th.removeEventListener('pointerup', onUp);
|
|
};
|
|
th.addEventListener('pointermove', onMove);
|
|
th.addEventListener('pointerup', onUp);
|
|
}, []);
|
|
|
|
function handleDragStart(e: React.DragEvent, colKey: string) {
|
|
setDraggedKey(colKey);
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
}
|
|
|
|
function handleDragOver(e: React.DragEvent, colKey: string) {
|
|
e.preventDefault();
|
|
setDropTargetKey(colKey);
|
|
}
|
|
|
|
function handleDrop(e: React.DragEvent, colKey: string) {
|
|
e.preventDefault();
|
|
if (!draggedKey || draggedKey === colKey) return;
|
|
setColumnOrder(prev => {
|
|
const next = [...prev];
|
|
const from = next.indexOf(draggedKey);
|
|
const to = next.indexOf(colKey);
|
|
if (from < 0 || to < 0) return prev;
|
|
next.splice(from, 1);
|
|
next.splice(to, 0, draggedKey);
|
|
return next;
|
|
});
|
|
setDraggedKey(null);
|
|
setDropTargetKey(null);
|
|
}
|
|
|
|
function handleDragEnd() {
|
|
setDraggedKey(null);
|
|
setDropTargetKey(null);
|
|
}
|
|
|
|
const exportConfig = typeof config.exportable === 'object' ? config.exportable : undefined;
|
|
const showExport = !!config.exportable;
|
|
|
|
function handleExport(format: ExportFormat) {
|
|
exportTable(format, sortedData, visibleColumns as ColumnDef<T>[], exportConfig?.filename ?? 'export');
|
|
}
|
|
|
|
const skeletonCount = config.pagination?.pageSize ?? 10;
|
|
const alignClass = (col: ColumnDef<T>) =>
|
|
col.align === 'right' ? 'justify-end' : col.align === 'center' ? 'justify-center' : 'justify-start';
|
|
|
|
return (
|
|
<div className="rounded-lg border overflow-hidden bg-background">
|
|
<TableToolbar
|
|
columns={orderedColumns as ColumnDef<T>[]}
|
|
hiddenColumns={hiddenColumns}
|
|
globalFilter={filterState.global}
|
|
showExport={showExport}
|
|
exportFormats={exportConfig?.formats}
|
|
selectedCount={selectedKeys.size}
|
|
onGlobalFilterChange={handleGlobalFilter}
|
|
onColumnVisibilityChange={toggleColumnVisibility}
|
|
onExport={handleExport}
|
|
onClearSelection={clearSelection}
|
|
/>
|
|
|
|
{/* Mobile card view */}
|
|
<div className="md:hidden p-3 space-y-3">
|
|
{loading && Array.from({ length: skeletonCount }).map((_, i) => (
|
|
<div key={i} className="rounded-lg border bg-card p-4 space-y-3">
|
|
<Skeleton className="h-5 w-3/4" />
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{Array.from({ length: 4 }).map((__, j) => <Skeleton key={j} className="h-4 w-full" />)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{!loading && displayData.length === 0 && (
|
|
config.emptyState ?? (
|
|
<div className="h-32 flex items-center justify-center text-muted-foreground text-sm">
|
|
{config.emptyMessage ?? 'No records found.'}
|
|
</div>
|
|
)
|
|
)}
|
|
{!loading && displayData.map(row => (
|
|
<MobileCard
|
|
key={rowKey(row)}
|
|
row={row}
|
|
columns={visibleColumns as ColumnDef<T>[]}
|
|
mobileCardCfg={config.mobileCard}
|
|
onClick={onRowClick}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Desktop table view */}
|
|
<div
|
|
ref={scrollContainerRef}
|
|
style={config.virtualScroll ? { height: config.virtualScrollHeight ?? '520px', overflowY: 'auto' } : undefined}
|
|
onScroll={handleScroll}
|
|
className="hidden md:block overflow-x-auto"
|
|
>
|
|
<Table>
|
|
<TableHeader className={config.stickyHeader ? 'sticky top-0 z-10 bg-muted/50' : ''}>
|
|
<TableRow>
|
|
{config.selectable && (
|
|
<TableHead className="w-10">
|
|
<Checkbox
|
|
checked={allSelected}
|
|
indeterminate={someSelected}
|
|
onCheckedChange={toggleAll}
|
|
/>
|
|
</TableHead>
|
|
)}
|
|
{config.expandable && <TableHead className="w-10" />}
|
|
{visibleColumns.map(col => {
|
|
const width = columnWidths[col.key] ?? col.width ?? 160;
|
|
return (
|
|
<TableHead
|
|
key={col.key}
|
|
style={{ width, minWidth: col.minWidth ?? 80 }}
|
|
className={cn(
|
|
'relative select-none group',
|
|
col.sticky === 'left' && 'sticky left-0 bg-background z-10',
|
|
col.sticky === 'right' && 'sticky right-0 bg-background z-10',
|
|
col.sortable && 'cursor-pointer hover:bg-muted/70',
|
|
draggedKey === col.key && 'opacity-50',
|
|
dropTargetKey === col.key && draggedKey !== col.key && 'bg-primary/10',
|
|
)}
|
|
draggable
|
|
onDragStart={e => handleDragStart(e, col.key)}
|
|
onDragOver={e => handleDragOver(e, col.key)}
|
|
onDrop={e => handleDrop(e, col.key)}
|
|
onDragEnd={handleDragEnd}
|
|
onClick={() => handleSort(col as ColumnDef<T>)}
|
|
>
|
|
<div className={cn('flex items-center gap-1', alignClass(col as ColumnDef<T>))}>
|
|
{col.headerRender ? col.headerRender(col as ColumnDef<T>) : col.title}
|
|
{col.sortable && <SortIcon colKey={col.key} sortState={sortState} />}
|
|
</div>
|
|
{col.resizable !== false && (
|
|
<div
|
|
className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize opacity-0 group-hover:opacity-100 bg-border"
|
|
onPointerDown={e => handleResizeStart(e, col.key)}
|
|
onClick={e => e.stopPropagation()}
|
|
/>
|
|
)}
|
|
</TableHead>
|
|
);
|
|
})}
|
|
</TableRow>
|
|
</TableHeader>
|
|
|
|
<TableBody>
|
|
{loading && Array.from({ length: skeletonCount }).map((_, i) => (
|
|
<TableRow key={i}>
|
|
{config.selectable && <TableCell><Skeleton className="h-4 w-4" /></TableCell>}
|
|
{config.expandable && <TableCell><Skeleton className="h-4 w-4" /></TableCell>}
|
|
{visibleColumns.map(col => (
|
|
<TableCell key={col.key}>
|
|
<Skeleton className="h-4 w-full" />
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))}
|
|
|
|
{!loading && displayData.length === 0 && (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={visibleColumns.length + (config.selectable ? 1 : 0) + (config.expandable ? 1 : 0)}
|
|
className="p-0"
|
|
>
|
|
{config.emptyState ?? (
|
|
<div className="h-32 flex items-center justify-center text-muted-foreground text-sm">
|
|
{config.emptyMessage ?? 'No records found.'}
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
|
|
{!loading && virtualRange && spacerTop > 0 && (
|
|
<tr style={{ height: spacerTop }} />
|
|
)}
|
|
|
|
{!loading && displayData.map(row => {
|
|
const key = rowKey(row);
|
|
const isSelected = selectedKeys.has(key);
|
|
const isExpanded = expandedKeys.has(key);
|
|
return (
|
|
<React.Fragment key={key}>
|
|
<TableRow
|
|
className={cn(
|
|
'cursor-pointer transition-colors',
|
|
isSelected && 'bg-primary/5',
|
|
config.rowClass?.(row),
|
|
)}
|
|
onClick={() => onRowClick?.(row)}
|
|
>
|
|
{config.selectable && (
|
|
<TableCell onClick={e => e.stopPropagation()}>
|
|
<Checkbox
|
|
checked={isSelected}
|
|
disabled={config.isRowSelectable ? !config.isRowSelectable(row) : false}
|
|
onCheckedChange={() => toggleRow(row)}
|
|
/>
|
|
</TableCell>
|
|
)}
|
|
{config.expandable && (
|
|
<TableCell onClick={e => e.stopPropagation()}>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => toggleExpand(row)}
|
|
>
|
|
<HugeiconsIcon
|
|
icon={ChevronRightIcon}
|
|
className={cn('size-4 transition-transform', isExpanded && 'rotate-90')}
|
|
/>
|
|
</Button>
|
|
</TableCell>
|
|
)}
|
|
{visibleColumns.map(col => (
|
|
<TableCell
|
|
key={col.key}
|
|
className={cn(
|
|
col.sticky === 'left' && 'sticky left-0 bg-background',
|
|
col.sticky === 'right' && 'sticky right-0 bg-background',
|
|
col.align === 'right' && 'text-right',
|
|
col.align === 'center' && 'text-center',
|
|
)}
|
|
style={{ height: rowHeightPx }}
|
|
>
|
|
<CellContent row={row} col={col as ColumnDef<T>} />
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
{config.expandable && isExpanded && (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={visibleColumns.length + (config.selectable ? 2 : 1)}
|
|
className="bg-muted/30 p-4"
|
|
>
|
|
{config.expandRender?.(row)}
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
|
|
{!loading && virtualRange && spacerBottom > 0 && (
|
|
<tr style={{ height: spacerBottom }} />
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{config.pagination?.enabled && (
|
|
<TablePagination
|
|
page={pageState.page}
|
|
pageSize={pageState.pageSize}
|
|
totalRecords={totalRecords}
|
|
pageSizeOptions={config.pagination.pageSizeOptions ?? [10, 25, 50, 100]}
|
|
onPageChange={handlePageChange}
|
|
onPageSizeChange={handlePageSizeChange}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|