Merge branch 'master' into deprecated

This commit is contained in:
metonym 2022-03-27 07:19:07 -07:00 committed by Eric Liu
commit 6d45305615
25 changed files with 1026 additions and 1283 deletions

View file

@ -10624,17 +10624,6 @@
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "border",
"kind": "let",
"description": "Set to `true` to use the bordered variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
@ -13320,7 +13309,7 @@
"kind": "function",
"description": "Programmatically expand a subset of nodes.\nExpands all nodes if no argument is provided",
"type": "(filterId?: (node: TreeNode) => boolean) => void",
"value": "() => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); }",
"value": "() => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); }",
"isFunction": true,
"isFunctionDeclaration": true,
"constant": false,
@ -13331,7 +13320,7 @@
"kind": "function",
"description": "Programmatically collapse a subset of nodes.\nCollapses all nodes if no argument is provided",
"type": "(filterId?: (node: TreeNode) => boolean) => void",
"value": "() => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); }",
"value": "() => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }",
"isFunction": true,
"isFunctionDeclaration": true,
"constant": false,

View file

@ -1139,6 +1139,10 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
<FileSource src="/framed/DataTable/DataTableNonExpandableRows" />
### Expandable (zebra styles)
<FileSource src="/framed/DataTable/DataTableExpandableZebra" />
### Expandable (compact size)
<DataTable size="compact" expandable

View file

@ -0,0 +1,65 @@
<script>
import { DataTable } from "carbon-components-svelte";
</script>
<DataTable
zebra
expandable
nonExpandableRowIds="{['a', 'd']}"
headers="{[
{ key: 'name', value: 'Name' },
{ key: 'protocol', value: 'Protocol' },
{ key: 'port', value: 'Port' },
{ key: 'rule', value: 'Rule' },
]}"
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',
},
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
</svelte:fragment>
</DataTable>