Display data clearly in rows and columns, helping users view, analyze, and compare information. Automatically renders as a list on small screens and a table on large ones.

Requirements

Requires OctantisEventProxy hook. See Install Hooks README.

Example

<.s_table
  rows=[
    %{
      name:  "John Doe",
      email: "john.doe@example.com",
      phone: "123-456-7890"
    },
    %{
      name:  "Jane Doe",
      email: "jane.doe@example.com",
      phone: "123-456-7890"
    },
    %{
      name:  "Brandon Doe",
      email: "brandon.doe@example.com"
      phone: "123-456-7890"
    },
  ]
>
  <:s_table_header>Name</:s_table_header>
  <:s_table_header>Email</:s_table_header>
  <:s_table_header>Phone</:s_table_header>
  <:s_table_cell :let={row}>{row.name}</:s_table_cell>
  <:s_table_cell :let={row}>{row.email}</:s_table_cell>
  <:s_table_cell :let={row}>{row.phone}</:s_table_cell>
</.s_table>

See

• https://shopify.dev/docs/api/app-home/polaris-web-components/structure/table

Attributes

• id (:string) (required) - A unique identifier for the element.

• has_next_page (:string) - Whether there's an additional page of data.

• has_previous_page (:string) - Whether there's a previous page of data.

• loading (:string) - Whether the table is in a loading state, such as initial page load or loading the next page in a paginated table. When true, the table could be in an inert state, which prevents user interaction.

• paginate (:string) - Whether to use pagination controls.

• variant (:string) - "auto" | "list"

  Sets the layout of the Table.

  • list: The Table is always displayed as a list.
  • table: The Table is always displayed as a table.
  • auto: The Table is displayed as a table on wide devices and as a list on narrow devices.

• rows (:list) - A list of rows to be passed to the columns.

• nextpage (:string) - CallbackEventListener<typeof tagName> | null.

• previouspage (:string) - CallbackEventListener<typeof tagName> | null.

• click_delegate (:string) - The ID of an interactive element (e.g. s-link) in the row that will be the target of the click when the row is clicked. This is the primary action for the row; it should not be used for secondary actions.

  This is a click-only affordance, and does not introduce any keyboard or screen reader affordances. Which is why the target element must be in the table; so that keyboard and screen reader users can interact with it normally.

• Global attributes are accepted.

Slots

• filters - HTMLElement

  Additional filters to display in the table. For example, the s-search-field component can be used to filter the table data.

• s_table_header - Display column names at the top of a table.

• s_table_cell - Display data within a cell in a table row.