Bug: DataTable Pagination Dropdown Synchronization Issue

[christoph2806]

@etherisc/ui-kit Bug Report: DataTable Pagination Dropdown Synchronization Issue

Bug Report for: @etherisc/ui-kit v0.6.0
Submitted by: Web Application Team
Priority: High
Type: Bug

Problem Description

The DataTable component's pagination "rows per page" dropdown selector has a critical synchronization issue that prevents proper pagination control functionality.

Observed Behavior

1. Default Display Issue: Table defaults to showing 10 rows, but dropdown indicator incorrectly stays at the first option in pageSizeOptions array
2. Selection Not Working: When user selects 25 rows from dropdown, table correctly expands to show 25 rows
3. Dropdown State Broken: Dropdown visual indicator remains at previous selection (e.g., shows "10" even when 25 rows are displayed)
4. Cannot Return to Previous: User cannot switch back to 10 rows per page - selection appears broken

Expected Behavior

• Dropdown should visually reflect the current pageSize state
• User should be able to freely switch between all pageSizeOptions values
• Table display and dropdown indicator should stay synchronized at all times

Environment Details

• @etherisc/ui-kit: v0.6.0
• @tanstack/react-table: v8.21.3
• React: v19.1.0
• Project: Next.js web application with TanStack Table integration

Reproduction Steps

const paginationConfig = createSmartPaginationConfig(organizations.length, 'STANDARD');

<DataTable
  data={organizations}
  columns={columns}
  enableSorting={true}
  enableResizing={true}
  pagination={paginationConfig.config}
  loading={false}
/>

Where paginationConfig.config equals:

{
  pageSize: 10,
  showSizeSelector: true,
  showPageInfo: true,
  showNavigation: true,
  pageSizeOptions: [10, 25, 50, 100],
  enableFastNavigation: false,
  enableJumpToPage: false,
}

Steps to reproduce:

1. Load table with 20+ items (triggers pagination)
2. Observe default shows 10 rows, dropdown shows first option
3. Select "25" from dropdown
4. ✅ Table correctly shows 25 rows
5. ❌ Dropdown indicator still shows "10" or first option
6. ❌ Cannot select "10" from dropdown to return to 10 rows

Technical Investigation

Current DataTable Interface Analysis

Based on our investigation of the ui-kit 0.6.0 DataTable component, the interface appears to support client-side pagination through:

interface DataTableProps<TData extends object> {
  // Existing props
  data: TData[];
  columns: ColumnDef<TData>[];
  
  // Pagination props (0.6.0)
  pagination?: PaginationConfig | false;
  
  // Missing: TanStack-compatible state management
  // These may be missing or not properly implemented:
  manualPagination?: boolean;
  pageCount?: number;
  rowCount?: number;
  onPaginationChange?: (pagination: PaginationState) => void;
  state?: { pagination?: PaginationState };
}

Root Cause Hypothesis

The issue likely stems from one of these component design problems:

1. Internal State Management: DataTable might not be properly managing internal pagination state for client-side pagination
2. Missing TanStack Integration: Component may not be properly implementing TanStack Table's state.pagination and onPaginationChange pattern
3. Dropdown State Sync: The pagination dropdown may not be correctly synchronized with the table's internal pagination state

Failed Workarounds

We attempted these fixes without success:

1. Default PageSize Alignment

// Changed default from 25 to 10 to match dropdown
const config = {
  pageSize: 10, // ❌ Did not fix dropdown sync
  pageSizeOptions: [10, 25, 50, 100]
};

2. Manual State Management

// Attempted external state control
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });

<DataTable
  state={{ pagination }}
  onPaginationChange={setPagination}
  // ❌ Component doesn't accept these props in current interface
/>

Expected Fix

The DataTable component should handle pagination state internally for client-side pagination scenarios, similar to how TanStack Table works out of the box:

// This should work automatically without external state management
<DataTable
  data={data}
  columns={columns}
  pagination={{
    pageSize: 10,
    pageSizeOptions: [10, 25, 50, 100],
    showSizeSelector: true
  }}
/>

Technical Requirements

Must Have

1. Internal State Management: DataTable should manage pageIndex and pageSize state internally for client-side pagination
2. Dropdown Synchronization: Pagination dropdown must visually reflect current pageSize state
3. Bidirectional Updates: Changes to dropdown should update table, table state should update dropdown
4. TanStack Compatibility: Should follow TanStack Table's pagination patterns

Should Have

1. State Override Option: Allow external state management via state and onPaginationChange props for advanced use cases
2. Reset Capability: Provide way to reset pagination to initial state
3. Validation: Ensure pageSize is always a valid option from pageSizeOptions

Impact Assessment

• Severity: High - Core pagination functionality is broken
• User Experience: Poor - Users cannot control table pagination properly
• Scope: All tables using client-side pagination with dropdown selector
• Developer Experience: Poor - Requires manual workarounds that shouldn't be necessary

Suggested Priority

High Priority - This represents a fundamental component behavior that developers expect to work out of the box. Manual state management for basic pagination defeats the purpose of having a reusable DataTable component.

Additional Context

Our team has successfully implemented comprehensive DataTable patterns using your ui-kit, including:

• Smart pagination configuration system
• Configurable pagination presets (SIMPLE/STANDARD/COMPLEX/HEAVY)
• Performance optimizations for different data complexity levels

This pagination dropdown bug is the last blocker preventing us from completing our DataTable modernization initiative.

Related Issues

• This may be related to broader client-side pagination state management in the DataTable component
• Could impact other pagination controls beyond just the dropdown selector

---

Contact: Web Application Team
Available for: Further testing, providing reproduction cases, or collaborating on the fix

[christoph2806]

Fixed in PR #63 - DataTable pagination dropdown synchronization has been resolved with enhanced smart pagination configuration that ensures pageSize is always included in pageSizeOptions, implemented automatic deduplication, and applied consistent sorting.