mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
Merge pull request #352 from albertms10/datatable-display-sort
feat: add DataTable display and sort methods
This commit is contained in:
Eric Liu
GitHub
commit
e67272fe9f
4 changed files with 393 additions and 116 deletions
|
|
@ -981,8 +981,8 @@ 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;}[]</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. |
|
||||||
|
|
|
||||||
|
|
@ -2512,7 +2512,7 @@
|
||||||
{
|
{
|
||||||
"kind": "let",
|
"kind": "let",
|
||||||
"value": "[]",
|
"value": "[]",
|
||||||
"type": "{key: string; value: string;}[]",
|
"type": "{key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[]",
|
||||||
"description": "Specify the data table headers"
|
"description": "Specify the data table headers"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -2612,14 +2612,14 @@
|
||||||
{
|
{
|
||||||
"attributes": [
|
"attributes": [
|
||||||
{
|
{
|
||||||
"start": 5357,
|
"start": 5608,
|
||||||
"end": 5375,
|
"end": 5626,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "name",
|
"name": "name",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 5363,
|
"start": 5614,
|
||||||
"end": 5374,
|
"end": 5625,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "cell-header",
|
"raw": "cell-header",
|
||||||
"data": "cell-header"
|
"data": "cell-header"
|
||||||
|
|
@ -2627,26 +2627,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 5376,
|
"start": 5627,
|
||||||
"end": 5393,
|
"end": 5644,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "header",
|
"name": "header",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 5384,
|
"start": 5635,
|
||||||
"end": 5392,
|
"end": 5643,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 5385,
|
"start": 5636,
|
||||||
"end": 5391,
|
"end": 5642,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 188,
|
"line": 198,
|
||||||
"column": 46
|
"column": 46
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 188,
|
"line": 198,
|
||||||
"column": 52
|
"column": 52
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2658,34 +2658,34 @@
|
||||||
],
|
],
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"start": 5394,
|
"start": 5645,
|
||||||
"end": 5408,
|
"end": 5659,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "MemberExpression",
|
"type": "MemberExpression",
|
||||||
"start": 5395,
|
"start": 5646,
|
||||||
"end": 5407,
|
"end": 5658,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 188,
|
"line": 198,
|
||||||
"column": 56
|
"column": 56
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 188,
|
"line": 198,
|
||||||
"column": 68
|
"column": 68
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 5395,
|
"start": 5646,
|
||||||
"end": 5401,
|
"end": 5652,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 188,
|
"line": 198,
|
||||||
"column": 56
|
"column": 56
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 188,
|
"line": 198,
|
||||||
"column": 62
|
"column": 62
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2693,15 +2693,15 @@
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 5402,
|
"start": 5653,
|
||||||
"end": 5407,
|
"end": 5658,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 188,
|
"line": 198,
|
||||||
"column": 63
|
"column": 63
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 188,
|
"line": 198,
|
||||||
"column": 68
|
"column": 68
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2721,14 +2721,14 @@
|
||||||
{
|
{
|
||||||
"attributes": [
|
"attributes": [
|
||||||
{
|
{
|
||||||
"start": 7112,
|
"start": 7363,
|
||||||
"end": 7123,
|
"end": 7374,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "name",
|
"name": "name",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 7118,
|
"start": 7369,
|
||||||
"end": 7122,
|
"end": 7373,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "cell",
|
"raw": "cell",
|
||||||
"data": "cell"
|
"data": "cell"
|
||||||
|
|
@ -2736,26 +2736,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 7124,
|
"start": 7375,
|
||||||
"end": 7135,
|
"end": 7386,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "row",
|
"name": "row",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 7129,
|
"start": 7380,
|
||||||
"end": 7134,
|
"end": 7385,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7130,
|
"start": 7381,
|
||||||
"end": 7133,
|
"end": 7384,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 234,
|
"line": 244,
|
||||||
"column": 38
|
"column": 38
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 234,
|
"line": 244,
|
||||||
"column": 41
|
"column": 41
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2765,26 +2765,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 7136,
|
"start": 7387,
|
||||||
"end": 7149,
|
"end": 7400,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "cell",
|
"name": "cell",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 7142,
|
"start": 7393,
|
||||||
"end": 7148,
|
"end": 7399,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7143,
|
"start": 7394,
|
||||||
"end": 7147,
|
"end": 7398,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 234,
|
"line": 244,
|
||||||
"column": 51
|
"column": 51
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 234,
|
"line": 244,
|
||||||
"column": 55
|
"column": 55
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -2796,51 +2796,303 @@
|
||||||
],
|
],
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"start": 7150,
|
"start": 7401,
|
||||||
"end": 7162,
|
"end": 7418,
|
||||||
|
"type": "Text",
|
||||||
|
"raw": "\n ",
|
||||||
|
"data": "\n "
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"start": 7418,
|
||||||
|
"end": 7484,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "MemberExpression",
|
"type": "ConditionalExpression",
|
||||||
"start": 7151,
|
"start": 7419,
|
||||||
"end": 7161,
|
"end": 7483,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 234,
|
"line": 245,
|
||||||
"column": 59
|
"column": 17
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 234,
|
"line": 245,
|
||||||
"column": 69
|
"column": 81
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"type": "MemberExpression",
|
||||||
|
"start": 7419,
|
||||||
|
"end": 7437,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 17
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 35
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"object": {
|
||||||
|
"type": "MemberExpression",
|
||||||
|
"start": 7419,
|
||||||
|
"end": 7429,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 17
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 27
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"object": {
|
"object": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7151,
|
"start": 7419,
|
||||||
"end": 7155,
|
"end": 7426,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 234,
|
"line": 245,
|
||||||
"column": 59
|
"column": 17
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 234,
|
"line": 245,
|
||||||
"column": 63
|
"column": 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "headers"
|
||||||
|
},
|
||||||
|
"property": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 7427,
|
||||||
|
"end": 7428,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 25
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 26
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "j"
|
||||||
|
},
|
||||||
|
"computed": true,
|
||||||
|
"optional": false
|
||||||
|
},
|
||||||
|
"property": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 7430,
|
||||||
|
"end": 7437,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 28
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 35
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "display"
|
||||||
|
},
|
||||||
|
"computed": false,
|
||||||
|
"optional": false
|
||||||
|
},
|
||||||
|
"consequent": {
|
||||||
|
"type": "CallExpression",
|
||||||
|
"start": 7440,
|
||||||
|
"end": 7470,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 38
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 68
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"callee": {
|
||||||
|
"type": "MemberExpression",
|
||||||
|
"start": 7440,
|
||||||
|
"end": 7458,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 38
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 56
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"object": {
|
||||||
|
"type": "MemberExpression",
|
||||||
|
"start": 7440,
|
||||||
|
"end": 7450,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 38
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 48
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"object": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 7440,
|
||||||
|
"end": 7447,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 38
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 45
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "headers"
|
||||||
|
},
|
||||||
|
"property": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 7448,
|
||||||
|
"end": 7449,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 46
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "j"
|
||||||
|
},
|
||||||
|
"computed": true,
|
||||||
|
"optional": false
|
||||||
|
},
|
||||||
|
"property": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 7451,
|
||||||
|
"end": 7458,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 49
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 56
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "display"
|
||||||
|
},
|
||||||
|
"computed": false,
|
||||||
|
"optional": false
|
||||||
|
},
|
||||||
|
"arguments": [
|
||||||
|
{
|
||||||
|
"type": "MemberExpression",
|
||||||
|
"start": 7459,
|
||||||
|
"end": 7469,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 57
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 67
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"object": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 7459,
|
||||||
|
"end": 7463,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 57
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 61
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"name": "cell"
|
"name": "cell"
|
||||||
},
|
},
|
||||||
"property": {
|
"property": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7156,
|
"start": 7464,
|
||||||
"end": 7161,
|
"end": 7469,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 234,
|
"line": 245,
|
||||||
"column": 64
|
"column": 62
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 234,
|
"line": 245,
|
||||||
"column": 69
|
"column": 67
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "value"
|
||||||
|
},
|
||||||
|
"computed": false,
|
||||||
|
"optional": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"optional": false
|
||||||
|
},
|
||||||
|
"alternate": {
|
||||||
|
"type": "MemberExpression",
|
||||||
|
"start": 7473,
|
||||||
|
"end": 7483,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 71
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 81
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"object": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 7473,
|
||||||
|
"end": 7477,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 71
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 75
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "cell"
|
||||||
|
},
|
||||||
|
"property": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 7478,
|
||||||
|
"end": 7483,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 76
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 245,
|
||||||
|
"column": 81
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"name": "value"
|
"name": "value"
|
||||||
|
|
@ -2849,9 +3101,17 @@
|
||||||
"optional": false
|
"optional": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"start": 7484,
|
||||||
|
"end": 7499,
|
||||||
|
"type": "Text",
|
||||||
|
"raw": "\n ",
|
||||||
|
"data": "\n "
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"default": false,
|
"default": false,
|
||||||
"default_value": "{cell.value}\n"
|
"default_value": "\n \n{headers[j].display ? headers[j].display(cell.value) : cell.value}\n\n \n"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
|
|
@ -2859,14 +3119,14 @@
|
||||||
{
|
{
|
||||||
"attributes": [
|
"attributes": [
|
||||||
{
|
{
|
||||||
"start": 7698,
|
"start": 8035,
|
||||||
"end": 7717,
|
"end": 8054,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "name",
|
"name": "name",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 7704,
|
"start": 8041,
|
||||||
"end": 7716,
|
"end": 8053,
|
||||||
"type": "Text",
|
"type": "Text",
|
||||||
"raw": "expanded-row",
|
"raw": "expanded-row",
|
||||||
"data": "expanded-row"
|
"data": "expanded-row"
|
||||||
|
|
@ -2874,26 +3134,26 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"start": 7718,
|
"start": 8055,
|
||||||
"end": 7729,
|
"end": 8066,
|
||||||
"type": "Attribute",
|
"type": "Attribute",
|
||||||
"name": "row",
|
"name": "row",
|
||||||
"value": [
|
"value": [
|
||||||
{
|
{
|
||||||
"start": 7723,
|
"start": 8060,
|
||||||
"end": 7728,
|
"end": 8065,
|
||||||
"type": "MustacheTag",
|
"type": "MustacheTag",
|
||||||
"expression": {
|
"expression": {
|
||||||
"type": "Identifier",
|
"type": "Identifier",
|
||||||
"start": 7724,
|
"start": 8061,
|
||||||
"end": 7727,
|
"end": 8064,
|
||||||
"loc": {
|
"loc": {
|
||||||
"start": {
|
"start": {
|
||||||
"line": 252,
|
"line": 264,
|
||||||
"column": 48
|
"column": 48
|
||||||
},
|
},
|
||||||
"end": {
|
"end": {
|
||||||
"line": 252,
|
"line": 264,
|
||||||
"column": 51
|
"column": 51
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
* Specify the data table headers
|
* Specify the data table headers
|
||||||
* @type {{key: string; value: string;}[]} [headers=[]]
|
* @type {{key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[]} [headers=[]]
|
||||||
*/
|
*/
|
||||||
export let headers = [];
|
export let headers = [];
|
||||||
|
|
||||||
|
|
@ -85,7 +85,12 @@
|
||||||
};
|
};
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
const tableSortable = writable(sortable);
|
const tableSortable = writable(sortable);
|
||||||
const sortHeader = writable({ id: null, key: null, sortDirection: "none" });
|
const sortHeader = writable({
|
||||||
|
id: null,
|
||||||
|
key: null,
|
||||||
|
sort: undefined,
|
||||||
|
sortDirection: "none",
|
||||||
|
});
|
||||||
const headerItems = writable([]);
|
const headerItems = writable([]);
|
||||||
const thKeys = derived(headerItems, () =>
|
const thKeys = derived(headerItems, () =>
|
||||||
headers
|
headers
|
||||||
|
|
@ -123,7 +128,10 @@
|
||||||
if ($sortHeader.sortDirection === "none") {
|
if ($sortHeader.sortDirection === "none") {
|
||||||
sortedRows = rows;
|
sortedRows = rows;
|
||||||
} else {
|
} else {
|
||||||
sortedRows = [...rows].sort((a, b) => {
|
sortedRows = [...rows].sort(
|
||||||
|
$sortHeader.sort
|
||||||
|
? $sortHeader.sort
|
||||||
|
: (a, b) => {
|
||||||
const itemA = ascending ? a[sortKey] : b[sortKey];
|
const itemA = ascending ? a[sortKey] : b[sortKey];
|
||||||
const itemB = ascending ? b[sortKey] : a[sortKey];
|
const itemB = ascending ? b[sortKey] : a[sortKey];
|
||||||
|
|
||||||
|
|
@ -134,7 +142,8 @@
|
||||||
return itemA
|
return itemA
|
||||||
.toString()
|
.toString()
|
||||||
.localeCompare(itemB.toString(), "en", { numeric: true });
|
.localeCompare(itemB.toString(), "en", { numeric: true });
|
||||||
});
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -181,6 +190,7 @@
|
||||||
sortHeader.set({
|
sortHeader.set({
|
||||||
id: sortDirection === 'none' ? null : $thKeys[header.key],
|
id: sortDirection === 'none' ? null : $thKeys[header.key],
|
||||||
key: header.key,
|
key: header.key,
|
||||||
|
sort: header.sort,
|
||||||
sortDirection,
|
sortDirection,
|
||||||
});
|
});
|
||||||
}}"
|
}}"
|
||||||
|
|
@ -231,7 +241,9 @@
|
||||||
dispatch('click:cell', cell);
|
dispatch('click:cell', cell);
|
||||||
}}"
|
}}"
|
||||||
>
|
>
|
||||||
<slot name="cell" row="{row}" cell="{cell}">{cell.value}</slot>
|
<slot name="cell" row="{row}" cell="{cell}">
|
||||||
|
{headers[j].display ? headers[j].display(cell.value) : cell.value}
|
||||||
|
</slot>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
{/each}
|
{/each}
|
||||||
</TableRow>
|
</TableRow>
|
||||||
|
|
|
||||||
7
types/index.d.ts
vendored
7
types/index.d.ts
vendored
|
|
@ -787,7 +787,12 @@ export class DataTable extends CarbonSvelteComponent {
|
||||||
* Specify the data table headers
|
* Specify the data table headers
|
||||||
* @default []
|
* @default []
|
||||||
*/
|
*/
|
||||||
headers?: { key: string; value: string }[];
|
headers?: {
|
||||||
|
key: string;
|
||||||
|
value: string;
|
||||||
|
display?: (item) => string;
|
||||||
|
sort?: (a, b) => number;
|
||||||
|
}[];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify the rows the data table should render
|
* Specify the rows the data table should render
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue