Expanded-By-Default DataTable

[keehun]

Dear Carbon Svelte Community,

I am looking to have all the cells of a DataTable expanded by default upon load. Is this currently supported? I don't see a way to do that according to the documentation.

The closest thing I see to it is in this issue: #1206—but I would like the users to be able batch-collapse should they wish (and make the expanded-by-default a user configurable setting), so I don't want to do anything to mess with DataTable from a CSS standpoint.

Thank you,
Keehun

[metonym]

The DataTable exposes an expandedRowIds prop to specify rows to be expanded by default. You can use this to batch collapse and expand rows.

Svelte REPL

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

  const rows = Array.from({ length: 6 }).map((_, i) => ({
    id: i,
    name: "Load Balancer " + (i + 1),
    protocol: "HTTP",
    port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
    rule: i % 3 ? "Round robin" : "DNS delegation",
  }));

  let expandedRowIds = [];
</script>

<Button
  on:click={() => {
    expandedRowIds = Boolean(expandedRowIds.length)
      ? []
      : rows.map((row) => row.id);
  }}
>
  Toggle expansion
</Button>

<DataTable
  expandable
  {expandedRowIds}
  headers={[
    { key: "name", value: "Name" },
    { key: "protocol", value: "Protocol" },
    { key: "port", value: "Port" },
    { key: "rule", value: "Rule" },
  ]}
  {rows}
>
  <pre slot="expanded-row" let:row>{JSON.stringify(row, null, 2)}</pre>
</DataTable>