Skip to content

DataTable System

Overview

The current shared table system is the Ant Design-based AntdTable in src/components/common/DataTable. It is used as the reusable foundation for large tabular screens such as Leads and Broadcasts, with column metadata carried by EnhancedColumnConfig.

Current Surface Area

  • Main components: AntdTable.tsx, TypedDataTable.tsx
  • Column and prop contracts: types.ts
  • Header/filter/sorting UI: components/
  • Hooks: useAdvancedSort, useColumnManager, useRowSelection, useServerSideTable, useVirtualization, useInfiniteScroll
  • Tests and stories exist under __tests__/ and stories/

Supported Capabilities

  • Column-level filter types: text, multiselect, daterange, numericrange, phone, simple-text
  • Sticky and resizable columns
  • Row selection
  • URL-synced table state unless explicitly disabled
  • Advanced multi-level sorting via SortLevel[]
  • Optional server-side mode through onDataChange
  • Optional virtualization and infinite scroll flags
  • Filter chip rendering and header filter controls

What Changed From The Older Docs

  • The shared component is not a generic UnifiedDataTable; the concrete implementation is AntdTable.
  • DataTable still exists as an import path alias in some places, but the underlying API is the Antd table wrapper with EnhancedColumnConfig.
  • Multi-level sorting is implemented in the shared hooks/components, not just planned.
  • Drag-and-drop support exists in the component stack via dnd-kit, but should be treated as implementation-specific rather than a guaranteed public feature for every screen.

Performance Notes

  • Use enableVirtualization and virtualItemHeight for long, fixed-height lists.
  • Use serverSide with onDataChange when filtering or sorting should be delegated to backend queries.
  • Filter changes are debounced in the shared hooks; avoid adding redundant page-level debounce layers.
  • Fixed widths generally behave better than auto-sizing on wide tables.

Migration Guidance

  • Prefer id over legacy key semantics in column definitions.
  • Put filter behavior in column config with filterType instead of bespoke page-local filter UIs where the shared table already supports it.
  • Keep page-specific business filters in the page hook, but let the shared table own presentation, chip rendering, and common interactions.

Primary Consumers

  • Leads column definitions: src/components/leads/config/
  • Broadcast table screens: src/pages/Broadcasts.tsx
  • Shared tests and examples: src/components/common/DataTable/__tests__, src/components/common/DataTable/examples