Architecture Deep Dive

Layer Design

Application
└── TableProvider (Layer 2)
    └── DataTable / ClientSideTable (Layer 3)
        └── useResolvedTableConfig (merges L1–L4)
            ├── Toolbar
            ├── Table
            └── Pagination

Config Resolution Flow

DEFAULT_TABLE_CONFIG
  → deepMergeConfig(defaultConfig, providerConfig)
  → deepMergeConfig(mergedConfig, instanceConfig)
  → plugin loop (sorted by priority)
  → runDevValidation()
  → Final resolved TableConfig

Render Lifecycle

DataTable mount
  → useResolvedTableConfig()
  → useTableTranslations()
  → Read URL params
  → useReactTable()
  → Render Toolbar
      ├── View toggle
      ├── Search
      ├── Buttons
      └── Filter row
  → Render Main Content
      ├── Card view
      └── Table view
  → Render Pagination
  → Render Floating Bar

Feature Engine Layering

Features in the table system are controlled at three distinct levels, each capable of overriding the one before it:

• Config layer — features.* booleans declared in DEFAULT_TABLE_CONFIG, theTableProvider config, or instance-level config determine which capabilities are enabled globally or per-instance.
• Prop layer — Instance props passed directly to DataTable or ClientSideTable can override any config-level feature flag at render time without modifying shared config.
• Render layer — Conditional JSX inside components reads the resolved config and props to decide what to render, keeping the output tree minimal when features are disabled.

// Conditional rendering pattern
const resolvedConfig = useResolvedTableConfig(instanceConfig);

return (
  <>
    {resolvedConfig.features.search && <SearchInput />}
    {resolvedConfig.features.pagination && <Pagination />}
    {resolvedConfig.features.floatingBar && <FloatingBar />}
  </>
);

Component Dependency Graph

ClientSideTable
└── DataTable
    ├── DataTableToolbar
    │   ├── DataTableViewOptions
    │   ├── DataTableSearchInput
    │   ├── DataTableActionButtons
    │   └── DataTableFilterRow
    ├── DataTableAdvancedToolbar
    ├── DataTableMobileToolbar
    ├── DataTableCardView
    ├── Table
    │   └── DataTableColumnHeader
    ├── DataTablePagination
    └── DataTableFloatingBar

Extensibility Model

1. Config system — Provide a partial config to TableProvider or directly to a table instance to override any default behaviour without forking components.
2. Custom buttons — Pass an array of button definitions via the actionButtons prop to inject arbitrary toolbar actions alongside the built-in ones.
3. Custom cell renderers — Column definitions accept any React node as a cell renderer, giving full control over how individual cells are displayed.
4. Plugin system — Plugins are sorted by priority and applied during config resolution, allowing third-party or application- level logic to transform the final config before render.
5. Translation function — Supply a custom t function through config or TableProvider to integrate with any i18n library without coupling the table internals to a specific solution.
6. Component composition — All sub-components are exported and can be assembled manually outside of DataTable when the default layout does not fit the application's needs.