All updates
ProductionQAFrontend

Data Grid Pagination Reset on Search/Filter, Customizable Header Icon Colors, and Theme Renaming

PR #715pixbox-supportNov 4, 2025 · 12:50 UTC
QANov 4, 2025
ProductionNov 4, 2025

Executive summary

This QA release bundles two data-grid improvements. First, applying a search term or column filter (or clearing all filters) now always returns the grid to the first page, so users see correct results instead of a stale or empty page. Second, themes now include a dedicated color for the sort and filter icons in grid headers, and the built-in theme presets were renamed from "DSM Original/Horizon/Lumina/Midnight" to simply "Original/Horizon/Lumina/Midnight."

Why this was needed

When a user was viewing page 3 of a grid and then typed a search or applied a column filter, the grid kept its current page index. Because filtered/searched result sets are smaller, the user could land on a page that no longer exists and see empty or stale data. Separately, sort and filter icons in grid headers reused generic muted-foreground colors that did not always provide enough contrast across the different themes (notably the dark Horizon header), and the preset names carried a redundant "DSM" prefix.

Client / user impact

Users get consistent, predictable results: any search, column filter, or clear-all action snaps the grid back to page one so the matching rows are immediately visible. Administrators customizing themes gain a new "Data Grid Header Icon" color control, and each built-in theme ships with a sensible icon color tuned for its header background (e.g., white icons on Horizon's dark blue header). Theme preset labels are cleaner and product-neutral.

Technical scope

  • src/components/common/data-grid.tsx: in the debounced search effect, in handleFilterChange, and in handleClearAll, the grid now calls onPaginationChange(0, pageSize) (only when pageIndex !== 0) before propagating the change; effect/callback dependency arrays updated accordingly (consolidates feature PR #713 and related fix commits).
  • New theme token grid-header-icon added: declared in settings-theme.types.ts, listed in THEME_TOKENS, exposed as a CUSTOM_THEME_FIELDS editor control (text-grid-header-icon), and given per-preset values in Original, Horizon, Midnight, and Lumina token maps (feature PR #714).
  • src/app/globals.css: defines the --grid-header-icon default and a .text-grid-header-icon utility class.
  • Grid header sort icons (ArrowUp/ArrowDown/ArrowUpDown) and the column filter trigger now use text-grid-header-icon instead of hardcoded muted-foreground classes.
  • Theme preset labels/descriptions renamed: "DSM Original/Horizon/Lumina/Midnight" -> "Original/Horizon/Lumina/Midnight" (preset id values unchanged, so saved selections are unaffected).

Risk & mitigation

Low risk; changes are scoped to the shared data-grid component and theme configuration. The pagination reset is guarded by a pageIndex !== 0 check to avoid redundant fetches. Main watch item is that the reset fires across every grid that uses this shared component, so all list/grid screens should behave consistently. The new icon token defaults are defined for all presets; custom themes saved before this release will fall back to the default --grid-header-icon value.

QA validation focus

  • On a multi-page grid, navigate to a later page, then type a search term: confirm the grid jumps to page 1 and shows matching rows (no empty page).
  • Repeat for applying a single column filter and for the "Clear all filters" action: each should return to page 1.
  • Verify pagination is not needlessly reset when already on page 1.
  • Switch between Original, Horizon, Midnight, and Lumina themes and confirm sort/filter header icons are clearly visible against each header background (especially Horizon's dark header).
  • In theme customization, change the new "Data Grid Header Icon" color and confirm grid header sort/filter icons update.
  • Confirm theme picker shows the renamed labels (Original, Horizon, Lumina, Midnight) and that a previously saved theme selection still loads correctly.