610 lines
22 KiB
TypeScript
610 lines
22 KiB
TypeScript
import { useState, type ReactNode } from 'react';
|
|
import { LayoutGroup } from 'framer-motion';
|
|
import { ArrowDown, ArrowUp, CheckCircle2, Loader2 } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { api } from '@/api';
|
|
import { cn, fmt, errMessage } from '@/lib/utils';
|
|
import { asDollars } from '@/lib/money';
|
|
import {
|
|
Table,
|
|
TableHeader,
|
|
TableBody,
|
|
TableHead,
|
|
TableRow,
|
|
TableCell,
|
|
} from '@/components/ui/table';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogContent,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogCancel,
|
|
AlertDialogAction,
|
|
} from '@/components/ui/alert-dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
TRACKER_SORT_ASC,
|
|
TRACKER_SORT_DEFAULT,
|
|
moveInArray,
|
|
rowIsPaid,
|
|
paymentDateForTrackerMonth,
|
|
} from '@/lib/trackerUtils';
|
|
import { DEFAULT_TRACKER_TABLE_COLUMNS } from '@/lib/trackerTableColumns';
|
|
import { TrackerRow as Row } from '@/components/tracker/TrackerRow';
|
|
import {
|
|
MobileTrackerRow,
|
|
type DragProps,
|
|
type MoveControls,
|
|
type RowSelection,
|
|
} from '@/components/tracker/MobileTrackerRow';
|
|
import type { Payment, TrackerRow } from '@/types';
|
|
|
|
interface SortableHeadProps {
|
|
sortKey: string;
|
|
activeSortKey?: string;
|
|
sortDir?: string;
|
|
onSort?: (key: string) => void;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
function SortableHead({
|
|
sortKey,
|
|
activeSortKey,
|
|
sortDir,
|
|
onSort,
|
|
children,
|
|
className,
|
|
}: SortableHeadProps) {
|
|
const active = activeSortKey === sortKey;
|
|
const Icon = sortDir === TRACKER_SORT_ASC ? ArrowUp : ArrowDown;
|
|
return (
|
|
<TableHead
|
|
aria-sort={active ? (sortDir === TRACKER_SORT_ASC ? 'ascending' : 'descending') : 'none'}
|
|
className={cn('h-11 py-2.5', className)}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => onSort?.(sortKey)}
|
|
className={cn(
|
|
'group inline-flex h-8 items-center gap-1.5 rounded-md px-2 text-[11px] font-semibold uppercase tracking-[0.08em] transition-all',
|
|
'hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60',
|
|
active ? 'bg-accent/70 text-foreground shadow-sm' : 'text-muted-foreground',
|
|
)}
|
|
>
|
|
<span>{children}</span>
|
|
<Icon
|
|
className={cn(
|
|
'h-3.5 w-3.5 transition-opacity',
|
|
active ? 'opacity-100' : 'opacity-0 group-hover:opacity-55',
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
</TableHead>
|
|
);
|
|
}
|
|
|
|
interface TrackerBucketProps {
|
|
label: string;
|
|
rows: TrackerRow[];
|
|
year: number;
|
|
month: number;
|
|
refresh: () => void;
|
|
onEditBill?: (row: TrackerRow) => void;
|
|
loading?: boolean;
|
|
onReorderRows?: (rows: TrackerRow[]) => void;
|
|
reorderEnabled?: boolean;
|
|
movingBillId?: number | null;
|
|
sortKey?: string;
|
|
sortDir?: string;
|
|
onSort?: (key: string) => void;
|
|
driftedIds?: Set<number>;
|
|
visibleColumns?: string[];
|
|
selectedIds?: Set<number>;
|
|
onToggleSelect?: (id: number, next: boolean) => void;
|
|
}
|
|
|
|
export function TrackerBucket({
|
|
label,
|
|
rows,
|
|
year,
|
|
month,
|
|
refresh,
|
|
onEditBill,
|
|
loading,
|
|
onReorderRows,
|
|
reorderEnabled,
|
|
movingBillId,
|
|
sortKey = TRACKER_SORT_DEFAULT,
|
|
sortDir = TRACKER_SORT_ASC,
|
|
onSort,
|
|
driftedIds = new Set<number>(),
|
|
visibleColumns = DEFAULT_TRACKER_TABLE_COLUMNS,
|
|
selectedIds,
|
|
onToggleSelect,
|
|
}: TrackerBucketProps) {
|
|
const [draggingId, setDraggingId] = useState<number | null>(null);
|
|
const [dropTargetId, setDropTargetId] = useState<number | null>(null);
|
|
// Build the per-row selection prop only when the page provides a toggle handler.
|
|
const selectionFor = (r: TrackerRow): RowSelection | undefined =>
|
|
onToggleSelect
|
|
? {
|
|
selected: selectedIds?.has(r.id) ?? false,
|
|
onToggle: (next) => onToggleSelect(r.id, next),
|
|
}
|
|
: undefined;
|
|
const visibleColumnSet = new Set(visibleColumns);
|
|
const showColumn = (key: string) => visibleColumnSet.has(key);
|
|
const tableColSpan = 1 + visibleColumns.length;
|
|
// Use actual_amount (if set) as the per-row threshold; exclude skipped rows from totals
|
|
const activeRows = rows.filter((r) => !r.is_skipped);
|
|
const totalThreshold = activeRows.reduce(
|
|
(s, r) => s + (r.actual_amount ?? r.expected_amount ?? 0),
|
|
0,
|
|
);
|
|
const totalPaid = activeRows.reduce((s, r) => s + (r.total_paid || 0), 0);
|
|
const totalPaidTowardDue = activeRows.reduce((s, r) => {
|
|
const threshold = Number(r.actual_amount ?? r.expected_amount ?? 0) || 0;
|
|
const cappedPaid = Number(r.paid_toward_due);
|
|
return (
|
|
s +
|
|
(Number.isFinite(cappedPaid) ? cappedPaid : Math.min(Number(r.total_paid) || 0, threshold))
|
|
);
|
|
}, 0);
|
|
const totalOverpaid = Math.max(totalPaid - totalPaidTowardDue, 0);
|
|
const totalRemaining = Math.max(totalThreshold - totalPaidTowardDue, 0);
|
|
const skippedCount = rows.length - activeRows.length;
|
|
const pct = totalThreshold > 0 ? Math.min((totalPaidTowardDue / totalThreshold) * 100, 100) : 0;
|
|
const allPaid = pct >= 100;
|
|
|
|
// "Pay all due" — every non-skipped, not-yet-paid row in this bucket, paid for
|
|
// its remaining balance in one bulk call. Rows are already occurrence-gated by
|
|
// the server, so they're all genuinely due this month.
|
|
const [payAllOpen, setPayAllOpen] = useState(false);
|
|
const [payingAll, setPayingAll] = useState(false);
|
|
const unpaidRows = activeRows.filter((r) => !rowIsPaid(r));
|
|
const payAllItems = unpaidRows
|
|
.map((r) => {
|
|
const threshold = Number(r.actual_amount ?? r.expected_amount ?? 0) || 0;
|
|
const remaining = Math.max(threshold - (Number(r.total_paid) || 0), 0);
|
|
return {
|
|
bill_id: r.id,
|
|
name: r.name,
|
|
amount: remaining > 0 ? remaining : threshold,
|
|
paid_date: paymentDateForTrackerMonth(year, month, r.due_day),
|
|
};
|
|
})
|
|
.filter((item) => item.amount > 0);
|
|
const payAllTotal = payAllItems.reduce((s, i) => s + i.amount, 0);
|
|
|
|
async function handlePayAllDue() {
|
|
setPayingAll(true);
|
|
try {
|
|
const result = (await api.bulkPay(payAllItems.map(({ name, ...item }) => item))) as {
|
|
created?: Payment[];
|
|
};
|
|
const created = result.created || [];
|
|
setPayAllOpen(false);
|
|
if (created.length === 0) {
|
|
toast.info('Those bills were already paid.');
|
|
} else {
|
|
toast.success(
|
|
`Paid ${created.length} bill${created.length === 1 ? '' : 's'} — ${fmt(asDollars(payAllTotal))}`,
|
|
{
|
|
action: {
|
|
label: 'Undo',
|
|
onClick: async () => {
|
|
try {
|
|
await Promise.all(created.map((p) => api.deletePayment(p.id)));
|
|
toast.success('Payments removed');
|
|
refresh?.();
|
|
} catch (err) {
|
|
toast.error(errMessage(err, 'Failed to undo payments.'));
|
|
}
|
|
},
|
|
},
|
|
},
|
|
);
|
|
}
|
|
refresh?.();
|
|
} catch (err) {
|
|
toast.error(errMessage(err, 'Failed to pay bills.'));
|
|
} finally {
|
|
setPayingAll(false);
|
|
}
|
|
}
|
|
|
|
function reorderByIndex(fromIndex: number, toIndex: number) {
|
|
if (!reorderEnabled || fromIndex === toIndex || fromIndex < 0 || toIndex < 0) return;
|
|
onReorderRows?.(moveInArray(rows, fromIndex, toIndex));
|
|
}
|
|
|
|
function dragPropsFor(row: TrackerRow, index: number): DragProps {
|
|
if (!reorderEnabled) return { draggable: false };
|
|
return {
|
|
draggable: true,
|
|
isDragging: draggingId === row.id,
|
|
isDropTarget: dropTargetId === row.id && draggingId !== row.id,
|
|
onDragStart: (event) => {
|
|
setDraggingId(row.id);
|
|
event.dataTransfer.effectAllowed = 'move';
|
|
event.dataTransfer.setData('text/plain', String(row.id));
|
|
},
|
|
onDragEnter: () => {
|
|
if (draggingId && draggingId !== row.id) setDropTargetId(row.id);
|
|
},
|
|
onDragOver: (event) => {
|
|
event.preventDefault();
|
|
event.dataTransfer.dropEffect = 'move';
|
|
if (draggingId && draggingId !== row.id) setDropTargetId(row.id);
|
|
},
|
|
onDrop: (event) => {
|
|
event.preventDefault();
|
|
const sourceId = Number(event.dataTransfer.getData('text/plain') || draggingId);
|
|
const fromIndex = rows.findIndex((item) => item.id === sourceId);
|
|
reorderByIndex(fromIndex, index);
|
|
setDraggingId(null);
|
|
setDropTargetId(null);
|
|
},
|
|
onDragEnd: () => {
|
|
setDraggingId(null);
|
|
setDropTargetId(null);
|
|
},
|
|
};
|
|
}
|
|
|
|
function moveControlsFor(row: TrackerRow, index: number): MoveControls {
|
|
return {
|
|
enabled: !!reorderEnabled,
|
|
moving: movingBillId === row.id,
|
|
canMoveUp: index > 0,
|
|
canMoveDown: index < rows.length - 1,
|
|
onMoveUp: () => reorderByIndex(index, index - 1),
|
|
onMoveDown: () => reorderByIndex(index, index + 1),
|
|
};
|
|
}
|
|
|
|
return (
|
|
<div className="table-surface overflow-hidden">
|
|
{/* Bucket header */}
|
|
<div className="flex flex-col gap-2 border-b border-border/70 bg-card/60 px-3 py-3 sm:px-5 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<span className="truncate text-[11px] font-bold uppercase tracking-[0.12em] text-muted-foreground">
|
|
{label}
|
|
</span>
|
|
{skippedCount > 0 && (
|
|
<span className="shrink-0 text-[10px] text-muted-foreground/60">
|
|
({skippedCount} skipped)
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex min-w-28 items-center gap-2">
|
|
<div className="h-1.5 w-16 overflow-hidden rounded-full bg-border sm:w-24">
|
|
<div
|
|
className={cn(
|
|
'h-full rounded-full transition-all duration-700',
|
|
allPaid ? 'bg-emerald-500' : 'bg-emerald-400/70',
|
|
)}
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-[11px] font-mono text-muted-foreground/70">
|
|
{Math.round(pct)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-mono text-muted-foreground md:justify-end">
|
|
<span className="tracker-number whitespace-nowrap">
|
|
<span className={cn(allPaid ? 'text-emerald-500' : 'text-foreground')}>
|
|
{fmt(asDollars(totalPaidTowardDue))}
|
|
</span>
|
|
<span className="text-muted-foreground/50 mx-1">/</span>
|
|
{fmt(asDollars(totalThreshold))}
|
|
{totalOverpaid > 0 && (
|
|
<span className="ml-1 text-emerald-500">+{fmt(asDollars(totalOverpaid))}</span>
|
|
)}
|
|
</span>
|
|
{!allPaid && totalRemaining > 0 && (
|
|
<span className="text-[11px] text-muted-foreground/70">
|
|
{fmt(asDollars(totalRemaining))} left
|
|
</span>
|
|
)}
|
|
{allPaid && <span className="text-[11px] text-emerald-500">Done</span>}
|
|
{!reorderEnabled && rows.length > 1 && (
|
|
<span className="hidden text-[11px] text-muted-foreground/60 xl:inline">
|
|
Clear filters to reorder
|
|
</span>
|
|
)}
|
|
{payAllItems.length > 0 && !loading && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-7 gap-1.5 text-[11px] font-sans"
|
|
disabled={payingAll}
|
|
onClick={() => setPayAllOpen(true)}
|
|
>
|
|
{payingAll ? (
|
|
<>
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
Paying…
|
|
</>
|
|
) : (
|
|
<>
|
|
<CheckCircle2 className="h-3.5 w-3.5" />
|
|
Pay all due ({payAllItems.length})
|
|
</>
|
|
)}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<AlertDialog open={payAllOpen} onOpenChange={setPayAllOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Pay all due in {label}?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
This records a payment for {payAllItems.length} unpaid bill
|
|
{payAllItems.length === 1 ? '' : 's'} in this bucket, totalling{' '}
|
|
{fmt(asDollars(payAllTotal))}. You can undo it right after.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={payingAll}>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
handlePayAllDue();
|
|
}}
|
|
disabled={payingAll}
|
|
>
|
|
{payingAll ? 'Paying…' : `Pay ${fmt(asDollars(payAllTotal))}`}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
<LayoutGroup id={`tracker-bucket-mobile-${label}`}>
|
|
<div
|
|
className="grid gap-2.5 bg-background/20 p-2.5 lg:hidden"
|
|
aria-busy={loading ? 'true' : 'false'}
|
|
>
|
|
{loading ? (
|
|
Array.from({ length: 3 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="animate-pulse rounded-lg border border-border/60 bg-card/65 p-3"
|
|
>
|
|
<div className="flex min-w-0 items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<div className="h-1.5 w-1.5 shrink-0 rounded-full bg-muted" />
|
|
<div className="h-4 w-32 rounded-md bg-muted" />
|
|
</div>
|
|
</div>
|
|
<div className="h-5 w-20 rounded-md bg-muted" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-x-3 gap-y-2 text-xs text-muted-foreground mt-2">
|
|
<div>
|
|
<p className="uppercase tracking-wide text-muted-foreground/60">Expected</p>
|
|
<div className="h-3 w-20 rounded-md bg-muted mt-0.5" />
|
|
</div>
|
|
<div>
|
|
<p className="uppercase tracking-wide text-muted-foreground/60">Remaining</p>
|
|
<div className="h-3 w-20 rounded-md bg-muted mt-0.5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : rows.length === 0 ? (
|
|
<div className="rounded-lg border border-dashed border-border/70 bg-muted/15 px-4 py-8 text-center text-sm text-muted-foreground">
|
|
No bills match — try adjusting your filters.
|
|
</div>
|
|
) : (
|
|
rows.map((r, i) => (
|
|
<MobileTrackerRow
|
|
key={r.id}
|
|
row={r}
|
|
year={year}
|
|
month={month}
|
|
refresh={refresh}
|
|
index={i}
|
|
onEditBill={onEditBill}
|
|
moveControls={moveControlsFor(r, i)}
|
|
dragProps={dragPropsFor(r, i)}
|
|
isDrifted={driftedIds.has(r.id)}
|
|
selection={selectionFor(r)}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
</LayoutGroup>
|
|
|
|
<div className="hidden lg:block" aria-busy={loading ? 'true' : 'false'}>
|
|
<div className="overflow-x-auto">
|
|
<Table className={cn(visibleColumns.length <= 4 ? 'min-w-[720px]' : 'min-w-[1120px]')}>
|
|
<TableHeader>
|
|
<TableRow className="border-border/80 bg-muted/20 hover:bg-muted/20">
|
|
<SortableHead
|
|
sortKey="name"
|
|
activeSortKey={sortKey}
|
|
sortDir={sortDir}
|
|
onSort={onSort}
|
|
className="w-[18%]"
|
|
>
|
|
Bill
|
|
</SortableHead>
|
|
{showColumn('due') && (
|
|
<SortableHead
|
|
sortKey="due"
|
|
activeSortKey={sortKey}
|
|
sortDir={sortDir}
|
|
onSort={onSort}
|
|
className="w-[10%]"
|
|
>
|
|
Due
|
|
</SortableHead>
|
|
)}
|
|
{showColumn('expected') && (
|
|
<SortableHead
|
|
sortKey="expected"
|
|
activeSortKey={sortKey}
|
|
sortDir={sortDir}
|
|
onSort={onSort}
|
|
className="w-[10%] text-center"
|
|
>
|
|
Expected
|
|
</SortableHead>
|
|
)}
|
|
{showColumn('previous') && (
|
|
<SortableHead
|
|
sortKey="previous"
|
|
activeSortKey={sortKey}
|
|
sortDir={sortDir}
|
|
onSort={onSort}
|
|
className="w-[10%] text-center"
|
|
>
|
|
Last Month
|
|
</SortableHead>
|
|
)}
|
|
{showColumn('paid') && (
|
|
<SortableHead
|
|
sortKey="paid"
|
|
activeSortKey={sortKey}
|
|
sortDir={sortDir}
|
|
onSort={onSort}
|
|
className="w-[10%] text-center"
|
|
>
|
|
Paid
|
|
</SortableHead>
|
|
)}
|
|
{showColumn('paid_date') && (
|
|
<SortableHead
|
|
sortKey="paid_date"
|
|
activeSortKey={sortKey}
|
|
sortDir={sortDir}
|
|
onSort={onSort}
|
|
className="w-[10%]"
|
|
>
|
|
Paid Date
|
|
</SortableHead>
|
|
)}
|
|
{showColumn('status') && (
|
|
<SortableHead
|
|
sortKey="status"
|
|
activeSortKey={sortKey}
|
|
sortDir={sortDir}
|
|
onSort={onSort}
|
|
className="w-[9%] text-center"
|
|
>
|
|
Status
|
|
</SortableHead>
|
|
)}
|
|
{showColumn('action') && (
|
|
<TableHead className="h-11 w-[10%] py-2.5 text-center text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
|
|
Action
|
|
</TableHead>
|
|
)}
|
|
{showColumn('notes') && (
|
|
<TableHead className="h-11 w-[23%] py-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground border-l border-border/80 pl-4">
|
|
Notes
|
|
</TableHead>
|
|
)}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{loading ? (
|
|
Array.from({ length: 5 }).map((_, i) => (
|
|
<TableRow key={i} className="border-border/50">
|
|
<TableCell className="w-[18%] py-3">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="h-1.5 w-1.5 rounded-full bg-muted" />
|
|
<div className="h-4 w-48 rounded-md bg-muted" />
|
|
</div>
|
|
</TableCell>
|
|
{showColumn('due') && (
|
|
<TableCell className="w-[10%] py-3">
|
|
<div className="h-3 w-20 rounded-md bg-muted" />
|
|
</TableCell>
|
|
)}
|
|
{showColumn('expected') && (
|
|
<TableCell className="w-[10%] py-3 text-center">
|
|
<div className="mx-auto h-3 w-20 rounded-md bg-muted" />
|
|
</TableCell>
|
|
)}
|
|
{showColumn('previous') && (
|
|
<TableCell className="w-[10%] py-3 text-center">
|
|
<div className="mx-auto h-3 w-20 rounded-md bg-muted" />
|
|
</TableCell>
|
|
)}
|
|
{showColumn('paid') && (
|
|
<TableCell className="w-[10%] py-3">
|
|
<div className="mx-auto h-7 w-24 rounded-md bg-muted" />
|
|
</TableCell>
|
|
)}
|
|
{showColumn('paid_date') && (
|
|
<TableCell className="w-[10%] py-3">
|
|
<div className="h-7 w-24 rounded-md bg-muted" />
|
|
</TableCell>
|
|
)}
|
|
{showColumn('status') && (
|
|
<TableCell className="w-[9%] py-3">
|
|
<div className="mx-auto h-5 w-20 rounded-md bg-muted" />
|
|
</TableCell>
|
|
)}
|
|
{showColumn('action') && (
|
|
<TableCell className="w-[10%] py-3 text-center">
|
|
<div className="flex items-center justify-center gap-1">
|
|
<div className="h-7 w-20 rounded-md bg-muted" />
|
|
<div className="h-7 w-7 rounded-md bg-muted" />
|
|
</div>
|
|
</TableCell>
|
|
)}
|
|
{showColumn('notes') && (
|
|
<TableCell className="w-[23%] py-3 border-l border-border pl-4">
|
|
<div className="h-4 w-full rounded-md bg-muted" />
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
))
|
|
) : rows.length === 0 ? (
|
|
<TableRow className="border-border/50">
|
|
<TableCell
|
|
colSpan={tableColSpan}
|
|
className="py-10 text-center text-sm text-muted-foreground"
|
|
>
|
|
No bills match — try adjusting your filters.
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
<LayoutGroup id={`tracker-bucket-table-${label}`}>
|
|
{rows.map((r, i) => (
|
|
<Row
|
|
key={r.id}
|
|
row={r}
|
|
year={year}
|
|
month={month}
|
|
refresh={refresh}
|
|
index={i}
|
|
onEditBill={onEditBill}
|
|
moveControls={moveControlsFor(r, i)}
|
|
dragProps={dragPropsFor(r, i)}
|
|
isDrifted={driftedIds.has(r.id)}
|
|
visibleColumns={visibleColumns}
|
|
selection={selectionFor(r)}
|
|
/>
|
|
))}
|
|
</LayoutGroup>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|