Resource Layouts

@fleetbase/ember-ui ships four pre-built page layouts for rendering a resource list. They are higher-level wrappers around <Table>, search, filters, bulk actions, and pagination — drop one in and you get a complete resource page.

Tabular Example

<Layout::Resource::Tabular
  @title="Drivers"
  @searchQuery={{this.q}}
  @onSearch={{this.onSearch}}
  @onReload={{this.onReload}}
  @columns={{this.columns}}
  @rows={{this.rows}}
  @table={{this.table}}
  @onRowClick={{this.openDriver}}
/>

<Layout::Resource::Tabular> renders:

• Section header with @title, search input, refresh button
• Filters picker (driven by columns marked filterable)
• Visible-column picker (let the user hide/show columns)
• Bulk-action dropdown (when rows are selected)
• The actual <Table> with sortable columns and pagination
• Optional bulk-search dropdown for advanced multi-field search

Common Arguments

Plus a long tail of *Class and *Width overrides for each subsection.

Extra Header Controls

Use the <:header> block for controls that belong in the header before the standard ones, such as a mode toggle:

<Layout::Resource::Tabular @title="API Keys" @data={{@model}} @columns={{this.columns}}>
  <:header>
    <Toggle @isToggled={{this.isTestMode}} @onToggle={{this.toggleTestMode}} @label="Test mode" />
  </:header>
</Layout::Resource::Tabular>

Extension Registries

Pass @registry and other extensions can extend the view without changing it:

Cells, filters and toolbar components that other extensions register can come from their own engines, as ExtensionComponents. The shared renderers <Layout::Resource::ActionButtons @buttons> and <Layout::Resource::BulkActions @actions> are available for headers you lay out yourself. See Making Views Extensible.

Real-World Usage

Look at any of the resource list controllers in fleet-ops or storefront — they all use <Layout::Resource::Tabular> as their root template:

• fleet-ops/addon/templates/management/drivers/index.hbs
• fleet-ops/addon/templates/management/vehicles/index.hbs
• storefront/addon/templates/networks/index.hbs

Studying any of these is the fastest way to see the full set of arguments in action.

Source