S-table-row's clickDelegate only works with s-link

Polaris
1

I’m building a table using the new web components. I’d like to use the s-clickable with s-table-row’s clickDelegate property, but it seems to only work with s-link.

Desired layout

<s-table>
  <s-table-header-row>
    <s-table-header>Header 1</s-table-header>
    <s-table-header>Header 2</s-table-header>
    <s-table-header>Header 3</s-table-header>
    <s-table-header>Header 4</s-table-header>
  </s-table-header-row>
  <s-table-body>
    <s-table-row clickDelegate="example1-link">
      <s-table-cell>
        <s-clickable
          id="example1-link"
          href="/example1"
        >
          Cell 1
        </s-clickable>
      </s-table-cell>
      <s-table-cell>Cell 2</s-table-cell>
      <s-table-cell>Cell 3</s-table-cell>
      <s-table-cell>Cell 4</s-table-cell>
    </s-table-row>
  </s-table-body>
</s-table>

Working layout

<s-table>
  <s-table-header-row>
    <s-table-header>Header 1</s-table-header>
    <s-table-header>Header 2</s-table-header>
    <s-table-header>Header 3</s-table-header>
    <s-table-header>Header 4</s-table-header>
  </s-table-header-row>
  <s-table-body>
    <s-table-row clickDelegate="example1-link">
      <s-table-cell>
        <s-text>
          <s-link
            id="example1-link"
            href="/example1"
          >
            Cell 1
          </s-link>
        </s-text>
      </s-table-cell>
      <s-table-cell>Cell 2</s-table-cell>
      <s-table-cell>Cell 3</s-table-cell>
      <s-table-cell>Cell 4</s-table-cell>
    </s-table-row>
  </s-table-body>
</s-table>

I’ve tried with s-button as well, but the only element that made the whole row clickable was s-link. All three worked when clicking the element itself.

2

Currently, s-link and s-checkbox are the only available targets. We’re still discussing if we want to enable buttons and/or other interactive elements.

3

There should be a console log that indicates which elements are current supported as well.

1 Like
4

Got it, thank you @Anthony_Frehner !

1 Like