Review

Stable columns for customs hold release grid

Bonded warehouse clerks reported sort and filter on the customs hold release grid flickering or resetting mid-click. Columns were rebuilt every render (and previously memoized against sorting state). Memoizes ColumnDef with stable deps and wires sorting/columnFilters through useReactTable so order and filters stick.

ReactTier 2reacttanstack-tablememo

Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.

components/warehouse/CustomsHoldReleaseTable.tsx+8-5

34	34		type HoldRow = {
35	35		id: string;
36	36		entryNumber: string;
37	37		daysOnHold: number;
38	38		status: "pending" \| "cleared" \| "seized";
39	39		};
40	40
41	41		export function CustomsHoldReleaseTable({ rows }: { rows: HoldRow[] }) {
42	42		const [sorting, setSorting] = useState<SortingState>([]);
43	43		const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
44	44
45		-	const columns: ColumnDef<HoldRow>[] = [
46		-	{ accessorKey: "entryNumber", header: "Entry #" },
47		-	{ accessorKey: "daysOnHold", header: "Days on hold" },
48		-	{ accessorKey: "status", header: "Status", filterFn: "equalsString" },
49		-	];
	45	+	const columns = useMemo<ColumnDef<HoldRow>[]>(
	46	+	() => [
	47	+	{ accessorKey: "entryNumber", header: "Entry #" },
	48	+	{ accessorKey: "daysOnHold", header: "Days on hold" },
	49	+	{ accessorKey: "status", header: "Status", filterFn: "equalsString" },
	50	+	],
	51	+	[],
	52	+	);
50	53
51	54		const table = useReactTable({
52	55		data: rows,
53	56		columns,
54	57		state: { sorting, columnFilters },
55	58		onSortingChange: setSorting,
56	59		onColumnFiltersChange: setColumnFilters,
57	60		getCoreRowModel: getCoreRowModel(),
58	61		getSortedRowModel: getSortedRowModel(),
59	62		getFilteredRowModel: getFilteredRowModel(),
60	63		});