diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 218231c2..8a35bc48 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -980,20 +980,23 @@ import { DataTable } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :----------- | :-------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------- | -| headers | {key: string; value: string;}[] | -- | Specify the data table headers. | -| rows | Object[] | -- | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. | -| size | "compact" | "short" | "tall" | -- | Set the size of the data table. | -| title | string | `""` | Specify the title of the data table. | -| description | string | `""` | Specify the description of the data table. | -| zebra | boolean | `false` | Set to `true` to use zebra styles. | -| sortable | boolean | `false` | Set to `true` for the sortable variant. | -| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | +| Prop name | Type | Default value | Description | +| :------------- | :-------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------- | +| headers | {key: string; value: string;}[] | -- | Specify the data table headers. | +| rows | Object[] | -- | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. | +| size | "compact" | "short" | "tall" | -- | Set the size of the data table. | +| title | string | `""` | Specify the title of the data table. | +| description | string | `""` | Specify the description of the data table. | +| zebra | boolean | `false` | Set to `true` to use zebra styles. | +| sortable | boolean | `false` | Set to `true` for the sortable variant. | +| expandable | boolean | `false` | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. | +| batchExpansion | boolean | `false` | Set to `true` to enable batch expansion. | +| expandedRowIds | string[] | -- | Specify the row ids to be expanded. | +| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | ### Slots -- `...` +- `...` ### Forwarded events @@ -1001,9 +1004,11 @@ No forwarded events. ### Dispatched events +- `on:click:header--expand` - `on:click` - `on:click:header` - `on:click:row` +- `on:click:row--expand` - `on:click:cell` --- diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json index 16e218f0..00c38a2f 100644 --- a/docs/src/PUBLIC_API.json +++ b/docs/src/PUBLIC_API.json @@ -2566,6 +2566,32 @@ "description": "Set to `true` for the sortable variant" } ], + [ + "expandable", + { + "kind": "let", + "value": "false", + "type": "boolean", + "description": "Set to `true` for the expandable variant\nAutomatically set to `true` if `batchExpansion` is `true`" + } + ], + [ + "batchExpansion", + { + "kind": "let", + "value": "false", + "type": "boolean", + "description": "Set to `true` to enable batch expansion" + } + ], + [ + "expandedRowIds", + { + "kind": "let", + "type": "string[]", + "description": "Specify the row ids to be expanded" + } + ], [ "stickyHeader", { @@ -2578,2651 +2604,68 @@ ], "slots": [ [ - "default", + "expanded-row", { "attributes": [ { - "start": 3068, - "end": 3083, + "start": 7597, + "end": 7616, "type": "Attribute", - "name": "props", + "name": "name", "value": [ { - "start": 3075, - "end": 3082, + "start": 7603, + "end": 7615, + "type": "Text", + "raw": "expanded-row", + "data": "expanded-row" + } + ] + }, + { + "start": 7617, + "end": 7628, + "type": "Attribute", + "name": "row", + "value": [ + { + "start": 7622, + "end": 7627, "type": "MustacheTag", "expression": { "type": "Identifier", - "start": 3076, - "end": 3081, + "start": 7623, + "end": 7626, "loc": { "start": { - "line": 118, - "column": 14 + "line": 252, + "column": 48 }, "end": { - "line": 118, - "column": 19 + "line": 252, + "column": 51 } }, - "name": "props" + "name": "row" } } ] } ], - "children": [ - { - "start": 3084, - "end": 3087, - "type": "Text", - "raw": "\n ", - "data": "\n " - }, - { - "start": 3087, - "end": 4776, - "type": "InlineComponent", - "name": "TableContainer", - "attributes": [ - { - "start": 3103, - "end": 3118, - "type": "Attribute", - "name": "title", - "value": [ - { - "start": 3110, - "end": 3117, - "type": "MustacheTag", - "expression": { - "type": "Identifier", - "start": 3111, - "end": 3116, - "loc": { - "start": { - "line": 119, - "column": 26 - }, - "end": { - "line": 119, - "column": 31 - } - }, - "name": "title" - } - } - ] - }, - { - "start": 3119, - "end": 3146, - "type": "Attribute", - "name": "description", - "value": [ - { - "start": 3132, - "end": 3145, - "type": "MustacheTag", - "expression": { - "type": "Identifier", - "start": 3133, - "end": 3144, - "loc": { - "start": { - "line": 119, - "column": 48 - }, - "end": { - "line": 119, - "column": 59 - } - }, - "name": "description" - } - } - ] - }, - { - "start": 3147, - "end": 3163, - "type": "Spread", - "expression": { - "type": "Identifier", - "start": 3151, - "end": 3162, - "loc": { - "start": { - "line": 119, - "column": 66 - }, - "end": { - "line": 119, - "column": 77 - } - }, - "name": "$$restProps" - } - } - ], - "children": [ - { - "start": 3164, - "end": 3169, - "type": "Text", - "raw": "\n ", - "data": "\n " - }, - { - "start": 3169, - "end": 4756, - "type": "InlineComponent", - "name": "Table", - "attributes": [ - { - "start": 3182, - "end": 3197, - "type": "Attribute", - "name": "zebra", - "value": [ - { - "start": 3189, - "end": 3196, - "type": "MustacheTag", - "expression": { - "type": "Identifier", - "start": 3190, - "end": 3195, - "loc": { - "start": { - "line": 121, - "column": 14 - }, - "end": { - "line": 121, - "column": 19 - } - }, - "name": "zebra" - } - } - ] - }, - { - "start": 3204, - "end": 3217, - "type": "Attribute", - "name": "size", - "value": [ - { - "start": 3210, - "end": 3216, - "type": "MustacheTag", - "expression": { - "type": "Identifier", - "start": 3211, - "end": 3215, - "loc": { - "start": { - "line": 122, - "column": 13 - }, - "end": { - "line": 122, - "column": 17 - } - }, - "name": "size" - } - } - ] - }, - { - "start": 3224, - "end": 3253, - "type": "Attribute", - "name": "stickyHeader", - "value": [ - { - "start": 3238, - "end": 3252, - "type": "MustacheTag", - "expression": { - "type": "Identifier", - "start": 3239, - "end": 3251, - "loc": { - "start": { - "line": 123, - "column": 21 - }, - "end": { - "line": 123, - "column": 33 - } - }, - "name": "stickyHeader" - } - } - ] - }, - { - "start": 3260, - "end": 3281, - "type": "Attribute", - "name": "sortable", - "value": [ - { - "start": 3270, - "end": 3280, - "type": "MustacheTag", - "expression": { - "type": "Identifier", - "start": 3271, - "end": 3279, - "loc": { - "start": { - "line": 124, - "column": 17 - }, - "end": { - "line": 124, - "column": 25 - } - }, - "name": "sortable" - } - } - ] - } - ], - "children": [ - { - "start": 3287, - "end": 3294, - "type": "Text", - "raw": "\n ", - "data": "\n " - }, - { - "start": 3294, - "end": 4118, - "type": "InlineComponent", - "name": "TableHead", - "attributes": [], - "children": [ - { - "start": 3305, - "end": 3314, - "type": "Text", - "raw": "\n ", - "data": "\n " - }, - { - "start": 3314, - "end": 4099, - "type": "InlineComponent", - "name": "TableRow", - "attributes": [], - "children": [ - { - "start": 3324, - "end": 3335, - "type": "Text", - "raw": "\n ", - "data": "\n " - }, - { - "start": 3335, - "end": 4079, - "type": "EachBlock", - "expression": { - "type": "Identifier", - "start": 3342, - "end": 3349, - "loc": { - "start": { - "line": 128, - "column": 17 - }, - "end": { - "line": 128, - "column": 24 - } - }, - "name": "headers" - }, - "children": [ - { - "start": 3389, - "end": 4061, - "type": "InlineComponent", - "name": "TableHeader", - "attributes": [ - { - "start": 3416, - "end": 3991, - "type": "EventHandler", - "name": "click", - "modifiers": [], - "expression": { - "type": "ArrowFunctionExpression", - "start": 3427, - "end": 3989, - "loc": { - "start": { - "line": 130, - "column": 25 - }, - "end": { - "line": 141, - "column": 15 - } - }, - "id": null, - "expression": false, - "generator": false, - "async": false, - "params": [], - "body": { - "type": "BlockStatement", - "start": 3433, - "end": 3989, - "loc": { - "start": { - "line": 130, - "column": 31 - }, - "end": { - "line": 141, - "column": 15 - } - }, - "body": [ - { - "type": "ExpressionStatement", - "start": 3451, - "end": 3481, - "loc": { - "start": { - "line": 131, - "column": 16 - }, - "end": { - "line": 131, - "column": 46 - } - }, - "expression": { - "type": "CallExpression", - "start": 3451, - "end": 3480, - "loc": { - "start": { - "line": 131, - "column": 16 - }, - "end": { - "line": 131, - "column": 45 - } - }, - "callee": { - "type": "Identifier", - "start": 3451, - "end": 3459, - "loc": { - "start": { - "line": 131, - "column": 16 - }, - "end": { - "line": 131, - "column": 24 - } - }, - "name": "dispatch" - }, - "arguments": [ - { - "type": "Literal", - "start": 3460, - "end": 3467, - "loc": { - "start": { - "line": 131, - "column": 25 - }, - "end": { - "line": 131, - "column": 32 - } - }, - "value": "click", - "raw": "'click'" - }, - { - "type": "ObjectExpression", - "start": 3469, - "end": 3479, - "loc": { - "start": { - "line": 131, - "column": 34 - }, - "end": { - "line": 131, - "column": 44 - } - }, - "properties": [ - { - "type": "Property", - "start": 3471, - "end": 3477, - "loc": { - "start": { - "line": 131, - "column": 36 - }, - "end": { - "line": 131, - "column": 42 - } - }, - "method": false, - "shorthand": true, - "computed": false, - "key": { - "type": "Identifier", - "start": 3471, - "end": 3477, - "loc": { - "start": { - "line": 131, - "column": 36 - }, - "end": { - "line": 131, - "column": 42 - } - }, - "name": "header" - }, - "kind": "init", - "value": { - "type": "Identifier", - "start": 3471, - "end": 3477, - "loc": { - "start": { - "line": 131, - "column": 36 - }, - "end": { - "line": 131, - "column": 42 - } - }, - "name": "header" - } - } - ] - } - ], - "optional": false - } - }, - { - "type": "VariableDeclaration", - "start": 3498, - "end": 3542, - "loc": { - "start": { - "line": 132, - "column": 16 - }, - "end": { - "line": 132, - "column": 60 - } - }, - "declarations": [ - { - "type": "VariableDeclarator", - "start": 3502, - "end": 3541, - "loc": { - "start": { - "line": 132, - "column": 20 - }, - "end": { - "line": 132, - "column": 59 - } - }, - "id": { - "type": "Identifier", - "start": 3502, - "end": 3508, - "loc": { - "start": { - "line": 132, - "column": 20 - }, - "end": { - "line": 132, - "column": 26 - } - }, - "name": "active" - }, - "init": { - "type": "BinaryExpression", - "start": 3511, - "end": 3541, - "loc": { - "start": { - "line": 132, - "column": 29 - }, - "end": { - "line": 132, - "column": 59 - } - }, - "left": { - "type": "MemberExpression", - "start": 3511, - "end": 3521, - "loc": { - "start": { - "line": 132, - "column": 29 - }, - "end": { - "line": 132, - "column": 39 - } - }, - "object": { - "type": "Identifier", - "start": 3511, - "end": 3517, - "loc": { - "start": { - "line": 132, - "column": 29 - }, - "end": { - "line": 132, - "column": 35 - } - }, - "name": "header" - }, - "property": { - "type": "Identifier", - "start": 3518, - "end": 3521, - "loc": { - "start": { - "line": 132, - "column": 36 - }, - "end": { - "line": 132, - "column": 39 - } - }, - "name": "key" - }, - "computed": false, - "optional": false - }, - "operator": "===", - "right": { - "type": "MemberExpression", - "start": 3526, - "end": 3541, - "loc": { - "start": { - "line": 132, - "column": 44 - }, - "end": { - "line": 132, - "column": 59 - } - }, - "object": { - "type": "Identifier", - "start": 3526, - "end": 3537, - "loc": { - "start": { - "line": 132, - "column": 44 - }, - "end": { - "line": 132, - "column": 55 - } - }, - "name": "$sortHeader" - }, - "property": { - "type": "Identifier", - "start": 3538, - "end": 3541, - "loc": { - "start": { - "line": 132, - "column": 56 - }, - "end": { - "line": 132, - "column": 59 - } - }, - "name": "key" - }, - "computed": false, - "optional": false - } - } - } - ], - "kind": "let" - }, - { - "type": "VariableDeclaration", - "start": 3559, - "end": 3630, - "loc": { - "start": { - "line": 133, - "column": 16 - }, - "end": { - "line": 133, - "column": 87 - } - }, - "declarations": [ - { - "type": "VariableDeclarator", - "start": 3563, - "end": 3629, - "loc": { - "start": { - "line": 133, - "column": 20 - }, - "end": { - "line": 133, - "column": 86 - } - }, - "id": { - "type": "Identifier", - "start": 3563, - "end": 3583, - "loc": { - "start": { - "line": 133, - "column": 20 - }, - "end": { - "line": 133, - "column": 40 - } - }, - "name": "currentSortDirection" - }, - "init": { - "type": "ConditionalExpression", - "start": 3586, - "end": 3629, - "loc": { - "start": { - "line": 133, - "column": 43 - }, - "end": { - "line": 133, - "column": 86 - } - }, - "test": { - "type": "Identifier", - "start": 3586, - "end": 3592, - "loc": { - "start": { - "line": 133, - "column": 43 - }, - "end": { - "line": 133, - "column": 49 - } - }, - "name": "active" - }, - "consequent": { - "type": "MemberExpression", - "start": 3595, - "end": 3620, - "loc": { - "start": { - "line": 133, - "column": 52 - }, - "end": { - "line": 133, - "column": 77 - } - }, - "object": { - "type": "Identifier", - "start": 3595, - "end": 3606, - "loc": { - "start": { - "line": 133, - "column": 52 - }, - "end": { - "line": 133, - "column": 63 - } - }, - "name": "$sortHeader" - }, - "property": { - "type": "Identifier", - "start": 3607, - "end": 3620, - "loc": { - "start": { - "line": 133, - "column": 64 - }, - "end": { - "line": 133, - "column": 77 - } - }, - "name": "sortDirection" - }, - "computed": false, - "optional": false - }, - "alternate": { - "type": "Literal", - "start": 3623, - "end": 3629, - "loc": { - "start": { - "line": 133, - "column": 80 - }, - "end": { - "line": 133, - "column": 86 - } - }, - "value": "none", - "raw": "'none'" - } - } - } - ], - "kind": "let" - }, - { - "type": "VariableDeclaration", - "start": 3647, - "end": 3706, - "loc": { - "start": { - "line": 134, - "column": 16 - }, - "end": { - "line": 134, - "column": 75 - } - }, - "declarations": [ - { - "type": "VariableDeclarator", - "start": 3651, - "end": 3705, - "loc": { - "start": { - "line": 134, - "column": 20 - }, - "end": { - "line": 134, - "column": 74 - } - }, - "id": { - "type": "Identifier", - "start": 3651, - "end": 3664, - "loc": { - "start": { - "line": 134, - "column": 20 - }, - "end": { - "line": 134, - "column": 33 - } - }, - "name": "sortDirection" - }, - "init": { - "type": "MemberExpression", - "start": 3667, - "end": 3705, - "loc": { - "start": { - "line": 134, - "column": 36 - }, - "end": { - "line": 134, - "column": 74 - } - }, - "object": { - "type": "Identifier", - "start": 3667, - "end": 3683, - "loc": { - "start": { - "line": 134, - "column": 36 - }, - "end": { - "line": 134, - "column": 52 - } - }, - "name": "sortDirectionMap" - }, - "property": { - "type": "Identifier", - "start": 3684, - "end": 3704, - "loc": { - "start": { - "line": 134, - "column": 53 - }, - "end": { - "line": 134, - "column": 73 - } - }, - "name": "currentSortDirection" - }, - "computed": true, - "optional": false - } - } - ], - "kind": "let" - }, - { - "type": "ExpressionStatement", - "start": 3723, - "end": 3775, - "loc": { - "start": { - "line": 135, - "column": 16 - }, - "end": { - "line": 135, - "column": 68 - } - }, - "expression": { - "type": "CallExpression", - "start": 3723, - "end": 3774, - "loc": { - "start": { - "line": 135, - "column": 16 - }, - "end": { - "line": 135, - "column": 67 - } - }, - "callee": { - "type": "Identifier", - "start": 3723, - "end": 3731, - "loc": { - "start": { - "line": 135, - "column": 16 - }, - "end": { - "line": 135, - "column": 24 - } - }, - "name": "dispatch" - }, - "arguments": [ - { - "type": "Literal", - "start": 3732, - "end": 3746, - "loc": { - "start": { - "line": 135, - "column": 25 - }, - "end": { - "line": 135, - "column": 39 - } - }, - "value": "click:header", - "raw": "'click:header'" - }, - { - "type": "ObjectExpression", - "start": 3748, - "end": 3773, - "loc": { - "start": { - "line": 135, - "column": 41 - }, - "end": { - "line": 135, - "column": 66 - } - }, - "properties": [ - { - "type": "Property", - "start": 3750, - "end": 3756, - "loc": { - "start": { - "line": 135, - "column": 43 - }, - "end": { - "line": 135, - "column": 49 - } - }, - "method": false, - "shorthand": true, - "computed": false, - "key": { - "type": "Identifier", - "start": 3750, - "end": 3756, - "loc": { - "start": { - "line": 135, - "column": 43 - }, - "end": { - "line": 135, - "column": 49 - } - }, - "name": "header" - }, - "kind": "init", - "value": { - "type": "Identifier", - "start": 3750, - "end": 3756, - "loc": { - "start": { - "line": 135, - "column": 43 - }, - "end": { - "line": 135, - "column": 49 - } - }, - "name": "header" - } - }, - { - "type": "Property", - "start": 3758, - "end": 3771, - "loc": { - "start": { - "line": 135, - "column": 51 - }, - "end": { - "line": 135, - "column": 64 - } - }, - "method": false, - "shorthand": true, - "computed": false, - "key": { - "type": "Identifier", - "start": 3758, - "end": 3771, - "loc": { - "start": { - "line": 135, - "column": 51 - }, - "end": { - "line": 135, - "column": 64 - } - }, - "name": "sortDirection" - }, - "kind": "init", - "value": { - "type": "Identifier", - "start": 3758, - "end": 3771, - "loc": { - "start": { - "line": 135, - "column": 51 - }, - "end": { - "line": 135, - "column": 64 - } - }, - "name": "sortDirection" - } - } - ] - } - ], - "optional": false - } - }, - { - "type": "ExpressionStatement", - "start": 3792, - "end": 3973, - "loc": { - "start": { - "line": 136, - "column": 16 - }, - "end": { - "line": 140, - "column": 19 - } - }, - "expression": { - "type": "CallExpression", - "start": 3792, - "end": 3972, - "loc": { - "start": { - "line": 136, - "column": 16 - }, - "end": { - "line": 140, - "column": 18 - } - }, - "callee": { - "type": "MemberExpression", - "start": 3792, - "end": 3806, - "loc": { - "start": { - "line": 136, - "column": 16 - }, - "end": { - "line": 136, - "column": 30 - } - }, - "object": { - "type": "Identifier", - "start": 3792, - "end": 3802, - "loc": { - "start": { - "line": 136, - "column": 16 - }, - "end": { - "line": 136, - "column": 26 - } - }, - "name": "sortHeader" - }, - "property": { - "type": "Identifier", - "start": 3803, - "end": 3806, - "loc": { - "start": { - "line": 136, - "column": 27 - }, - "end": { - "line": 136, - "column": 30 - } - }, - "name": "set" - }, - "computed": false, - "optional": false - }, - "arguments": [ - { - "type": "ObjectExpression", - "start": 3807, - "end": 3971, - "loc": { - "start": { - "line": 136, - "column": 31 - }, - "end": { - "line": 140, - "column": 17 - } - }, - "properties": [ - { - "type": "Property", - "start": 3827, - "end": 3884, - "loc": { - "start": { - "line": 137, - "column": 18 - }, - "end": { - "line": 137, - "column": 75 - } - }, - "method": false, - "shorthand": false, - "computed": false, - "key": { - "type": "Identifier", - "start": 3827, - "end": 3829, - "loc": { - "start": { - "line": 137, - "column": 18 - }, - "end": { - "line": 137, - "column": 20 - } - }, - "name": "id" - }, - "value": { - "type": "ConditionalExpression", - "start": 3831, - "end": 3884, - "loc": { - "start": { - "line": 137, - "column": 22 - }, - "end": { - "line": 137, - "column": 75 - } - }, - "test": { - "type": "BinaryExpression", - "start": 3831, - "end": 3855, - "loc": { - "start": { - "line": 137, - "column": 22 - }, - "end": { - "line": 137, - "column": 46 - } - }, - "left": { - "type": "Identifier", - "start": 3831, - "end": 3844, - "loc": { - "start": { - "line": 137, - "column": 22 - }, - "end": { - "line": 137, - "column": 35 - } - }, - "name": "sortDirection" - }, - "operator": "===", - "right": { - "type": "Literal", - "start": 3849, - "end": 3855, - "loc": { - "start": { - "line": 137, - "column": 40 - }, - "end": { - "line": 137, - "column": 46 - } - }, - "value": "none", - "raw": "'none'" - } - }, - "consequent": { - "type": "Literal", - "start": 3858, - "end": 3862, - "loc": { - "start": { - "line": 137, - "column": 49 - }, - "end": { - "line": 137, - "column": 53 - } - }, - "value": null, - "raw": "null" - }, - "alternate": { - "type": "MemberExpression", - "start": 3865, - "end": 3884, - "loc": { - "start": { - "line": 137, - "column": 56 - }, - "end": { - "line": 137, - "column": 75 - } - }, - "object": { - "type": "Identifier", - "start": 3865, - "end": 3872, - "loc": { - "start": { - "line": 137, - "column": 56 - }, - "end": { - "line": 137, - "column": 63 - } - }, - "name": "$thKeys" - }, - "property": { - "type": "MemberExpression", - "start": 3873, - "end": 3883, - "loc": { - "start": { - "line": 137, - "column": 64 - }, - "end": { - "line": 137, - "column": 74 - } - }, - "object": { - "type": "Identifier", - "start": 3873, - "end": 3879, - "loc": { - "start": { - "line": 137, - "column": 64 - }, - "end": { - "line": 137, - "column": 70 - } - }, - "name": "header" - }, - "property": { - "type": "Identifier", - "start": 3880, - "end": 3883, - "loc": { - "start": { - "line": 137, - "column": 71 - }, - "end": { - "line": 137, - "column": 74 - } - }, - "name": "key" - }, - "computed": false, - "optional": false - }, - "computed": true, - "optional": false - } - }, - "kind": "init" - }, - { - "type": "Property", - "start": 3904, - "end": 3919, - "loc": { - "start": { - "line": 138, - "column": 18 - }, - "end": { - "line": 138, - "column": 33 - } - }, - "method": false, - "shorthand": false, - "computed": false, - "key": { - "type": "Identifier", - "start": 3904, - "end": 3907, - "loc": { - "start": { - "line": 138, - "column": 18 - }, - "end": { - "line": 138, - "column": 21 - } - }, - "name": "key" - }, - "value": { - "type": "MemberExpression", - "start": 3909, - "end": 3919, - "loc": { - "start": { - "line": 138, - "column": 23 - }, - "end": { - "line": 138, - "column": 33 - } - }, - "object": { - "type": "Identifier", - "start": 3909, - "end": 3915, - "loc": { - "start": { - "line": 138, - "column": 23 - }, - "end": { - "line": 138, - "column": 29 - } - }, - "name": "header" - }, - "property": { - "type": "Identifier", - "start": 3916, - "end": 3919, - "loc": { - "start": { - "line": 138, - "column": 30 - }, - "end": { - "line": 138, - "column": 33 - } - }, - "name": "key" - }, - "computed": false, - "optional": false - }, - "kind": "init" - }, - { - "type": "Property", - "start": 3939, - "end": 3952, - "loc": { - "start": { - "line": 139, - "column": 18 - }, - "end": { - "line": 139, - "column": 31 - } - }, - "method": false, - "shorthand": true, - "computed": false, - "key": { - "type": "Identifier", - "start": 3939, - "end": 3952, - "loc": { - "start": { - "line": 139, - "column": 18 - }, - "end": { - "line": 139, - "column": 31 - } - }, - "name": "sortDirection" - }, - "kind": "init", - "value": { - "type": "Identifier", - "start": 3939, - "end": 3952, - "loc": { - "start": { - "line": 139, - "column": 18 - }, - "end": { - "line": 139, - "column": 31 - } - }, - "name": "sortDirection" - } - } - ] - } - ], - "optional": false - } - } - ] - } - } - } - ], - "children": [ - { - "start": 4005, - "end": 4020, - "type": "Text", - "raw": "\n ", - "data": "\n " - }, - { - "start": 4020, - "end": 4034, - "type": "MustacheTag", - "expression": { - "type": "MemberExpression", - "start": 4021, - "end": 4033, - "loc": { - "start": { - "line": 143, - "column": 15 - }, - "end": { - "line": 143, - "column": 27 - } - }, - "object": { - "type": "Identifier", - "start": 4021, - "end": 4027, - "loc": { - "start": { - "line": 143, - "column": 15 - }, - "end": { - "line": 143, - "column": 21 - } - }, - "name": "header" - }, - "property": { - "type": "Identifier", - "start": 4028, - "end": 4033, - "loc": { - "start": { - "line": 143, - "column": 22 - }, - "end": { - "line": 143, - "column": 27 - } - }, - "name": "value" - }, - "computed": false, - "optional": false - } - }, - { - "start": 4034, - "end": 4047, - "type": "Text", - "raw": "\n ", - "data": "\n " - } - ] - } - ], - "context": { - "type": "Identifier", - "name": "header", - "start": 3353, - "end": 3359 - }, - "index": "i", - "key": { - "type": "MemberExpression", - "start": 3364, - "end": 3374, - "loc": { - "start": { - "line": 128, - "column": 39 - }, - "end": { - "line": 128, - "column": 49 - } - }, - "object": { - "type": "Identifier", - "start": 3364, - "end": 3370, - "loc": { - "start": { - "line": 128, - "column": 39 - }, - "end": { - "line": 128, - "column": 45 - } - }, - "name": "header" - }, - "property": { - "type": "Identifier", - "start": 3371, - "end": 3374, - "loc": { - "start": { - "line": 128, - "column": 46 - }, - "end": { - "line": 128, - "column": 49 - } - }, - "name": "key" - }, - "computed": false, - "optional": false - } - }, - { - "start": 4079, - "end": 4088, - "type": "Text", - "raw": "\n ", - "data": "\n " - } - ] - }, - { - "start": 4099, - "end": 4106, - "type": "Text", - "raw": "\n ", - "data": "\n " - } - ] - }, - { - "start": 4118, - "end": 4125, - "type": "Text", - "raw": "\n ", - "data": "\n " - }, - { - "start": 4125, - "end": 4743, - "type": "InlineComponent", - "name": "TableBody", - "attributes": [], - "children": [ - { - "start": 4136, - "end": 4145, - "type": "Text", - "raw": "\n ", - "data": "\n " - }, - { - "start": 4145, - "end": 4724, - "type": "EachBlock", - "expression": { - "type": "ConditionalExpression", - "start": 4152, - "end": 4179, - "loc": { - "start": { - "line": 149, - "column": 15 - }, - "end": { - "line": 149, - "column": 42 - } - }, - "test": { - "type": "Identifier", - "start": 4152, - "end": 4159, - "loc": { - "start": { - "line": 149, - "column": 15 - }, - "end": { - "line": 149, - "column": 22 - } - }, - "name": "sorting" - }, - "consequent": { - "type": "Identifier", - "start": 4162, - "end": 4172, - "loc": { - "start": { - "line": 149, - "column": 25 - }, - "end": { - "line": 149, - "column": 35 - } - }, - "name": "sortedRows" - }, - "alternate": { - "type": "Identifier", - "start": 4175, - "end": 4179, - "loc": { - "start": { - "line": 149, - "column": 38 - }, - "end": { - "line": 149, - "column": 42 - } - }, - "name": "rows" - } - }, - "children": [ - { - "start": 4210, - "end": 4708, - "type": "InlineComponent", - "name": "TableRow", - "attributes": [ - { - "start": 4232, - "end": 4350, - "type": "EventHandler", - "name": "click", - "modifiers": [], - "expression": { - "type": "ArrowFunctionExpression", - "start": 4243, - "end": 4348, - "loc": { - "start": { - "line": 151, - "column": 23 - }, - "end": { - "line": 154, - "column": 13 - } - }, - "id": null, - "expression": false, - "generator": false, - "async": false, - "params": [], - "body": { - "type": "BlockStatement", - "start": 4249, - "end": 4348, - "loc": { - "start": { - "line": 151, - "column": 29 - }, - "end": { - "line": 154, - "column": 13 - } - }, - "body": [ - { - "type": "ExpressionStatement", - "start": 4265, - "end": 4292, - "loc": { - "start": { - "line": 152, - "column": 14 - }, - "end": { - "line": 152, - "column": 41 - } - }, - "expression": { - "type": "CallExpression", - "start": 4265, - "end": 4291, - "loc": { - "start": { - "line": 152, - "column": 14 - }, - "end": { - "line": 152, - "column": 40 - } - }, - "callee": { - "type": "Identifier", - "start": 4265, - "end": 4273, - "loc": { - "start": { - "line": 152, - "column": 14 - }, - "end": { - "line": 152, - "column": 22 - } - }, - "name": "dispatch" - }, - "arguments": [ - { - "type": "Literal", - "start": 4274, - "end": 4281, - "loc": { - "start": { - "line": 152, - "column": 23 - }, - "end": { - "line": 152, - "column": 30 - } - }, - "value": "click", - "raw": "'click'" - }, - { - "type": "ObjectExpression", - "start": 4283, - "end": 4290, - "loc": { - "start": { - "line": 152, - "column": 32 - }, - "end": { - "line": 152, - "column": 39 - } - }, - "properties": [ - { - "type": "Property", - "start": 4285, - "end": 4288, - "loc": { - "start": { - "line": 152, - "column": 34 - }, - "end": { - "line": 152, - "column": 37 - } - }, - "method": false, - "shorthand": true, - "computed": false, - "key": { - "type": "Identifier", - "start": 4285, - "end": 4288, - "loc": { - "start": { - "line": 152, - "column": 34 - }, - "end": { - "line": 152, - "column": 37 - } - }, - "name": "row" - }, - "kind": "init", - "value": { - "type": "Identifier", - "start": 4285, - "end": 4288, - "loc": { - "start": { - "line": 152, - "column": 34 - }, - "end": { - "line": 152, - "column": 37 - } - }, - "name": "row" - } - } - ] - } - ], - "optional": false - } - }, - { - "type": "ExpressionStatement", - "start": 4307, - "end": 4334, - "loc": { - "start": { - "line": 153, - "column": 14 - }, - "end": { - "line": 153, - "column": 41 - } - }, - "expression": { - "type": "CallExpression", - "start": 4307, - "end": 4333, - "loc": { - "start": { - "line": 153, - "column": 14 - }, - "end": { - "line": 153, - "column": 40 - } - }, - "callee": { - "type": "Identifier", - "start": 4307, - "end": 4315, - "loc": { - "start": { - "line": 153, - "column": 14 - }, - "end": { - "line": 153, - "column": 22 - } - }, - "name": "dispatch" - }, - "arguments": [ - { - "type": "Literal", - "start": 4316, - "end": 4327, - "loc": { - "start": { - "line": 153, - "column": 23 - }, - "end": { - "line": 153, - "column": 34 - } - }, - "value": "click:row", - "raw": "'click:row'" - }, - { - "type": "Identifier", - "start": 4329, - "end": 4332, - "loc": { - "start": { - "line": 153, - "column": 36 - }, - "end": { - "line": 153, - "column": 39 - } - }, - "name": "row" - } - ], - "optional": false - } - } - ] - } - } - } - ], - "children": [ - { - "start": 4362, - "end": 4375, - "type": "Text", - "raw": "\n ", - "data": "\n " - }, - { - "start": 4375, - "end": 4686, - "type": "EachBlock", - "expression": { - "type": "MemberExpression", - "start": 4382, - "end": 4391, - "loc": { - "start": { - "line": 156, - "column": 19 - }, - "end": { - "line": 156, - "column": 28 - } - }, - "object": { - "type": "Identifier", - "start": 4382, - "end": 4385, - "loc": { - "start": { - "line": 156, - "column": 19 - }, - "end": { - "line": 156, - "column": 22 - } - }, - "name": "row" - }, - "property": { - "type": "Identifier", - "start": 4386, - "end": 4391, - "loc": { - "start": { - "line": 156, - "column": 23 - }, - "end": { - "line": 156, - "column": 28 - } - }, - "name": "cells" - }, - "computed": false, - "optional": false - }, - "children": [ - { - "start": 4429, - "end": 4666, - "type": "InlineComponent", - "name": "TableCell", - "attributes": [ - { - "start": 4456, - "end": 4594, - "type": "EventHandler", - "name": "click", - "modifiers": [], - "expression": { - "type": "ArrowFunctionExpression", - "start": 4467, - "end": 4592, - "loc": { - "start": { - "line": 158, - "column": 27 - }, - "end": { - "line": 161, - "column": 17 - } - }, - "id": null, - "expression": false, - "generator": false, - "async": false, - "params": [], - "body": { - "type": "BlockStatement", - "start": 4473, - "end": 4592, - "loc": { - "start": { - "line": 158, - "column": 33 - }, - "end": { - "line": 161, - "column": 17 - } - }, - "body": [ - { - "type": "ExpressionStatement", - "start": 4493, - "end": 4526, - "loc": { - "start": { - "line": 159, - "column": 18 - }, - "end": { - "line": 159, - "column": 51 - } - }, - "expression": { - "type": "CallExpression", - "start": 4493, - "end": 4525, - "loc": { - "start": { - "line": 159, - "column": 18 - }, - "end": { - "line": 159, - "column": 50 - } - }, - "callee": { - "type": "Identifier", - "start": 4493, - "end": 4501, - "loc": { - "start": { - "line": 159, - "column": 18 - }, - "end": { - "line": 159, - "column": 26 - } - }, - "name": "dispatch" - }, - "arguments": [ - { - "type": "Literal", - "start": 4502, - "end": 4509, - "loc": { - "start": { - "line": 159, - "column": 27 - }, - "end": { - "line": 159, - "column": 34 - } - }, - "value": "click", - "raw": "'click'" - }, - { - "type": "ObjectExpression", - "start": 4511, - "end": 4524, - "loc": { - "start": { - "line": 159, - "column": 36 - }, - "end": { - "line": 159, - "column": 49 - } - }, - "properties": [ - { - "type": "Property", - "start": 4513, - "end": 4516, - "loc": { - "start": { - "line": 159, - "column": 38 - }, - "end": { - "line": 159, - "column": 41 - } - }, - "method": false, - "shorthand": true, - "computed": false, - "key": { - "type": "Identifier", - "start": 4513, - "end": 4516, - "loc": { - "start": { - "line": 159, - "column": 38 - }, - "end": { - "line": 159, - "column": 41 - } - }, - "name": "row" - }, - "kind": "init", - "value": { - "type": "Identifier", - "start": 4513, - "end": 4516, - "loc": { - "start": { - "line": 159, - "column": 38 - }, - "end": { - "line": 159, - "column": 41 - } - }, - "name": "row" - } - }, - { - "type": "Property", - "start": 4518, - "end": 4522, - "loc": { - "start": { - "line": 159, - "column": 43 - }, - "end": { - "line": 159, - "column": 47 - } - }, - "method": false, - "shorthand": true, - "computed": false, - "key": { - "type": "Identifier", - "start": 4518, - "end": 4522, - "loc": { - "start": { - "line": 159, - "column": 43 - }, - "end": { - "line": 159, - "column": 47 - } - }, - "name": "cell" - }, - "kind": "init", - "value": { - "type": "Identifier", - "start": 4518, - "end": 4522, - "loc": { - "start": { - "line": 159, - "column": 43 - }, - "end": { - "line": 159, - "column": 47 - } - }, - "name": "cell" - } - } - ] - } - ], - "optional": false - } - }, - { - "type": "ExpressionStatement", - "start": 4545, - "end": 4574, - "loc": { - "start": { - "line": 160, - "column": 18 - }, - "end": { - "line": 160, - "column": 47 - } - }, - "expression": { - "type": "CallExpression", - "start": 4545, - "end": 4573, - "loc": { - "start": { - "line": 160, - "column": 18 - }, - "end": { - "line": 160, - "column": 46 - } - }, - "callee": { - "type": "Identifier", - "start": 4545, - "end": 4553, - "loc": { - "start": { - "line": 160, - "column": 18 - }, - "end": { - "line": 160, - "column": 26 - } - }, - "name": "dispatch" - }, - "arguments": [ - { - "type": "Literal", - "start": 4554, - "end": 4566, - "loc": { - "start": { - "line": 160, - "column": 27 - }, - "end": { - "line": 160, - "column": 39 - } - }, - "value": "click:cell", - "raw": "'click:cell'" - }, - { - "type": "Identifier", - "start": 4568, - "end": 4572, - "loc": { - "start": { - "line": 160, - "column": 41 - }, - "end": { - "line": 160, - "column": 45 - } - }, - "name": "cell" - } - ], - "optional": false - } - } - ] - } - } - } - ], - "children": [ - { - "start": 4610, - "end": 4627, - "type": "Text", - "raw": "\n ", - "data": "\n " - }, - { - "start": 4627, - "end": 4639, - "type": "MustacheTag", - "expression": { - "type": "MemberExpression", - "start": 4628, - "end": 4638, - "loc": { - "start": { - "line": 163, - "column": 17 - }, - "end": { - "line": 163, - "column": 27 - } - }, - "object": { - "type": "Identifier", - "start": 4628, - "end": 4632, - "loc": { - "start": { - "line": 163, - "column": 17 - }, - "end": { - "line": 163, - "column": 21 - } - }, - "name": "cell" - }, - "property": { - "type": "Identifier", - "start": 4633, - "end": 4638, - "loc": { - "start": { - "line": 163, - "column": 22 - }, - "end": { - "line": 163, - "column": 27 - } - }, - "name": "value" - }, - "computed": false, - "optional": false - } - }, - { - "start": 4639, - "end": 4654, - "type": "Text", - "raw": "\n ", - "data": "\n " - } - ] - } - ], - "context": { - "type": "Identifier", - "name": "cell", - "start": 4395, - "end": 4399 - }, - "index": "j", - "key": { - "type": "MemberExpression", - "start": 4404, - "end": 4412, - "loc": { - "start": { - "line": 156, - "column": 41 - }, - "end": { - "line": 156, - "column": 49 - } - }, - "object": { - "type": "Identifier", - "start": 4404, - "end": 4408, - "loc": { - "start": { - "line": 156, - "column": 41 - }, - "end": { - "line": 156, - "column": 45 - } - }, - "name": "cell" - }, - "property": { - "type": "Identifier", - "start": 4409, - "end": 4412, - "loc": { - "start": { - "line": 156, - "column": 46 - }, - "end": { - "line": 156, - "column": 49 - } - }, - "name": "key" - }, - "computed": false, - "optional": false - } - }, - { - "start": 4686, - "end": 4697, - "type": "Text", - "raw": "\n ", - "data": "\n " - } - ] - } - ], - "context": { - "type": "Identifier", - "name": "row", - "start": 4183, - "end": 4186 - }, - "index": "i", - "key": { - "type": "MemberExpression", - "start": 4191, - "end": 4197, - "loc": { - "start": { - "line": 149, - "column": 54 - }, - "end": { - "line": 149, - "column": 60 - } - }, - "object": { - "type": "Identifier", - "start": 4191, - "end": 4194, - "loc": { - "start": { - "line": 149, - "column": 54 - }, - "end": { - "line": 149, - "column": 57 - } - }, - "name": "row" - }, - "property": { - "type": "Identifier", - "start": 4195, - "end": 4197, - "loc": { - "start": { - "line": 149, - "column": 58 - }, - "end": { - "line": 149, - "column": 60 - } - }, - "name": "id" - }, - "computed": false, - "optional": false - } - }, - { - "start": 4724, - "end": 4731, - "type": "Text", - "raw": "\n ", - "data": "\n " - } - ] - }, - { - "start": 4743, - "end": 4748, - "type": "Text", - "raw": "\n ", - "data": "\n " - } - ] - }, - { - "start": 4756, - "end": 4759, - "type": "Text", - "raw": "\n ", - "data": "\n " - } - ] - }, - { - "start": 4776, - "end": 4777, - "type": "Text", - "raw": "\n", - "data": "\n" - } - ], - "default": true, - "default_value": "\n \n\n \n \n \n {#each headers as header, i (header.key)}\n {\n dispatch('click', { header });\n let active = header.key === $sortHeader.key;\n let currentSortDirection = active ? $sortHeader.sortDirection : 'none';\n let sortDirection = sortDirectionMap[currentSortDirection];\n dispatch('click:header', { header, sortDirection });\n sortHeader.set({\n id: sortDirection === 'none' ? null : $thKeys[header.key],\n key: header.key,\n sortDirection,\n });\n }}\"\n >\n {header.value}\n \n {/each}\n \n \n \n {#each sorting ? sortedRows : rows as row, i (row.id)}\n {\n dispatch('click', { row });\n dispatch('click:row', row);\n }}\"\n >\n {#each row.cells as cell, j (cell.key)}\n {\n dispatch('click', { row, cell });\n dispatch('click:cell', cell);\n }}\"\n >\n {cell.value}\n \n {/each}\n \n {/each}\n \n \n \n\n\n" + "children": [], + "default": false, + "default_value": "" } ] ], "forwarded_events": [], "dispatched_events": [ + [ + "click:header--expand", + { + "detail": "{ expanded }" + } + ], [ "click", { @@ -5241,6 +2684,12 @@ "detail": "row" } ], + [ + "click:row--expand", + { + "detail": "{\n row,\n expanded: !rowExpanded,\n }" + } + ], [ "click:cell", { @@ -15368,8 +12817,8 @@ [ "click", { - "start": 279, - "end": 287, + "start": 257, + "end": 265, "type": "EventHandler", "name": "click", "modifiers": [], @@ -15379,8 +12828,8 @@ [ "mouseover", { - "start": 290, - "end": 302, + "start": 268, + "end": 280, "type": "EventHandler", "name": "mouseover", "modifiers": [], @@ -15390,8 +12839,8 @@ [ "mouseenter", { - "start": 305, - "end": 318, + "start": 283, + "end": 296, "type": "EventHandler", "name": "mouseenter", "modifiers": [], @@ -15401,8 +12850,8 @@ [ "mouseleave", { - "start": 321, - "end": 334, + "start": 299, + "end": 312, "type": "EventHandler", "name": "mouseleave", "modifiers": [], diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte index a9559ab0..62cee32a 100644 --- a/docs/src/components/ComponentApi.svelte +++ b/docs/src/components/ComponentApi.svelte @@ -55,68 +55,72 @@

Props

-
- - - - Prop name - Type - Default value - Description - - - - {#each component.props as prop} - - - - - - {#each prop[1].type.split(' | ') as type, i (type)} -
- {#if type.startsWith('typeof')} - - Carbon Svelte icon - - {:else if type.startsWith('HTML')} - - {type} - - - {:else if type in typeMap} - {typeMap[type]} - {:else if type.startsWith('(')} - {type} - {:else} - - {/if} -
- {/each} - - {prop[1].value} - - {#each prop[1].description.split('\n') as line} -
{line}.
- {/each} - +{#if component.props.length > 0} +
+ + + + Prop name + Type + Default value + Description - {/each} - - -
+ + + {#each component.props as prop} + + + + + + {#each prop[1].type.split(' | ') as type, i (type)} +
+ {#if type.startsWith('typeof')} + + Carbon Svelte icon + + {:else if type.startsWith('HTML')} + + {type} + + + {:else if type in typeMap} + {typeMap[type]} + {:else if type.startsWith('(')} + {type} + {:else} + + {/if} +
+ {/each} + + + {prop[1].value} + + + {#each prop[1].description.split('\n') as line} +
{line}.
+ {/each} + + + {/each} + + +
+{:else}No props.{/if}

Slots

{#if component.slots.length > 0} diff --git a/docs/src/layouts/Recipe.svelte b/docs/src/layouts/Recipe.svelte index ce3ff566..70f239e2 100644 --- a/docs/src/layouts/Recipe.svelte +++ b/docs/src/layouts/Recipe.svelte @@ -13,7 +13,6 @@ import { theme } from "../store"; export let component = $page.title; - export let source = ""; metatags.title = $page.title; diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index 781762b9..608533c3 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -57,7 +57,7 @@ /** * Specify the row ids to be expanded - * @type {boolean} [expandedRowIds=[]] + * @type {string[]} [expandedRowIds=[]] */ export let expandedRowIds = []; diff --git a/types/index.d.ts b/types/index.d.ts index a6398bdf..8aa34063 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -822,6 +822,24 @@ export class DataTable extends CarbonSvelteComponent { */ sortable?: boolean; + /** + * Set to `true` for the expandable variant + * Automatically set to `true` if `batchExpansion` is `true` + * @default false + */ + expandable?: boolean; + + /** + * Set to `true` to enable batch expansion + * @default false + */ + batchExpansion?: boolean; + + /** + * Specify the row ids to be expanded + */ + expandedRowIds?: string[]; + /** * Set to `true` to enable a sticky header * @default false @@ -829,7 +847,7 @@ export class DataTable extends CarbonSvelteComponent { stickyHeader?: boolean; }; - $$slot_def: { default: { props: any } }; + $$slot_def: { "expanded-row": { row: any } }; } export class DataTableSkeleton extends CarbonSvelteComponent {