fix(grid): rows-per-page selector honors pagination.pageSizeOptions; drop duplicate ListView <select> (#1919)

* fix(grid): rows-per-page selector honors pagination.pageSizeOptions; drop duplicate ListView <select>

The DataTable pager hardcoded its rows-per-page choices to 5/10/20/50/100,
ignoring view metadata, while ListView separately rendered its own native
<select> from pagination.pageSizeOptions. For a grid that produced TWO
page-size controls with different option sets.

- data-table: add pageSizeOptions prop; the selector renders the configured
  options (current pageSize merged in, de-duped, sorted) instead of the
  hardcoded list.
- ObjectGrid: forward schema.pagination.pageSizeOptions to the DataTable so
  the single server-driven pager exposes the configured choices.
- ListView: suppress the redundant native <select> for grid view (the
  DataTable pager owns it); keep it only for pager-less views (gallery/
  kanban/calendar).
- types/zod: declare DataTableSchema.pageSizeOptions.

Follow-up to #1916 (#2212). Verified in browser against a 3125-row plan grid:
single selector with 50/100/200/500, switching 500 -> 7 pages, last page
loads the 125-row remainder.

* fix(grid): align selection checkbox column header with body; pad pager

- selection checkbox: header (px-4) and body (px-3 from cellClassName) cells
  had mismatched left padding, so the header checkbox sat ~4px right of the
  body checkboxes. Force both selection cells to px-0 + text-center so the
  checkbox centers in the column identically (verified: both at x=264).
- pagination footer: the rows-per-page / page-info row had no horizontal
  padding and sat flush against the table edge. Add px-3 sm:px-4 py-2 to
  match the table cells and the grouped pager.

* fix(data-table): restore left gutter on selection column

The previous px-0 fix aligned the header/body checkboxes but removed the
column's left padding entirely, leaving the checkboxes flush against the
table's left border. Use px-3 (matching the data cells) on both the header
and body selection cells: identical padding keeps the checkboxes aligned
while restoring a 12px left gutter.

* fix(grid): align column headers with body cell padding

Root cause of the header/content misalignment: ObjectGrid's applyDensity
gave every body cell px-3 (12px) via rowHeightCellClass but left the
header at the primitive <th> default px-4 (16px), so every left-aligned
header label sat 4px to the right of its data. Add px-3 to the header
className in applyDensity (and the right-pinned branch) so headers share
the body's horizontal padding. Also align the row-number (#) header to
px-3 in data-table. Verified: all 16 columns now match (0 mismatches).

Author: baozhoutao

packages/components/src/__tests__/data-table-manual-pagination.test.tsx

@@ -58,6 +58,29 @@ describe('data-table — manual (server-side) pagination', () => {
     expect(bodyRows.length).toBe(5);
   });
 
+  it('renders the configured pageSizeOptions in the rows-per-page selector (no built-in 5/10/20)', () => {
+    // With pageSizeOptions provided, the selector must offer exactly those
+    // choices (plus the active pageSize merged in) — NOT the hardcoded
+    // 5/10/20/50/100 list. This is what lets a single server-driven pager show
+    // the view's 50/100/200/500 without a second native <select> being rendered.
+    const { getAllByRole } = renderComponent({
+      ...baseSchema,
+      pageSize: 100,
+      pageSizeOptions: [50, 100, 200, 500],
+    });
+    // Radix Select renders <SelectItem> options; the trigger combobox shows the
+    // active value. Open the listbox by clicking the combobox.
+    const combos = getAllByRole('combobox');
+    fireEvent.click(combos[0]);
+    const options = Array.from(document.querySelectorAll('[role="option"]')).map(
+      (o) => o.textContent?.trim(),
+    );
+    expect(options).toEqual(['50', '100', '200', '500']);
+    expect(options).not.toContain('5');
+    expect(options).not.toContain('10');
+    expect(options).not.toContain('20');
+  });
+
   it('reports navigation via onPageChange instead of mutating internal state', () => {
     const onPageChange = vi.fn();
     const { container } = renderComponent({ ...baseSchema, onPageChange });

packages/components/src/renderers/complex/data-table.tsx

@@ -165,6 +165,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     data: rawData = [],
     pagination = true,
     pageSize: initialPageSize = 10,
+    pageSizeOptions,
     manualPagination = false,
     rowCount,
     page: controlledPage,
@@ -343,6 +344,19 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     }
   };
 
+  // Rows-per-page choices: caller-supplied options (e.g. view metadata's
+  // pagination.pageSizeOptions) or the built-in fallback. The active pageSize
+  // is always merged in and the list de-duplicated + sorted so the selector can
+  // display the current value even when it is not one of the configured steps.
+  const pageSizeChoices = React.useMemo(() => {
+    const base = pageSizeOptions && pageSizeOptions.length > 0
+      ? pageSizeOptions
+      : [5, 10, 20, 50, 100];
+    return Array.from(new Set([...base, pageSize]))
+      .filter((n) => Number.isFinite(n) && n > 0)
+      .sort((a, b) => a - b);
+  }, [pageSizeOptions, pageSize]);
+
   /**
    * Generates a unique identifier for each row to maintain stable selection state
    * across pagination and sorting operations.
@@ -803,15 +817,15 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
           <TableHeader className="sticky top-0 bg-background z-10">
             <TableRow>
               {selectable && (
-                <TableHead className={cn("w-10 bg-background", frozenColumns > 0 && "sticky left-0 z-20")}>
+                <TableHead className={cn("w-10 bg-background px-3", frozenColumns > 0 && "sticky left-0 z-20")}>
                   <Checkbox
                     checked={allPageRowsSelected ? true : somePageRowsSelected ? 'indeterminate' : false}
                     onCheckedChange={handleSelectAll}
                   />
                 </TableHead>
               )}
               {showRowNumbers && (
-                <TableHead className={cn("w-10 bg-background text-center", frozenColumns > 0 && "sticky z-20")} style={frozenColumns > 0 ? { left: selectable ? 40 : 0 } : undefined}>
+                <TableHead className={cn("w-10 bg-background text-center px-3", frozenColumns > 0 && "sticky z-20")} style={frozenColumns > 0 ? { left: selectable ? 40 : 0 } : undefined}>
                   <span className="text-xs text-muted-foreground">#</span>
                 </TableHead>
               )}
@@ -973,7 +987,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       }}
                     >
                       {selectable && (
-                        <TableCell className={cn(cellClassName, frozenColumns > 0 && "sticky left-0 z-10 bg-background", selectionStyle === 'hover' && "relative")}>
+                        <TableCell className={cn(cellClassName, "px-3", frozenColumns > 0 && "sticky left-0 z-10 bg-background", selectionStyle === 'hover' && "relative")}>
                           {selectionStyle === 'hover' ? (
                             <div className={cn("transition-opacity", isSelected ? "opacity-100" : "opacity-0 group-hover/row:opacity-100")}>
                               <Checkbox
@@ -1166,7 +1180,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
 
       {/* Pagination — hidden when only one page (no controls would be actionable) */}
       {pagination && sortedData.length > 0 && totalPages > 1 && (
-        <div className="flex flex-col sm:flex-row items-center justify-between gap-2">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-2 px-3 sm:px-4 py-2">
           <div className="flex items-center gap-2">
             <span className="text-xs sm:text-sm text-muted-foreground">{t('table.rowsPerPage')}:</span>
             <Select
@@ -1177,11 +1191,9 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="5">5</SelectItem>
-                <SelectItem value="10">10</SelectItem>
-                <SelectItem value="20">20</SelectItem>
-                <SelectItem value="50">50</SelectItem>
-                <SelectItem value="100">100</SelectItem>
+                {pageSizeChoices.map((n) => (
+                  <SelectItem key={n} value={n.toString()}>{n}</SelectItem>
+                ))}
               </SelectContent>
             </Select>
           </div>

packages/plugin-grid/src/ObjectGrid.tsx

@@ -1419,8 +1419,12 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
             ? 'px-3 py-3.5 h-16 text-sm leading-relaxed'
             : 'px-3 py-1.5 h-11 text-[13px] leading-normal';
 
+  // Body cells get `px-3` from rowHeightCellClass; give the header the same
+  // horizontal padding so header labels line up exactly with the cell content
+  // below them (the primitive <th> default is px-4, which is 4px wider).
   const applyDensity = (col: any) => ({
     ...col,
+    className: ['px-3', col.className].filter(Boolean).join(' '),
     cellClassName: [rowHeightCellClass, col.cellClassName].filter(Boolean).join(' '),
   });
 
@@ -1430,7 +1434,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
         ...unpinnedCols.map(applyDensity),
         ...pinnedRightCols.map((col: any) => ({
           ...applyDensity(col),
-          className: [col.className, rightPinnedClasses].filter(Boolean).join(' '),
+          className: ['px-3', col.className, rightPinnedClasses].filter(Boolean).join(' '),
           cellClassName: [rowHeightCellClass, col.cellClassName, rightPinnedClasses].filter(Boolean).join(' '),
         })),
       ]
@@ -1578,6 +1582,11 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     data,
     pagination: paginationEnabled,
     pageSize: manualPaginationOn ? manualPageSize : pageSize,
+    // Rows-per-page selector options sourced from view metadata
+    // (schema.pagination.pageSizeOptions). When absent the DataTable falls back
+    // to its built-in list. This is what makes the single, server-driven pager
+    // expose the configured 50/100/200/500 choices instead of a second control.
+    pageSizeOptions: schema.pagination?.pageSizeOptions,
     // In server mode `data` IS the current page; tell DataTable to render it
     // as-is and drive paging via the callbacks below using the real match total.
     manualPagination: manualPaginationOn,

packages/plugin-list/src/ListView.tsx

@@ -2314,7 +2314,12 @@ export const ListView = React.forwardRef<ListViewHandle, ListViewProps>(({
               {t('list.dataLimitReached', { limit: effectivePageSize })}
             </span>
           )}
-          {schema.pagination?.pageSizeOptions && schema.pagination.pageSizeOptions.length > 0 && (
+          {/* Grid view delegates the rows-per-page selector to the DataTable's
+              own server-driven pager (ObjectGrid passes pagination.pageSizeOptions
+              straight through). Rendering a second native <select> here produced a
+              duplicate control, so for grid we suppress it and only keep this
+              fallback selector for pager-less views (gallery/kanban/calendar). */}
+          {currentView !== 'grid' && schema.pagination?.pageSizeOptions && schema.pagination.pageSizeOptions.length > 0 && (
             <div className="ml-auto flex items-center gap-2">
               <span>{t('table.rowsPerPage', { defaultValue: 'Rows per page' })}</span>
               <select

packages/plugin-list/src/__tests__/ListView.test.tsx

@@ -1574,8 +1574,16 @@ describe('ListView', () => {
   // ============================
   // pageSizeOptions UI
   // ============================
+  // NOTE: For the GRID view the rows-per-page selector now lives in the
+  // DataTable's own server-driven pager (ObjectGrid forwards
+  // pagination.pageSizeOptions straight through), so ListView no longer renders
+  // its native <select data-testid="page-size-selector"> for grids — that fixed
+  // a duplicate-control bug. The native fallback selector below is therefore
+  // exercised through a NON-grid view (gallery), which has no DataTable pager.
+  // The grid combobox option list is covered in
+  // components/data-table-manual-pagination.test.tsx.
   describe('pageSizeOptions', () => {
-    it('should render page size selector when pageSizeOptions is provided', async () => {
+    it('should render page size selector when pageSizeOptions is provided (non-grid view)', async () => {
       const mockItems = [
         { id: '1', name: 'Alice', email: 'alice@test.com' },
       ];
@@ -1584,7 +1592,7 @@ describe('ListView', () => {
       const schema: ListViewSchema = {
         type: 'list-view',
         objectName: 'contacts',
-        viewType: 'grid',
+        viewType: 'gallery',
         fields: ['name', 'email'],
         pagination: { pageSize: 25, pageSizeOptions: [10, 25, 50, 100] },
       };
@@ -1973,7 +1981,7 @@ describe('ListView', () => {
       const schema: ListViewSchema = {
         type: 'list-view',
         objectName: 'contacts',
-        viewType: 'grid',
+        viewType: 'gallery',
         fields: ['name', 'email'],
         pagination: { pageSize: 25, pageSizeOptions: [10, 25, 50] },
       };
@@ -1999,7 +2007,7 @@ describe('ListView', () => {
       const schema: ListViewSchema = {
         type: 'list-view',
         objectName: 'contacts',
-        viewType: 'grid',
+        viewType: 'gallery',
         fields: ['name', 'email'],
         pagination: { pageSize: 25, pageSizeOptions: [10, 25, 50, 100] },
       };
@@ -2033,7 +2041,7 @@ describe('ListView', () => {
       const schema: ListViewSchema = {
         type: 'list-view',
         objectName: 'contacts',
-        viewType: 'grid',
+        viewType: 'gallery',
         fields: ['name', 'email'],
         pagination: { pageSize: 10, pageSizeOptions: [10, 25, 50, 100] },
       };

packages/types/src/data-display.ts

@@ -344,6 +344,13 @@ export interface DataTableSchema extends BaseSchema {
    * @default 10
    */
   pageSize?: number;
+  /**
+   * Options offered in the "rows per page" selector. When omitted the table
+   * falls back to its built-in list (5/10/20/50/100). The current `pageSize`
+   * is always merged in so the selector can show the active value even if it
+   * is not one of the configured options.
+   */
+  pageSizeOptions?: number[];
   /**
    * Server-side ("manual") pagination. When true, `data` is treated as the
    * already-fetched current page (not sliced locally), `rowCount` provides the

packages/types/src/zod/data-display.zod.ts

@@ -137,6 +137,7 @@ export const DataTableSchema = BaseSchema.extend({
   data: z.array(z.any()).describe('Table data'),
   pagination: z.boolean().optional().describe('Enable pagination'),
   pageSize: z.number().optional().describe('Default page size'),
+  pageSizeOptions: z.array(z.number()).optional().describe('Options for the rows-per-page selector (defaults to 5/10/20/50/100).'),
   searchable: z.boolean().optional().describe('Enable search'),
   selectable: z.boolean().optional().describe('Enable row selection'),
   sortable: z.boolean().optional().describe('Enable sorting'),