Is there a way to create an expansion row (sub-row) with a different column configuration?

[fnimick]

My use case: I'd like to have top-level rows be clickable to reveal a full-width detail panel with additional data about the top-level row item.

(Similarly, would it be possible to have the expansion row use a different data type than the top-level row items?)

I'm not sure how to do this with addSubRows and addExpandedRows - perhaps I should try to write my own plugin for this specific use case?

[jrsimp]

Hey @fnimick 👋

Don't suppose you managed to solve this one after?

I'm looking for a similar solution with a one-to-many relationship between two tables and the children rows have different columns to the parent.

I got as far as getting the table with expandable rows built, however, all children records under each parent are showing undefined.

[fnimick]

@jrsimp I ended up adding my own expanded row tracking set in the component and rendering expansion detail inline.

in the script:

  let expandedRows: Set<string> = new Set();

in the template:

  <tbody class="table-body" {...$tableBodyAttrs}>
    {#each $rows as row (row.id)}
      <Subscribe rowAttrs={row.attrs()} let:rowAttrs>
        <tr
          {...rowAttrs}
          on:click={() => {
            if (!row.isData()) {
              return;
            }
            const id = row.original.id;
            if (expandedRows.has(id)) {
              expandedRows.delete(id);
            } else {
              expandedRows.add(id);
            }
            expandedRows = expandedRows;
          }}
        >
          {#each row.cells as cell (cell.id)}
            <Subscribe attrs={cell.attrs()} let:attrs>
              <td {...attrs}>
                <Render of={cell.render()} />
              </td>
            </Subscribe>
          {/each}
        </tr>
        {#if row.isData() && expandedRows.has(row.original.id)}
          <!-- empty tr to preserve nth-child alternate highlight styling -->
          <tr />
          <!-- wrap in tr/td to preserve column widths -->
          <tr class="h-0">
            <td colspan={100} class="h-0 !p-0">
              {#key row.original.id}
                [ expansion row content here ]
              {/key}
            </td>
          </tr>
        {/if}
      </Subscribe>
    {/each}
  </tbody>