Data Table PRO MAX 🔥 #28

kuzmordas · 2025-10-09T11:59:55Z

New Components:

DataTableProMax: Feature-rich data table with manual pagination, filtering, sorting, column pinning, resizing, and row pinning
DatePicker: Single date selection component with popover UI
DateRangePicker: Date range selection component with customizable presets

Fixed Components:

Calendar: added Dropdown for date select

cursor

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on October 26

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

cursor · 2025-10-09T12:01:46Z

packages/react-components/src/components/date-range-picker.tsx

+        if (range.to) result.to = range.to
+        props.onDateRangeChange && props.onDateRangeChange(result)
+    }
+  }, [])


Bug: Stale Closures in Date Picker Callbacks

The formatDate and onSelect useCallback hooks in both DatePicker and DateRangePicker components omit relevant props from their dependency arrays. This can lead to stale closures, causing these callbacks to use outdated prop values if the formatDate, onDateChange, or onDateRangeChange props change.

Additional Locations (2)

packages/react-components/src/components/date-picker.tsx#L18-L24

packages/react-components/src/components/data-table-pro-max.tsx#L18-L23

cursor · 2025-10-09T12:01:46Z

packages/react-components/src/components/data-table-pro-max.tsx

+				pageIndex: newPagination.pageIndex + 1,
+				pageSize: newPagination.pageSize,
+			});
+		},


Bug: Pagination Indexing Error

The onPaginationChange callback incorrectly increments the pageIndex by one before passing it to the external handler. Since the component's pageIndex prop and the external callback already expect 1-based indexing, this results in a double conversion and an off-by-one error, causing incorrect page numbers to be reported.

cursor · 2025-10-09T12:01:46Z

packages/react-components/src/components/date-picker.tsx

+  const onSelect = useCallback((value: Date | undefined) => {
+    setOpen(false);
+    props.onDateChange && props.onDateChange(value);
+  }, []);


Bug: Stale Closure in onSelect Callback

The onSelect useCallback has an empty dependency array, but it references props.onDateChange. This can lead to stale closure issues, causing the callback to use an outdated onDateChange prop.

cursor · 2025-10-09T12:01:46Z

packages/react-components/src/components/date-range-picker.tsx

+        if (range.to) result.to = range.to
+        props.onDateRangeChange && props.onDateRangeChange(result)
+    }
+  }, [])


Bug: Stale Closure in onSelect Callback

The onSelect useCallback is missing props.onDateRangeChange from its dependency array. This can lead to stale closure issues where the callback uses an outdated onDateRangeChange function if the prop changes.

cursor · 2025-10-09T12:01:46Z

packages/react-components/src/components/data-table-pro-max.tsx

+                    pageCount={pageCount}
+                    currentPage={pageIndex}
+                    canPrevious={table.getCanPreviousPage()}
+                    canNext={pageCount === undefined ? data.length >= pageSize : table.getCanNextPage()}


Bug: Pagination Logic Fails When Page Count Is Undefined

The canNext calculation for the pagination component incorrectly uses data.length >= pageSize when pageCount is undefined. This logic only checks if the current page is full, potentially enabling the "next" button even on the last page of data.

cursor · 2025-10-09T12:01:46Z

packages/react-components/src/components/data-table-pro-max.tsx

+        type="text"
+        placeholder={filter.placeholder || columnId}
+        value={filter.value || ""}
+        onChange={onValueChange}


Bug: Filter Components Pass Incorrect Event Data

The TextFilter and NumberFilter components pass the raw onChange event to onValueChange, but the callback expects just the input's string value. This prevents the filter logic from receiving the correct data.

Additional Locations (1)

packages/react-components/src/components/data-table-pro-max.tsx#L937-L939

rublag-hs

Please run linter and formatter. And rebase your branch

rublag-hs · 2025-10-10T09:20:34Z

packages/react-components/src/components/data-table-pro-max.tsx

+		left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+		right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+		position: isPinned ? "sticky" : "relative",
+		zIndex: isPinned ? 1 : 0,


Why do you need z-index?

rublag-hs · 2025-10-10T09:33:10Z

packages/react-components/src/components/data-table-pro-max.tsx

+						[...Array(3)].map((_, index) => (
+							<tr key={`skeleton-${index}`} className={cn(styles.dataRow, showZebraStripes && index % 2 === (showFilters ? 0 : 1) && styles.dataRowZebra)}>


remove iteration here

rublag-hs · 2025-10-10T09:33:42Z

packages/react-components/src/components/data-table-pro-max.tsx

+					isLoading ? (
+						// Show 3 skeleton rows when loading with no data
+						[...Array(3)].map((_, index) => (
+							<tr key={`skeleton-${index}`} className={cn(styles.dataRow, showZebraStripes && index % 2 === (showFilters ? 0 : 1) && styles.dataRowZebra)}>
+								{table.getVisibleFlatColumns().map((column) => (
+									<TableCell
+										key={`skeleton-${index}-${column.id}`}
+										column={column}
+										draggedColumn={draggedColumn}
+										dropTarget={dropTarget}
+									>
+										<Skeleton className="h-5 w-full" />
+									</TableCell>
+								))}
+							</tr>
+						))


Too large conditional

rublag-hs · 2025-10-10T09:35:21Z

packages/react-components/src/components/data-table-pro-max.tsx

+type TableRowProps<T> = {
+	row: Row<T>
+	isLoading: boolean
+	onClick: MouseEventHandler<HTMLTableRowElement>


Why not onClick from react?

rublag-hs · 2025-10-10T09:47:42Z

packages/react-components/src/components/data-table-pro-max.tsx

+			className={cn(
+				styles.dataRow,
+				showZebraStripes &&
+					rowIndex % 2 === (showFilters ? 0 : 1) &&


This is quite hard to read. Why does color depend on showFilters? How about moving this to closure:

const zebraRowStyle = (index) => { const effectiveIndex = showFilters ? rowIndex : rowIndex + 1; if (effectiveIndex %2 === 0) { return styles.dataRowZebra } else { return "" } }

rublag-hs · 2025-10-10T10:00:51Z

packages/react-components/src/components/data-table-pro-max.tsx

+	setDropTarget,
+	setDraggedColumn,
+	setColumnOrder,


Consider event-based like onDrop, onColumDrag, etc.

rublag-hs · 2025-10-10T10:03:19Z

packages/react-components/src/components/data-table-pro-max.tsx

+const filterInputClasses = "h-full text-sm border-0 bg-transparent focus-visible:ring-0 placeholder:text-[#CCCED3] pl-8 focus:outline-none";
+const filterIconClasses = "absolute left-0 top-1/2 -translate-y-1/2 pointer-events-none";
+
+export const TextFilter: React.FC<TextFilterProps> = ({ columnId, onValueChange, filter }: TextFilterProps) => {


Do you need to nest filter here?

rublag-hs · 2025-10-10T10:04:14Z

packages/react-components/src/components/data-table-pro-max.tsx

+
+  return (
+    <Select
+      key={`${columnId}-${selectValue || 'empty'}`}


empty is a valid value, so it will break if there is an empty inside the list.

rublag-hs · 2025-10-10T10:06:45Z

packages/react-components/src/shadcn/components/ui/calendar.tsx

@@ -1,4 +1,3 @@
-"use client";


rublag-hs · 2025-10-10T10:07:43Z

packages/react-components/src/shadcn/components/ui/calendar.tsx

+				Dropdown: ({ className, ...props }) => {
+					return (
+					  <Select
+						defaultValue={props.value?.toString() || ''}
+						onValueChange={(val) => props.onChange?.({ target: { value: val } } as any)}
+					  >
+						<SelectTrigger className="relative w-full" size={"regular"}>
+						  <SelectValue />
+						</SelectTrigger>
+						<SelectContent className="max-h-60 overflow-auto" side="bottom" sideOffset={4}>
+						  {props.options?.map((opt) => (
+							<SelectItem key={opt.value} value={opt.value.toString()}>
+							  {opt.label}
+							</SelectItem>
+						  ))}
+						</SelectContent>
+					  </Select>
+					)
+				},


This is not related to data table. Move to separate commit.

added data table

3dd8dfa

kuzmordas requested a review from rublag-hs October 9, 2025 11:59

kuzmordas assigned kuzmordas, skylightis666 and lindenes Oct 9, 2025

cursor bot reviewed Oct 9, 2025

View reviewed changes

rublag-hs requested changes Oct 10, 2025

View reviewed changes

		[...Array(3)].map((_, index) => (
		<tr key={`skeleton-${index}`} className={cn(styles.dataRow, showZebraStripes && index % 2 === (showFilters ? 0 : 1) && styles.dataRowZebra)}>

Data Table PRO MAX 🔥 #28

Are you sure you want to change the base?

Data Table PRO MAX 🔥 #28

Uh oh!

Conversation

kuzmordas commented Oct 9, 2025

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

This is the final PR Bugbot will review for you during this billing cycle

Uh oh!

cursor bot Oct 9, 2025

Choose a reason for hiding this comment

Bug: Stale Closures in Date Picker Callbacks

Uh oh!

cursor bot Oct 9, 2025

Choose a reason for hiding this comment

Bug: Pagination Indexing Error

Uh oh!

cursor bot Oct 9, 2025

Choose a reason for hiding this comment

Bug: Stale Closure in onSelect Callback

Uh oh!

cursor bot Oct 9, 2025

Choose a reason for hiding this comment

Bug: Stale Closure in onSelect Callback

Uh oh!

cursor bot Oct 9, 2025

Choose a reason for hiding this comment

Bug: Pagination Logic Fails When Page Count Is Undefined

Uh oh!

cursor bot Oct 9, 2025

Choose a reason for hiding this comment

Bug: Filter Components Pass Incorrect Event Data

Uh oh!

rublag-hs left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Bug: Stale Closure in `onSelect` Callback

Bug: Stale Closure in `onSelect` Callback