Displaying results as a table

This is for:


Using the atomic-result-list component, results can be displayed as a table.

An <code>atomic-result-list</code> component with <code>display="table"</code>

The basics

To make the atomic-result-list component display a table, the display attribute needs to be set to table.


Then, a result template with columns needs to be defined using multiple atomic-table-element components. Each column takes a label as a parameter, which will be a column’s heading. The contents of each atomic-table-element will be interpreted as the template to render in each cell of the column they represent.


If more than one atomic-result-template is present, then the template which matches the first result will be used. If you wish to customize rows on a per-result basis, we recommend that you use the atomic-field-condition component instead.

  • Table cells can use result sections by adding section elements as direct children of their atomic-table-element elements.

  • You can customize the contents of each cell by adding a <style> tag as a direct child of its atomic-table-element.

<atomic-result-list display="table">
      <atomic-table-element label="Product name">
      <atomic-table-element label="Cost">
        <atomic-result-number field="price">
          <atomic-format-currency currency="USD"></atomic-format-currency>
      <atomic-table-element label="Specifications">
        <atomic-field-condition must-match-category="Movies & TV Shows">
            <span>Genre: <atomic-result-text field="genre"></atomic-result-text></span>
            <span>Duration: <atomic-result-text field="duration"></atomic-result-text></span>
        <atomic-field-condition must-match-category="Gaming Laptops">
            <span>Condition: <atomic-result-text field="condition"></atomic-result-text></span>
            <span>Brand: <atomic-result-text field="brand"></atomic-result-text></span>

Advanced customization

Alternating rows

It’s possible to display alternating row colors by using the result-table-row-odd or result-table-row-even shadow parts, as in the following:

  atomic-result-list::part(result-table-row-even) {
    background-color: var(--atomic-neutral-light);

A result table with alternating row

Customizing the header, cells, and other elements

The result table exposes many shadow parts for customization. For more information, see atomic-result-list.