Examples

Select filters a table

Choosing an environment in the header select narrows the deployment table below it without a reload.

Preview

Deployments

Deployment	Status	Finished
storefront	Ready	June 26, 10:41
api	Ready	June 26, 09:58
docs	Failed	June 25, 22:14

HTML

<bs:bsui-stack direction="column" gap="3" align="stretch">
  <bs:bsui-stack direction="row" gap="3" align="center" justify="space-between">
    <bs:bsui-text content="Deployments" variant="title" tag="h3" />
    <bs:bsui-select name="environment" defaultValue="production" placeholder="Environment">
      <bs:bsui-select-trigger />
      <bs:bsui-select-popup>
        <bs:bsui-select-option value="all" label="All environments" />
        <bs:bsui-select-option value="production" label="Production" />
        <bs:bsui-select-option value="preview" label="Preview" />
      </bs:bsui-select-popup>
    </bs:bsui-select>
  </bs:bsui-stack>
  <bs:bsui-table sortable="false">
    <bs:bsui-table-header>
      <bs:bsui-table-header-cell columnId="deployment" label="Deployment" sortable="false" />
      <bs:bsui-table-header-cell columnId="status" label="Status" sortable="false" />
      <bs:bsui-table-header-cell columnId="finished" label="Finished" sortable="false" />
    </bs:bsui-table-header>
    <bs:bsui-table-body>
      <bs:bsui-table-row>
        <bs:bsui-table-cell>storefront</bs:bsui-table-cell>
          <bs:bsui-table-cell>
            <bs:bsui-badge label="Ready" variant="success" />
          </bs:bsui-table-cell>
          <bs:bsui-table-cell>June 26, 10:41</bs:bsui-table-cell>
          </bs:bsui-table-row>
          <bs:bsui-table-row>
            <bs:bsui-table-cell>api</bs:bsui-table-cell>
              <bs:bsui-table-cell>
                <bs:bsui-badge label="Ready" variant="success" />
              </bs:bsui-table-cell>
              <bs:bsui-table-cell>June 26, 09:58</bs:bsui-table-cell>
              </bs:bsui-table-row>
              <bs:bsui-table-row>
                <bs:bsui-table-cell>docs</bs:bsui-table-cell>
                  <bs:bsui-table-cell>
                    <bs:bsui-badge label="Failed" variant="destructive" />
                  </bs:bsui-table-cell>
                  <bs:bsui-table-cell>June 25, 22:14</bs:bsui-table-cell>
                  </bs:bsui-table-row>
                </bs:bsui-table-body>
              </bs:bsui-table>
            </bs:bsui-stack>

How it works

The select writes its committed value into a context shared with the table region, and each row derives its visibility from that value through directives. The store also keeps a visible-count string that a live region reads out after every change.

Every behaviour on this page is the WordPress Interactivity API: each component registers its own store, seeds its state in a server rendered context, and wires events with directives in the markup above. There is no page specific JavaScript.