Skip to main content

Table Mode

Table mode renders data as a structured grid with column headers, sortable columns, and row-level comparisons. It is the best choice when users need to scan many records across multiple fields simultaneously.

The primary structural decision is type:

  • traditional — classic row/column table with optional striping, hover, and separators
  • rich-cells — multi-column cell blocks per row; better for records with many fields at a glance

Shared Behavior​

Shared content behavior remains canonical in Reference:

For field-level controls (label, width, alignment, renderAs, groupable, sortable), see Field Config.

Core Examples​

Traditional Table​

Default table shape with header, hover, alternating rows, and row separators.

Name
Team
Status
Aurora ChenDesignactive
Mateo SilvaPlatformpending
Priya NairOperationsinactive
modeConfig: {
  table: {
    type: 'traditional',
    alternatingRows: true,
    hover: true,
    showHeader: true,
    rowSeparator: true,
  },
}

Rich Cells​

The same dataset with rich-cells layout — multiple fields per row block, no column header.

Name:Aurora Chen
Team:Design
Status:active
Owner:Leah
Priority:P1
Name:Mateo Silva
Team:Platform
Status:pending
Owner:Samir
Priority:P2
Name:Priya Nair
Team:Operations
Status:inactive
Owner:Iris
Priority:P3
Name:Niko Reyes
Team:Design
Status:active
Owner:Leah
Priority:P1
modeConfig: {
  table: {
    type: 'rich-cells',
    columns: 2,
    showHeader: false,  // rich-cells has no meaningful column header
    hover: true,
  },
}

Presentation Toggles​

A minimal table surface with hover, header, striping, and row separators all disabled.

Aurora ChenDesignactive
Mateo SilvaPlatformpending
Priya NairOperationsinactive
modeConfig: {
  table: {
    type: 'traditional',
    hover: false,
    showHeader: false,
    alternatingRows: false,
    rowSeparator: false,
  },
}

Conditional Row Styling​

Each row is colored based on its status value via conditionalBackgroundColor.

Name
Team
Status
Aurora ChenDesignactive
Mateo SilvaPlatformpending
Priya NairOperationsinactive
modeConfig: {
  table: {
    type: 'traditional',
    alternatingRows: false,
    conditionalBackgroundColor: (entity) => {
      if (entity.status === 'active') return { backgroundColor: '#16a34a', color: '#f0fdf4' };
      if (entity.status === 'pending') return { backgroundColor: '#d97706', color: '#fffbeb' };
      return { backgroundColor: '#4f46e5', color: '#eef2ff' };
    },
  },
}

Grouping UI Controls​

Grouping is configured under zones.content.groupings; the canonical contract and cross-mode behavior live in Content Config: Grouping.

This section is intentionally table-specific and focuses on grouping interaction surfaces that apply only in table mode.

OptionValuesDefaultEffect
showDropdownControltrue or falsefalseShows the group-by dropdown control above the table.
showHeaderControlstrue or falsetrueShows grouping icons in header cells for groupable fields.

Dropdown visibility still requires at least one field with groupable: true so the control has selectable columns.

Only the dropdown is shown. Header grouping icons are disabled.

Name
Team
Status
Score
Team: Design (2)
Team: Platform (2)
Team: Operations (2)
// In zones.content.groupings:
{ fieldKey: 'team', showDropdownControl: true, showHeaderControls: false }

Header Icons Only​

Only header grouping icons are shown on groupable columns.

Name
Team
Status
Score
Team: Design (2)
Team: Platform (2)
Team: Operations (2)
// In zones.content.groupings:
{ fieldKey: 'team', showHeaderControls: true }

Both grouping control surfaces are enabled.

Name
Team
Status
Score
Team: Design (2)
Team: Platform (2)
Team: Operations (2)
// In zones.content.groupings:
{ fieldKey: 'team', showDropdownControl: true, showHeaderControls: true }

Hook Callbacks​

Sort headers and grouping controls trigger the hook callbacks below. Open the browser console to see output.

preRowRender receives each entity before it renders and returns the (optionally transformed) entity — useful for normalizing display values or injecting computed fields without modifying the source data.

Sort and group interactions trigger table hook callbacks — check the browser console.

Name
Team
Status
Score
Team: Design (2)
Team: Platform (1)
Team: Operations (1)
modeConfig: {
  table: {
    hooks: {
      onSort: (field, direction) => console.log('sort changed', field, direction),
      onGroup: (field) => console.log('group changed', field),
      onGroupToggle: (groupValue, isExpanded) => console.log('group toggle', groupValue, isExpanded),
      // preRowRender: (entity) => ({ ...entity, name: entity.name.toUpperCase() }),
    },
  },
}

See Also​