Skip to main content

​
Overview

The tabs component organizes and displays multiple related but independent data views or analysis topics in a limited space. Content layering via tab switching keeps information structured while saving page real estate. Common use cases:
  • Multi-dimensional comparison: analyze and cross-compare a core metric (e.g., sales) across different dimensions (product, region, time period).
  • Multi-view display: in one dashboard, customize dedicated views for different business teams or roles (executives, ops, marketing).
  • Content navigation and organization: in dashboard apps or kiosks, separate complex modules with tabs — “Overview”, “Trends”, “Detail” — so users can locate info fast.

​
Workflow

​
Add a tabs component

  1. Open the AI Table app module.
  2. From the left nav, pick the page.
  3. Click + Add component at the bottom-left, then Tabs.

​
Basic config

After adding, in the right panel Basic config:
  • Preset styles
    • 3 preset styles for tab display.
  • Tab management
    • Add tab: click + Add tab — up to 20 tabs.
    • Add components to a tab: two ways. First, like the combo layout — drag a component into the tab. Second, click the icon on the tab and pick Add component to batch-select existing components on the page.
    • Delete tab: click the icon on the tab, pick Delete.
    • Rename tab: click the tab name to rename inline. Cannot be empty.
    • Reorder tabs: drag the handle on the left of a tab up/down.
  • Switch behavior
    • Tab position: left, center, or right.

​
Custom config

In the right panel Custom config, fine-tune visuals and interaction:
  • Background color: component background.
  • Border color: from swatch.
  • Border thickness: from dropdown.
  • Selected color: highlight color for the active tab.
  • Unselected color: default color for inactive tabs.

​
Component management

  • Action menu Select the component, click the icon at the top-right:
    • Configure: open config panel.
    • Duplicate: copy on the same page.
    • Copy to: copy to another page in this app.
    • Delete: remove from the page.
  • Resize and move
    • Resize: drag the bottom-right handle.
    • Move: hover, hold, drag.

​
FAQ

​
Q: Can I nest tabs / combo layouts inside tabs?

A: No.

​
Q: Max number of tabs?

A: 20.