specify which DataTable row can be expanded

[MrVoshel]

Is it currently possible to decide which row can be expanded in a DataTable? My issue is that when I specify the expandable prop it applies globally, even if I don't really need it.

<script>
    import { DataTable } from "carbon-components-svelte";

    const headers = [
        { key: 'id', value: 'ID' },
        { key: 'name', value: 'Name'}
    ];

    const rows = [
            { id: '1', name: 'a' },
            { id: '2', name: 'b' },
            { id: '3', name: 'c' }
    ];

</script>

<main>
    <DataTable expandable {headers} {rows}>
        <span slot="expanded-row" let:row>
            {#if row.id === '1'}
                <p>Some details for row {row.id}</p>
            {/if}
            <!-- I don't have any details for row.id 2, so I want to set
            the expandable prop to false -->
            {#if row.id === '3'}
                <p>Additional details for row {row.id}</p>
            {/if}
        </span>
    </DataTable>
</main>

[metonym]

It's not currently supported, but this is a valid feature request.

[metonym]

@MrVoshel Would this API address your use case?

• use nonExpandableRowIds to specify ids for rows that should not be expandable

Code

Full code in PR

<DataTable
  expandable
  nonExpandableRowIds={["a", "b"]}
  headers={[
    { key: "name", value: "Name" },
    { key: "protocol", value: "Protocol" },
    { key: "port", value: "Port" },
    { key: "rule", value: "Rule" },
  ]}
  {rows}
/>

Result

[MrVoshel]

This completely solves my problem, thank you!

[metonym]

I'll keep this open until #862 is merged.

[metonym]

Released in v0.47.0.

"Non-expandable rows" example in the docs.

[MrVoshel]

@metonym it seems to mess up the UI of batchExpansion a bit when everything is expanded.

<DataTable batchExpansion nonExpandableRowIds={['2']} {headers} {rows}>
        <span slot="expanded-row" let:row>
            {#if row.id === '1'}
                <p>Some details for row {row.id}</p>
            {/if}
            <!-- I don't have any details for row.id 2, so I want to set
            the expandable prop to false -->
            {#if row.id === '3'}
                <p>Additional details for row {row.id}</p>
            {/if}
        </span>
    </DataTable>

[metonym]

Please be more specific. Expected vs unexpected behavior etc.

[MrVoshel]

This is how it should be but if I use the batchExpansion this is what happens The ID 2 is not clearly separated from the rest. Moreover if I use the batchExpansion to expand everything, but then close each row individually there is another problem Hope that was clear.

[metonym]

What you're describing seems to be the intended design for a batch expandable data table.

This is what I'm seeing locally:

https://user-images.githubusercontent.com/10718366/138024164-74514ec5-6541-4337-9d67-753583b2eaa2.mov

Code:

<script>
  import { Grid, DataTable, Row, Column } from "carbon-components-svelte";

  const rows = [
    {
      id: "a",
      name: "Load Balancer 3",
      protocol: "HTTP",
      port: 3000,
      rule: "Round robin",
    },
    {
      id: "b",
      name: "Load Balancer 1",
      protocol: "HTTP",
      port: 443,
      rule: "Round robin",
    },
    {
      id: "c",
      name: "Load Balancer 2",
      protocol: "HTTP",
      port: 80,
      rule: "DNS delegation",
    },
    {
      id: "d",
      name: "Load Balancer 6",
      protocol: "HTTP",
      port: 3000,
      rule: "Round robin",
    },
    {
      id: "e",
      name: "Load Balancer 4",
      protocol: "HTTP",
      port: 443,
      rule: "Round robin",
    },
    {
      id: "f",
      name: "Load Balancer 5",
      protocol: "HTTP",
      port: 80,
      rule: "DNS delegation",
    },
  ];
</script>

<Grid padding>
  <Row>
    <Column>
      <DataTable
        batchExpansion
        nonExpandableRowIds={["a", "b"]}
        headers={[
          { key: "name", value: "Name" },
          { key: "protocol", value: "Protocol" },
          { key: "port", value: "Port" },
          { key: "rule", value: "Rule" },
        ]}
        {rows}
      >
        <svelte:fragment slot="expanded-row" let:row>
          {row.id}
        </svelte:fragment>
      </DataTable>
    </Column>
  </Row>
</Grid>

[MrVoshel]

Maybe I can explain it better with a video, let me know if this is intended or not, just seems a bit strange to me.

https://user-images.githubusercontent.com/54818101/138103670-8d06bb97-0390-4f57-b138-3106dd9937bb.mp4

[metonym]

@MrVoshel Understood – thanks

[metonym]

Fixed in v0.47.1

[metonym]

@MrVoshel Creating a separate issue (#867) to track the batchExpansion "expand all" issue