mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
feat(data-table): support radio, selectable variants with batch actions
This commit is contained in:
Eric Liu
parent
611d72bcf3
commit
f43b132088
15 changed files with 662 additions and 156 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
# Component Index
|
# Component Index
|
||||||
|
|
||||||
> 150 components exported from carbon-components-svelte 0.19.0
|
> 152 components exported from carbon-components-svelte 0.19.0
|
||||||
|
|
||||||
- Accordion
|
- Accordion
|
||||||
- [Accordion](#accordion)
|
- [Accordion](#accordion)
|
||||||
|
|
@ -42,6 +42,8 @@
|
||||||
- [TableHeader](#tableheader)
|
- [TableHeader](#tableheader)
|
||||||
- [TableRow](#tablerow)
|
- [TableRow](#tablerow)
|
||||||
- [Toolbar](#toolbar)
|
- [Toolbar](#toolbar)
|
||||||
|
- [ToolbarBatchActions](#toolbarbatchactions)
|
||||||
|
- [ToolbarContent](#toolbarcontent)
|
||||||
- [ToolbarSearch](#toolbarsearch)
|
- [ToolbarSearch](#toolbarsearch)
|
||||||
- [DataTableSkeleton](#datatableskeleton)
|
- [DataTableSkeleton](#datatableskeleton)
|
||||||
- DatePicker
|
- DatePicker
|
||||||
|
|
@ -982,19 +984,23 @@ import { DataTable } from "carbon-components-svelte";
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Type | Default value | Description |
|
| Prop name | Type | Default value | Description |
|
||||||
| :------------- | :----------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------- |
|
| :------------- | :----------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------- |
|
||||||
| headers | <code>{key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[]</code> | `[]` | Specify the data table headers. |
|
| headers | <code>{key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[]</code> | `[]` | Specify the data table headers. |
|
||||||
| rows | <code>Object[]</code> | `[]` | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. |
|
| rows | <code>Object[]</code> | `[]` | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. |
|
||||||
| size | <code>"compact" | "short" | "tall"</code> | -- | Set the size of the data table. |
|
| size | <code>"compact" | "short" | "tall"</code> | -- | Set the size of the data table. |
|
||||||
| title | <code>string</code> | `""` | Specify the title of the data table. |
|
| title | <code>string</code> | `""` | Specify the title of the data table. |
|
||||||
| description | <code>string</code> | `""` | Specify the description of the data table. |
|
| description | <code>string</code> | `""` | Specify the description of the data table. |
|
||||||
| zebra | <code>boolean</code> | `false` | Set to `true` to use zebra styles. |
|
| zebra | <code>boolean</code> | `false` | Set to `true` to use zebra styles. |
|
||||||
| sortable | <code>boolean</code> | `false` | Set to `true` for the sortable variant. |
|
| sortable | <code>boolean</code> | `false` | Set to `true` for the sortable variant. |
|
||||||
| expandable | <code>boolean</code> | `false` | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. |
|
| expandable | <code>boolean</code> | `false` | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. |
|
||||||
| batchExpansion | <code>boolean</code> | `false` | Set to `true` to enable batch expansion. |
|
| batchExpansion | <code>boolean</code> | `false` | Set to `true` to enable batch expansion. |
|
||||||
| expandedRowIds | <code>string[]</code> | `[]` | Specify the row ids to be expanded. |
|
| expandedRowIds | <code>string[]</code> | `[]` | Specify the row ids to be expanded. |
|
||||||
| stickyHeader | <code>boolean</code> | `false` | Set to `true` to enable a sticky header. |
|
| radio | <code>boolean</code> | `false` | Set to `true` for the radio selection variant. |
|
||||||
|
| selectable | <code>boolean</code> | `false` | Set to `true` for the selectable variant. Automatically set to `true` if `radio` or `batchSelection` are `true`. |
|
||||||
|
| batchSelection | <code>boolean</code> | `false` | Set to `true` to enable batch selection. |
|
||||||
|
| selectedRowIds | <code>string[]</code> | `[]` | Specify the row ids to be selected. |
|
||||||
|
| stickyHeader | <code>boolean</code> | `false` | Set to `true` to enable a sticky header. |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -5250,6 +5256,60 @@ No dispatched events.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## ToolbarBatchActions
|
||||||
|
|
||||||
|
### Import path
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { ToolbarBatchActions } from "carbon-components-svelte";
|
||||||
|
```
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| Prop name | Type | Default value | Description |
|
||||||
|
| :------------------ | :--------------------------------------------- | :------------ | :-------------------------------------- |
|
||||||
|
| formatTotalSelected | <code>(totalSelected: number) => string</code> | -- | Override the total items selected text. |
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
- `<slot>...</slot>`
|
||||||
|
|
||||||
|
### Forwarded events
|
||||||
|
|
||||||
|
No forwarded events.
|
||||||
|
|
||||||
|
### Dispatched events
|
||||||
|
|
||||||
|
No dispatched events.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ToolbarContent
|
||||||
|
|
||||||
|
### Import path
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { ToolbarContent } from "carbon-components-svelte";
|
||||||
|
```
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
No exported props.
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
- `<slot>...</slot>`
|
||||||
|
|
||||||
|
### Forwarded events
|
||||||
|
|
||||||
|
No forwarded events.
|
||||||
|
|
||||||
|
### Dispatched events
|
||||||
|
|
||||||
|
No dispatched events.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## ToolbarSearch
|
## ToolbarSearch
|
||||||
|
|
||||||
### Import path
|
### Import path
|
||||||
|
|
|
||||||
|
|
@ -2596,6 +2596,42 @@
|
||||||
"description": "Specify the row ids to be expanded"
|
"description": "Specify the row ids to be expanded"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
[
|
||||||
|
"radio",
|
||||||
|
{
|
||||||
|
"kind": "let",
|
||||||
|
"value": "false",
|
||||||
|
"type": "boolean",
|
||||||
|
"description": "Set to `true` for the radio selection variant"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"selectable",
|
||||||
|
{
|
||||||
|
"kind": "let",
|
||||||
|
"value": "false",
|
||||||
|
"type": "boolean",
|
||||||
|
"description": "Set to `true` for the selectable variant\nAutomatically set to `true` if `radio` or `batchSelection` are `true`"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"batchSelection",
|
||||||
|
{
|
||||||
|
"kind": "let",
|
||||||
|
"value": "false",
|
||||||
|
"type": "boolean",
|
||||||
|
"description": "Set to `true` to enable batch selection"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"selectedRowIds",
|
||||||
|
{
|
||||||
|
"kind": "let",
|
||||||
|
"value": "[]",
|
||||||
|
"type": "string[]",
|
||||||
|
"description": "Specify the row ids to be selected"
|
||||||
|
}
|
||||||
|
],
|
||||||
[
|
[
|
||||||
"stickyHeader",
|
"stickyHeader",
|
||||||
{
|
{
|
||||||
|
|
@ -2621,14 +2657,14 @@
|
||||||
{
|
{
|
||||||
"attributes": [
|
"attributes": [
|
||||||
{
|
{
|
||||||
"start": 5619,
|
"start": 7497,
|
||||||
"end": 5637,
|
"end": 7515,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "name",
|
"name": "name",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 5625,
|
"start": 7503,
|
||||||
"end": 5636,
|
"end": 7514,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "cell-header",
|
"raw": "cell-header",
|
||||||
"data": "cell-header"
|
"data": "cell-header"
|
||||||
|
|
@ -2636,26 +2672,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 5638,
|
"start": 7516,
|
||||||
"end": 5655,
|
"end": 7533,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "header",
|
"name": "header",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 5646,
|
"start": 7524,
|
||||||
"end": 5654,
|
"end": 7532,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 5647,
|
"start": 7525,
|
||||||
"end": 5653,
|
"end": 7531,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 199,
|
"line": 263,
|
||||||
"column": 46
|
"column": 46
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 199,
|
"line": 263,
|
||||||
"column": 52
|
"column": 52
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2667,34 +2703,34 @@
|
||||||
],
|
],
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"start": 5656,
|
"start": 7534,
|
||||||
"end": 5670,
|
"end": 7548,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 5657,
|
"start": 7535,
|
||||||
"end": 5669,
|
"end": 7547,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 199,
|
"line": 263,
|
||||||
"column": 56
|
"column": 56
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 199,
|
"line": 263,
|
||||||
"column": 68
|
"column": 68
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 5657,
|
"start": 7535,
|
||||||
"end": 5663,
|
"end": 7541,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 199,
|
"line": 263,
|
||||||
"column": 56
|
"column": 56
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 199,
|
"line": 263,
|
||||||
"column": 62
|
"column": 62
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2702,15 +2738,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 5664,
|
"start": 7542,
|
||||||
"end": 5669,
|
"end": 7547,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 199,
|
"line": 263,
|
||||||
"column": 63
|
"column": 63
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 199,
|
"line": 263,
|
||||||
"column": 68
|
"column": 68
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2730,14 +2766,14 @@
|
||||||
{
|
{
|
||||||
"attributes": [
|
"attributes": [
|
||||||
{
|
{
|
||||||
"start": 7374,
|
"start": 10262,
|
||||||
"end": 7385,
|
"end": 10273,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "name",
|
"name": "name",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 7380,
|
"start": 10268,
|
||||||
"end": 7384,
|
"end": 10272,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "cell",
|
"raw": "cell",
|
||||||
"data": "cell"
|
"data": "cell"
|
||||||
|
|
@ -2745,26 +2781,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 7386,
|
"start": 10274,
|
||||||
"end": 7397,
|
"end": 10285,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "row",
|
"name": "row",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 7391,
|
"start": 10279,
|
||||||
"end": 7396,
|
"end": 10284,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7392,
|
"start": 10280,
|
||||||
"end": 7395,
|
"end": 10283,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 337,
|
||||||
"column": 38
|
"column": 38
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 337,
|
||||||
"column": 41
|
"column": 41
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2774,26 +2810,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 7398,
|
"start": 10286,
|
||||||
"end": 7411,
|
"end": 10299,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "cell",
|
"name": "cell",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 7404,
|
"start": 10292,
|
||||||
"end": 7410,
|
"end": 10298,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7405,
|
"start": 10293,
|
||||||
"end": 7409,
|
"end": 10297,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 245,
|
"line": 337,
|
||||||
"column": 51
|
"column": 51
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 245,
|
"line": 337,
|
||||||
"column": 55
|
"column": 55
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2805,69 +2841,69 @@
|
||||||
],
|
],
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"start": 7412,
|
"start": 10300,
|
||||||
"end": 7429,
|
"end": 10317,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "\n ",
|
"raw": "\n ",
|
||||||
"data": "\n "
|
"data": "\n "
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 7429,
|
"start": 10317,
|
||||||
"end": 7495,
|
"end": 10383,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "ConditionalExpression",
|
"type": "ConditionalExpression",
|
||||||
"start": 7430,
|
"start": 10318,
|
||||||
"end": 7494,
|
"end": 10382,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 17
|
"column": 17
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 81
|
"column": 81
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"test": {
|
"test": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7430,
|
"start": 10318,
|
||||||
"end": 7448,
|
"end": 10336,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 17
|
"column": 17
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 35
|
"column": 35
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7430,
|
"start": 10318,
|
||||||
"end": 7440,
|
"end": 10328,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 17
|
"column": 17
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 27
|
"column": 27
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7430,
|
"start": 10318,
|
||||||
"end": 7437,
|
"end": 10325,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 17
|
"column": 17
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 24
|
"column": 24
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2875,15 +2911,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7438,
|
"start": 10326,
|
||||||
"end": 7439,
|
"end": 10327,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 25
|
"column": 25
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 26
|
"column": 26
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2894,15 +2930,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7441,
|
"start": 10329,
|
||||||
"end": 7448,
|
"end": 10336,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 28
|
"column": 28
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 35
|
"column": 35
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2913,57 +2949,57 @@
|
||||||
},
|
},
|
||||||
"consequent": {
|
"consequent": {
|
||||||
"type": "CallExpression",
|
"type": "CallExpression",
|
||||||
"start": 7451,
|
"start": 10339,
|
||||||
"end": 7481,
|
"end": 10369,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 38
|
"column": 38
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 68
|
"column": 68
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"callee": {
|
"callee": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7451,
|
"start": 10339,
|
||||||
"end": 7469,
|
"end": 10357,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 38
|
"column": 38
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 56
|
"column": 56
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7451,
|
"start": 10339,
|
||||||
"end": 7461,
|
"end": 10349,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 38
|
"column": 38
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 48
|
"column": 48
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7451,
|
"start": 10339,
|
||||||
"end": 7458,
|
"end": 10346,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 38
|
"column": 38
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 45
|
"column": 45
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2971,15 +3007,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7459,
|
"start": 10347,
|
||||||
"end": 7460,
|
"end": 10348,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 46
|
"column": 46
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 47
|
"column": 47
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2990,15 +3026,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7462,
|
"start": 10350,
|
||||||
"end": 7469,
|
"end": 10357,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 49
|
"column": 49
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 56
|
"column": 56
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -3010,29 +3046,29 @@
|
||||||
"arguments": [
|
"arguments": [
|
||||||
{
|
{
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7470,
|
"start": 10358,
|
||||||
"end": 7480,
|
"end": 10368,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 57
|
"column": 57
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 67
|
"column": 67
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7470,
|
"start": 10358,
|
||||||
"end": 7474,
|
"end": 10362,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 57
|
"column": 57
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 61
|
"column": 61
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -3040,15 +3076,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7475,
|
"start": 10363,
|
||||||
"end": 7480,
|
"end": 10368,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 62
|
"column": 62
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 67
|
"column": 67
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -3062,29 +3098,29 @@
|
||||||
},
|
},
|
||||||
"alternate": {
|
"alternate": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 7484,
|
"start": 10372,
|
||||||
"end": 7494,
|
"end": 10382,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 71
|
"column": 71
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 81
|
"column": 81
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7484,
|
"start": 10372,
|
||||||
"end": 7488,
|
"end": 10376,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 71
|
"column": 71
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 75
|
"column": 75
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -3092,15 +3128,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7489,
|
"start": 10377,
|
||||||
"end": 7494,
|
"end": 10382,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 76
|
"column": 76
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 246,
|
"line": 338,
|
||||||
"column": 81
|
"column": 81
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -3112,8 +3148,8 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 7495,
|
"start": 10383,
|
||||||
"end": 7510,
|
"end": 10398,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "\n ",
|
"raw": "\n ",
|
||||||
"data": "\n "
|
"data": "\n "
|
||||||
|
|
@ -3128,14 +3164,14 @@
|
||||||
{
|
{
|
||||||
"attributes": [
|
"attributes": [
|
||||||
{
|
{
|
||||||
"start": 8046,
|
"start": 10934,
|
||||||
"end": 8065,
|
"end": 10953,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "name",
|
"name": "name",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 8052,
|
"start": 10940,
|
||||||
"end": 8064,
|
"end": 10952,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "expanded-row",
|
"raw": "expanded-row",
|
||||||
"data": "expanded-row"
|
"data": "expanded-row"
|
||||||
|
|
@ -3143,26 +3179,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 8066,
|
"start": 10954,
|
||||||
"end": 8077,
|
"end": 10965,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "row",
|
"name": "row",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 8071,
|
"start": 10959,
|
||||||
"end": 8076,
|
"end": 10964,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 8072,
|
"start": 10960,
|
||||||
"end": 8075,
|
"end": 10963,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 265,
|
"line": 357,
|
||||||
"column": 48
|
"column": 48
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 265,
|
"line": 357,
|
||||||
"column": 51
|
"column": 51
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -15504,6 +15540,49 @@
|
||||||
"forwarded_events": [],
|
"forwarded_events": [],
|
||||||
"dispatched_events": []
|
"dispatched_events": []
|
||||||
},
|
},
|
||||||
|
"ToolbarBatchActions": {
|
||||||
|
"moduleName": "ToolbarBatchActions",
|
||||||
|
"props": [
|
||||||
|
[
|
||||||
|
"formatTotalSelected",
|
||||||
|
{
|
||||||
|
"kind": "let",
|
||||||
|
"type": "(totalSelected: number) => string",
|
||||||
|
"description": "Override the total items selected text"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"slots": [
|
||||||
|
[
|
||||||
|
"default",
|
||||||
|
{
|
||||||
|
"attributes": [],
|
||||||
|
"children": [],
|
||||||
|
"default": true,
|
||||||
|
"default_value": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"forwarded_events": [],
|
||||||
|
"dispatched_events": []
|
||||||
|
},
|
||||||
|
"ToolbarContent": {
|
||||||
|
"moduleName": "ToolbarContent",
|
||||||
|
"props": [],
|
||||||
|
"slots": [
|
||||||
|
[
|
||||||
|
"default",
|
||||||
|
{
|
||||||
|
"attributes": [],
|
||||||
|
"children": [],
|
||||||
|
"default": true,
|
||||||
|
"default_value": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"forwarded_events": [],
|
||||||
|
"dispatched_events": []
|
||||||
|
},
|
||||||
"ToolbarSearch": {
|
"ToolbarSearch": {
|
||||||
"moduleName": "ToolbarSearch",
|
"moduleName": "ToolbarSearch",
|
||||||
"props": [
|
"props": [
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
components: ["DataTable", "Toolbar", "ToolbarSearch"]
|
components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarBatchActions"]
|
||||||
---
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { DataTable, DataTableSkeleton, Toolbar, ToolbarSearch, Button, Link } from "carbon-components-svelte";
|
import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, Button, Link } from "carbon-components-svelte";
|
||||||
import Launch16 from "carbon-icons-svelte/lib/Launch16";
|
import Launch16 from "carbon-icons-svelte/lib/Launch16";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -247,8 +247,10 @@ The slot name for the table header cells is `"cell-header"`.
|
||||||
]}"
|
]}"
|
||||||
>
|
>
|
||||||
<Toolbar>
|
<Toolbar>
|
||||||
<ToolbarSearch />
|
<ToolbarContent>
|
||||||
<Button>Create</Button>
|
<ToolbarSearch />
|
||||||
|
<Button>Create</Button>
|
||||||
|
</ToolbarContent>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
|
|
@ -307,8 +309,10 @@ The slot name for the table header cells is `"cell-header"`.
|
||||||
]}"
|
]}"
|
||||||
>
|
>
|
||||||
<Toolbar size="sm">
|
<Toolbar size="sm">
|
||||||
<ToolbarSearch />
|
<ToolbarContent>
|
||||||
<Button size="small">Create</Button>
|
<ToolbarSearch />
|
||||||
|
<Button>Create</Button>
|
||||||
|
</ToolbarContent>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
|
|
@ -587,6 +591,23 @@ The slot name for the table header cells is `"cell-header"`.
|
||||||
]}"
|
]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
### Selectable
|
||||||
|
|
||||||
|
<FileSource src="/framed/DataTable/SelectableDataTable" />
|
||||||
|
|
||||||
|
### Initial selected rows
|
||||||
|
|
||||||
|
<FileSource src="/framed/DataTable/DataTableBatchSelection" />
|
||||||
|
|
||||||
|
### Selectable with batch actions
|
||||||
|
|
||||||
|
<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />
|
||||||
|
|
||||||
|
### Selectable (radio)
|
||||||
|
|
||||||
|
<FileSource src="/framed/DataTable/RadioSelectableDataTable" />
|
||||||
|
|
||||||
### Expandable
|
### Expandable
|
||||||
|
|
||||||
<DataTable expandable
|
<DataTable expandable
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<script>
|
||||||
|
import { DataTable } from "carbon-components-svelte";
|
||||||
|
|
||||||
|
const headers = [
|
||||||
|
{ key: "name", value: "Name" },
|
||||||
|
{ key: "port", value: "Port" },
|
||||||
|
{ key: "rule", value: "Rule" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const rows = [
|
||||||
|
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||||
|
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||||
|
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||||
|
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||||
|
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||||
|
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||||
|
];
|
||||||
|
|
||||||
|
let selectedRowIds = [rows[0].id, rows[1].id];
|
||||||
|
|
||||||
|
$: console.log("selectedRowIds", selectedRowIds);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<DataTable
|
||||||
|
batchSelection
|
||||||
|
bind:selectedRowIds
|
||||||
|
headers="{headers}"
|
||||||
|
rows="{rows}"
|
||||||
|
/>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
DataTable,
|
||||||
|
Toolbar,
|
||||||
|
ToolbarContent,
|
||||||
|
ToolbarSearch,
|
||||||
|
ToolbarBatchActions,
|
||||||
|
Button,
|
||||||
|
} from "carbon-components-svelte";
|
||||||
|
import Save16 from "carbon-icons-svelte/lib/Save16";
|
||||||
|
|
||||||
|
const headers = [
|
||||||
|
{ key: "name", value: "Name" },
|
||||||
|
{ key: "port", value: "Port" },
|
||||||
|
{ key: "rule", value: "Rule" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const rows = [
|
||||||
|
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||||
|
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||||
|
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||||
|
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||||
|
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||||
|
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||||
|
];
|
||||||
|
|
||||||
|
let selectedRowIds = [rows[0].id, rows[1].id];
|
||||||
|
|
||||||
|
$: console.log("selectedRowIds", selectedRowIds);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
|
||||||
|
<Toolbar>
|
||||||
|
<ToolbarBatchActions>
|
||||||
|
<Button icon="{Save16}">Save</Button>
|
||||||
|
</ToolbarBatchActions>
|
||||||
|
<ToolbarContent>
|
||||||
|
<ToolbarSearch />
|
||||||
|
<Button>Create</Button>
|
||||||
|
</ToolbarContent>
|
||||||
|
</Toolbar>
|
||||||
|
</DataTable>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script>
|
||||||
|
import { DataTable } from "carbon-components-svelte";
|
||||||
|
|
||||||
|
const headers = [
|
||||||
|
{ key: "name", value: "Name" },
|
||||||
|
{ key: "port", value: "Port" },
|
||||||
|
{ key: "rule", value: "Rule" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const rows = [
|
||||||
|
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||||
|
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||||
|
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||||
|
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||||
|
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||||
|
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||||
|
];
|
||||||
|
|
||||||
|
let selectedRowIds = [rows[1].id];
|
||||||
|
|
||||||
|
$: console.log("selectedRowIds", selectedRowIds);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<DataTable radio bind:selectedRowIds headers="{headers}" rows="{rows}" />
|
||||||
24
docs/src/pages/framed/DataTable/SelectableDataTable.svelte
Normal file
24
docs/src/pages/framed/DataTable/SelectableDataTable.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script>
|
||||||
|
import { DataTable } from "carbon-components-svelte";
|
||||||
|
|
||||||
|
const headers = [
|
||||||
|
{ key: "name", value: "Name" },
|
||||||
|
{ key: "port", value: "Port" },
|
||||||
|
{ key: "rule", value: "Rule" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const rows = [
|
||||||
|
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||||
|
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||||
|
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||||
|
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||||
|
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||||
|
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||||
|
];
|
||||||
|
|
||||||
|
let selectedRowIds = [];
|
||||||
|
|
||||||
|
$: console.log("selectedRowIds", selectedRowIds);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<DataTable selectable bind:selectedRowIds headers="{headers}" rows="{rows}" />
|
||||||
43
src/Checkbox/InlineCheckbox.svelte
Normal file
43
src/Checkbox/InlineCheckbox.svelte
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Specify whether the checkbox is checked
|
||||||
|
* @type {boolean} [checked=false]
|
||||||
|
*/
|
||||||
|
export let checked = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify whether the checkbox is indeterminate
|
||||||
|
* @type {boolean} [indeterminate=false]
|
||||||
|
*/
|
||||||
|
export let indeterminate = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the title attribute for the label element
|
||||||
|
* @type {string} [title]
|
||||||
|
*/
|
||||||
|
export let title = undefined;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set an id for the input label
|
||||||
|
* @type {string} [id]
|
||||||
|
*/
|
||||||
|
export let id = "ccs-" + Math.random().toString(36);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
class:bx--checkbox="{true}"
|
||||||
|
checked="{indeterminate ? false : checked}"
|
||||||
|
indeterminate="{indeterminate}"
|
||||||
|
id="{id}"
|
||||||
|
{...$$restProps}
|
||||||
|
aria-label="{undefined}"
|
||||||
|
aria-checked="{indeterminate ? 'mixed' : checked}"
|
||||||
|
on:change
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
for="{id}"
|
||||||
|
title="{title}"
|
||||||
|
aria-label="{$$props['aria-label']}"
|
||||||
|
class:bx--checkbox-label="{true}"
|
||||||
|
></label>
|
||||||
|
|
@ -1,2 +1,3 @@
|
||||||
export { default as Checkbox } from "./Checkbox.svelte";
|
export { default as Checkbox } from "./Checkbox.svelte";
|
||||||
export { default as CheckboxSkeleton } from "./Checkbox.Skeleton.svelte";
|
export { default as CheckboxSkeleton } from "./Checkbox.Skeleton.svelte";
|
||||||
|
export { default as InlineCheckbox } from "./InlineCheckbox.svelte";
|
||||||
|
|
|
||||||
|
|
@ -61,6 +61,31 @@
|
||||||
*/
|
*/
|
||||||
export let expandedRowIds = [];
|
export let expandedRowIds = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` for the radio selection variant
|
||||||
|
* @type {boolean} [radio=false]
|
||||||
|
*/
|
||||||
|
export let radio = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` for the selectable variant
|
||||||
|
* Automatically set to `true` if `radio` or `batchSelection` are `true`
|
||||||
|
* @type {boolean} [selectable=false]
|
||||||
|
*/
|
||||||
|
export let selectable = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` to enable batch selection
|
||||||
|
* @type {boolean} [batchSelection=false]
|
||||||
|
*/
|
||||||
|
export let batchSelection = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the row ids to be selected
|
||||||
|
* @type {string[]} [selectedRowIds=[]]
|
||||||
|
*/
|
||||||
|
export let selectedRowIds = [];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set to `true` to enable a sticky header
|
* Set to `true` to enable a sticky header
|
||||||
* @type {boolean} [stickyHeader=false]
|
* @type {boolean} [stickyHeader=false]
|
||||||
|
|
@ -70,6 +95,8 @@
|
||||||
import { createEventDispatcher, setContext } from "svelte";
|
import { createEventDispatcher, setContext } from "svelte";
|
||||||
import { writable, derived } from "svelte/store";
|
import { writable, derived } from "svelte/store";
|
||||||
import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
|
import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
|
||||||
|
import { InlineCheckbox } from "../Checkbox";
|
||||||
|
import { RadioButton } from "../RadioButton";
|
||||||
import Table from "./Table.svelte";
|
import Table from "./Table.svelte";
|
||||||
import TableBody from "./TableBody.svelte";
|
import TableBody from "./TableBody.svelte";
|
||||||
import TableCell from "./TableCell.svelte";
|
import TableCell from "./TableCell.svelte";
|
||||||
|
|
@ -84,6 +111,7 @@
|
||||||
descending: "none",
|
descending: "none",
|
||||||
};
|
};
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
const batchSelectedIds = writable(false);
|
||||||
const tableSortable = writable(sortable);
|
const tableSortable = writable(sortable);
|
||||||
const sortHeader = writable({
|
const sortHeader = writable({
|
||||||
id: null,
|
id: null,
|
||||||
|
|
@ -101,6 +129,10 @@
|
||||||
setContext("DataTable", {
|
setContext("DataTable", {
|
||||||
sortHeader,
|
sortHeader,
|
||||||
tableSortable,
|
tableSortable,
|
||||||
|
batchSelectedIds,
|
||||||
|
resetSelectedRowIds: () => {
|
||||||
|
selectedRowIds = [];
|
||||||
|
},
|
||||||
add: (id) => {
|
add: (id) => {
|
||||||
headerItems.update((_) => [..._, id]);
|
headerItems.update((_) => [..._, id]);
|
||||||
},
|
},
|
||||||
|
|
@ -113,7 +145,13 @@
|
||||||
(a, id) => ({ ...a, [id]: true }),
|
(a, id) => ({ ...a, [id]: true }),
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
let selectAll = false;
|
||||||
|
$: batchSelectedIds.set(selectedRowIds);
|
||||||
|
$: indeterminate =
|
||||||
|
selectedRowIds.length > 0 && selectedRowIds.length < rows.length;
|
||||||
$: if (batchExpansion) expandable = true;
|
$: if (batchExpansion) expandable = true;
|
||||||
|
$: if (radio || batchSelection) selectable = true;
|
||||||
$: tableSortable.set(sortable);
|
$: tableSortable.set(sortable);
|
||||||
$: headerKeys = headers.map(({ key }) => key);
|
$: headerKeys = headers.map(({ key }) => key);
|
||||||
$: rows = rows.map((row) => ({
|
$: rows = rows.map((row) => ({
|
||||||
|
|
@ -180,6 +218,32 @@
|
||||||
{/if}
|
{/if}
|
||||||
</th>
|
</th>
|
||||||
{/if}
|
{/if}
|
||||||
|
{#if selectable && !batchSelection}
|
||||||
|
<th scope="col"></th>
|
||||||
|
{/if}
|
||||||
|
{#if batchSelection && !radio}
|
||||||
|
<th scope="col" class:bx--table-column-checkbox="{true}">
|
||||||
|
<InlineCheckbox
|
||||||
|
aria-label="Select all rows"
|
||||||
|
checked="{selectAll}"
|
||||||
|
indeterminate="{indeterminate}"
|
||||||
|
on:change="{(e) => {
|
||||||
|
if (indeterminate) {
|
||||||
|
e.target.checked = false;
|
||||||
|
selectAll = false;
|
||||||
|
selectedRowIds = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.target.checked) {
|
||||||
|
selectedRowIds = rows.map((row) => row.id);
|
||||||
|
} else {
|
||||||
|
selectedRowIds = [];
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
/>
|
||||||
|
</th>
|
||||||
|
{/if}
|
||||||
{#each headers as header, i (header.key)}
|
{#each headers as header, i (header.key)}
|
||||||
<TableHeader
|
<TableHeader
|
||||||
on:click="{() => {
|
on:click="{() => {
|
||||||
|
|
@ -235,6 +299,34 @@
|
||||||
</button>
|
</button>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
{/if}
|
{/if}
|
||||||
|
{#if selectable}
|
||||||
|
<td
|
||||||
|
class:bx--table-column-checkbox="{true}"
|
||||||
|
class:bx--table-column-radio="{radio}"
|
||||||
|
>
|
||||||
|
{#if radio}
|
||||||
|
<RadioButton
|
||||||
|
name="select-row-{row.id}"
|
||||||
|
checked="{selectedRowIds.includes(row.id)}"
|
||||||
|
on:change="{() => {
|
||||||
|
selectedRowIds = [row.id];
|
||||||
|
}}"
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<InlineCheckbox
|
||||||
|
name="select-row-{row.id}"
|
||||||
|
checked="{selectedRowIds.includes(row.id)}"
|
||||||
|
on:change="{() => {
|
||||||
|
if (selectedRowIds.includes(row.id)) {
|
||||||
|
selectedRowIds = selectedRowIds.filter((id) => id !== row.id);
|
||||||
|
} else {
|
||||||
|
selectedRowIds = [...selectedRowIds, row.id];
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
{/if}
|
||||||
{#each row.cells as cell, j (cell.key)}
|
{#each row.cells as cell, j (cell.key)}
|
||||||
<TableCell
|
<TableCell
|
||||||
on:click="{() => {
|
on:click="{() => {
|
||||||
|
|
|
||||||
44
src/DataTable/ToolbarBatchActions.svelte
Normal file
44
src/DataTable/ToolbarBatchActions.svelte
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Override the total items selected text
|
||||||
|
* @type {(totalSelected: number) => string} [formatTotalSelected = (totalSelected: number) => string]
|
||||||
|
*/
|
||||||
|
export let formatTotalSelected = (totalSelected) =>
|
||||||
|
`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;
|
||||||
|
|
||||||
|
import { onMount, getContext } from "svelte";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
|
||||||
|
let batchSelectedIds = [];
|
||||||
|
|
||||||
|
$: showActions = batchSelectedIds.length > 0;
|
||||||
|
|
||||||
|
const ctx = getContext("DataTable");
|
||||||
|
const unsubscribe = ctx.batchSelectedIds.subscribe((value) => {
|
||||||
|
batchSelectedIds = value;
|
||||||
|
});
|
||||||
|
|
||||||
|
onMount(() => unsubscribe);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class:bx--batch-actions="{true}"
|
||||||
|
class:bx--batch-actions--active="{showActions}"
|
||||||
|
{...$$restProps}
|
||||||
|
>
|
||||||
|
<div class:bx--batch-summary="{true}">
|
||||||
|
<p class:bx--batch-summary__para="{true}">
|
||||||
|
<span> {formatTotalSelected(batchSelectedIds.length)} </span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class:bx--action-list="{true}">
|
||||||
|
<slot />
|
||||||
|
<Button
|
||||||
|
class="bx--batch-summary__cancel"
|
||||||
|
tabindex="{showActions ? '0' : '-1'}"
|
||||||
|
on:click="{ctx.resetSelectedRowIds}"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
3
src/DataTable/ToolbarContent.svelte
Normal file
3
src/DataTable/ToolbarContent.svelte
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<div class:bx--toolbar-content="{true}">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
@ -7,4 +7,6 @@ export { default as TableHead } from "./TableHead.svelte";
|
||||||
export { default as TableHeader } from "./TableHeader.svelte";
|
export { default as TableHeader } from "./TableHeader.svelte";
|
||||||
export { default as TableRow } from "./TableRow.svelte";
|
export { default as TableRow } from "./TableRow.svelte";
|
||||||
export { default as Toolbar } from "./Toolbar.svelte";
|
export { default as Toolbar } from "./Toolbar.svelte";
|
||||||
|
export { default as ToolbarContent } from "./ToolbarContent.svelte";
|
||||||
export { default as ToolbarSearch } from "./ToolbarSearch.svelte";
|
export { default as ToolbarSearch } from "./ToolbarSearch.svelte";
|
||||||
|
export { default as ToolbarBatchActions } from "./ToolbarBatchActions.svelte";
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,9 @@ export {
|
||||||
TableHeader,
|
TableHeader,
|
||||||
TableRow,
|
TableRow,
|
||||||
Toolbar,
|
Toolbar,
|
||||||
|
ToolbarContent,
|
||||||
ToolbarSearch,
|
ToolbarSearch,
|
||||||
|
ToolbarBatchActions,
|
||||||
} from "./DataTable";
|
} from "./DataTable";
|
||||||
export { DataTableSkeleton } from "./DataTableSkeleton";
|
export { DataTableSkeleton } from "./DataTableSkeleton";
|
||||||
export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";
|
export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";
|
||||||
|
|
|
||||||
40
types/index.d.ts
vendored
40
types/index.d.ts
vendored
|
|
@ -849,6 +849,31 @@ export class DataTable extends CarbonSvelteComponent {
|
||||||
*/
|
*/
|
||||||
expandedRowIds?: string[];
|
expandedRowIds?: string[];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` for the radio selection variant
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
radio?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` for the selectable variant
|
||||||
|
* Automatically set to `true` if `radio` or `batchSelection` are `true`
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
selectable?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `true` to enable batch selection
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
batchSelection?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the row ids to be selected
|
||||||
|
* @default []
|
||||||
|
*/
|
||||||
|
selectedRowIds?: string[];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set to `true` to enable a sticky header
|
* Set to `true` to enable a sticky header
|
||||||
* @default false
|
* @default false
|
||||||
|
|
@ -5091,6 +5116,21 @@ export class Toolbar extends CarbonSvelteComponent {
|
||||||
$$slot_def: { default: {} };
|
$$slot_def: { default: {} };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class ToolbarBatchActions extends CarbonSvelteComponent {
|
||||||
|
$$prop_def: {
|
||||||
|
/**
|
||||||
|
* Override the total items selected text
|
||||||
|
*/
|
||||||
|
formatTotalSelected?: (totalSelected: number) => string;
|
||||||
|
};
|
||||||
|
|
||||||
|
$$slot_def: { default: {} };
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ToolbarContent extends CarbonSvelteComponent {
|
||||||
|
$$slot_def: { default: {} };
|
||||||
|
}
|
||||||
|
|
||||||
export class ToolbarSearch extends CarbonSvelteComponent {
|
export class ToolbarSearch extends CarbonSvelteComponent {
|
||||||
$$prop_def: {
|
$$prop_def: {
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue