Skip to main content

Responsive Switching

Responsive switching uses a base content.mode and swaps in breakpoint-specific mode and modeConfig overrides from content.responsive.breakpoints. Use it when the same dataset should present differently at desktop, tablet, and mobile widths without duplicating content contracts.

Three breakpoint names are built in and resolved automatically based on window width:

NameApplies when
desktopwindow.innerWidth ≥ 1024 px
tablet768 px ≤ window.innerWidth < 1024 px
mobilewindow.innerWidth < 768 px

Custom breakpoint names are also supported — any key in breakpoints is matched against the current active breakpoint string.

Shared Behavior​

Actions, search, filtering, sorting, pagination, and groupings are defined once on zones.content and remain active regardless of which mode is active at the current breakpoint — see the reference pages:

Core Examples​

Each configuration below renders the same data in the mode active at that breakpoint. Resize your browser to see the actual switching behavior in a single config.

Desktop (table)​

The default mode at desktop width: a table with header and hover.

Name
Department
Status
Aurora ChenEngineeringactive
Mateo SilvaDesignpending
Priya NairOperationsinactive

Tablet (grid)​

Switches to a card grid at tablet width.

Name:Aurora Chen
Department:Engineering
Status:active
Name:Mateo Silva
Department:Design
Status:pending
Name:Priya Nair
Department:Operations
Status:inactive

Switches to a carousel at mobile width.

Name:Aurora Chen
Department:Engineering
Status:active
Name:Mateo Silva
Department:Design
Status:pending
Name:Priya Nair
Department:Operations
Status:inactive
zones: {
  content: {
    mode: 'table',           // desktop default
    item: { fields: [...] },
    modeConfig: {
      table: { showHeader: true, hover: true },
    },
    responsive: {
      breakpoints: {
        tablet: {
          mode: 'grid',
          modeConfig: {
            grid: { minItemWidth: '260px', gap: '0.75rem' },
          },
        },
        mobile: {
          mode: 'carousel',
          modeConfig: {
            carousel: { itemWidth: 260, showIndicators: true },
          },
        },
      },
    },
  },
}

Responsive Options Reference​

OptionValuesDefaultEffect
content.modeany mode namerequiredSets the default mode used at desktop width (and any width with no matching breakpoint override).
content.responsive.breakpointsRecord<string, { mode?, modeConfig? }>unsetDeclares width-specific overrides keyed by breakpoint name.
breakpoints.<name>.modeany mode nameunsetSwitches to a different mode at that breakpoint.
breakpoints.<name>.modeConfigpartial ModeConfigunsetOverrides the chosen mode's config at that breakpoint. Spread-merged on top of the base modeConfig.

Mode-Specific Caveats​

  • table mode is automatically demoted to grid on mobile (window.innerWidth < 768) even if no mobile breakpoint override is configured. This is a built-in safety fallback since table layout does not work well at narrow widths.
  • breakpoints.<name>.modeConfig is spread-merged on top of the base content.modeConfig, not replaced entirely. Only the keys you provide are overridden.
  • Each breakpoint modeConfig should match the mode selected at that breakpoint.
  • Shared contracts (actions, search, filtering, sorting, pagination) come from zones.content and apply across all breakpoints.

Coverage Summary​

Every responsive switching option is represented by at least one example or subsection on this page:

  • content.mode: Desktop (table)
  • content.responsive.breakpoints: full config snippet
  • breakpoints.<name>.mode: Tablet (grid), Mobile (carousel)
  • breakpoints.<name>.modeConfig: Tablet (grid), Mobile (carousel)

See Also​