diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index c823dae6..60baa463 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -1025,6 +1025,12 @@ In the following example, each row in the sortable data table has an overflow me +### Non-expandable rows + +Use `nonExpandableRowIds` to specify the ids for rows that should not be expandable. + + + ### Expandable (compact size) + import { DataTable } 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", + }, + ]; + + + + + + {JSON.stringify(row, null, 2)} + + +
+ {JSON.stringify(row, null, 2)} +