From 3c02829e73a34b0276732e07f31f749a1acbca19 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Mon, 26 Oct 2020 11:55:58 -0700 Subject: [PATCH 1/3] feat(data-table): support empty table body columns --- COMPONENT_INDEX.md | 34 +- docs/src/PUBLIC_API.json | 380 +++++++++--------- docs/src/pages/components/DataTable.svx | 13 +- .../DataTable/DataTableAppendColumns.svelte | 38 ++ .../DataTableBatchSelectionToolbar.svelte | 2 +- src/DataTable/DataTable.svelte | 68 ++-- types/index.d.ts | 2 + 7 files changed, 299 insertions(+), 238 deletions(-) create mode 100644 docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 307d5e70..d7833a54 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -989,23 +989,23 @@ import { DataTable } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :------------- | :----------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------- | -| headers | {key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[] | `[]` | 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. | -| radio | boolean | `false` | Set to `true` for the radio selection variant. | -| selectable | boolean | `false` | Set to `true` for the selectable variant. Automatically set to `true` if `radio` or `batchSelection` are `true`. | -| batchSelection | boolean | `false` | Set to `true` to enable batch selection. | -| selectedRowIds | string[] | `[]` | Specify the row ids to be selected. | -| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | +| Prop name | Type | Default value | Description | +| :------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------- | +| headers | {key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[] | `[]` | 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. | +| radio | boolean | `false` | Set to `true` for the radio selection variant. | +| selectable | boolean | `false` | Set to `true` for the selectable variant. Automatically set to `true` if `radio` or `batchSelection` are `true`. | +| batchSelection | boolean | `false` | Set to `true` to enable batch selection. | +| selectedRowIds | string[] | `[]` | Specify the row ids to be selected. | +| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | ### Slots diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json index e2321dc1..f01795e4 100644 --- a/docs/src/PUBLIC_API.json +++ b/docs/src/PUBLIC_API.json @@ -2532,7 +2532,7 @@ { "kind": "let", "value": "[]", - "type": "{key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[]", + "type": "{key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[]", "description": "Specify the data table headers" } ], @@ -2677,14 +2677,14 @@ { "attributes": [ { - "start": 7574, - "end": 7592, + "start": 7728, + "end": 7746, "type": "Attribute", "name": "name", "value": [ { - "start": 7580, - "end": 7591, + "start": 7734, + "end": 7745, "type": "Text", "raw": "cell-header", "data": "cell-header" @@ -2692,27 +2692,27 @@ ] }, { - "start": 7593, - "end": 7610, + "start": 7747, + "end": 7764, "type": "Attribute", "name": "header", "value": [ { - "start": 7601, - "end": 7609, + "start": 7755, + "end": 7763, "type": "MustacheTag", "expression": { "type": "Identifier", - "start": 7602, - "end": 7608, + "start": 7756, + "end": 7762, "loc": { "start": { - "line": 265, - "column": 46 + "line": 268, + "column": 48 }, "end": { - "line": 265, - "column": 52 + "line": 268, + "column": 54 } }, "name": "header" @@ -2723,51 +2723,51 @@ ], "children": [ { - "start": 7611, - "end": 7625, + "start": 7765, + "end": 7779, "type": "MustacheTag", "expression": { "type": "MemberExpression", - "start": 7612, - "end": 7624, + "start": 7766, + "end": 7778, "loc": { "start": { - "line": 265, - "column": 56 + "line": 268, + "column": 58 }, "end": { - "line": 265, - "column": 68 + "line": 268, + "column": 70 } }, "object": { "type": "Identifier", - "start": 7612, - "end": 7618, + "start": 7766, + "end": 7772, "loc": { "start": { - "line": 265, - "column": 56 + "line": 268, + "column": 58 }, "end": { - "line": 265, - "column": 62 + "line": 268, + "column": 64 } }, "name": "header" }, "property": { "type": "Identifier", - "start": 7619, - "end": 7624, + "start": 7773, + "end": 7778, "loc": { "start": { - "line": 265, - "column": 63 + "line": 268, + "column": 65 }, "end": { - "line": 265, - "column": 68 + "line": 268, + "column": 70 } }, "name": "value" @@ -2786,14 +2786,14 @@ { "attributes": [ { - "start": 10621, - "end": 10632, + "start": 11125, + "end": 11136, "type": "Attribute", "name": "name", "value": [ { - "start": 10627, - "end": 10631, + "start": 11131, + "end": 11135, "type": "Text", "raw": "cell", "data": "cell" @@ -2801,27 +2801,27 @@ ] }, { - "start": 10633, - "end": 10644, + "start": 11137, + "end": 11148, "type": "Attribute", "name": "row", "value": [ { - "start": 10638, - "end": 10643, + "start": 11142, + "end": 11147, "type": "MustacheTag", "expression": { "type": "Identifier", - "start": 10639, - "end": 10642, + "start": 11143, + "end": 11146, "loc": { "start": { - "line": 346, - "column": 38 + "line": 357, + "column": 40 }, "end": { - "line": 346, - "column": 41 + "line": 357, + "column": 43 } }, "name": "row" @@ -2830,27 +2830,27 @@ ] }, { - "start": 10645, - "end": 10658, + "start": 11149, + "end": 11162, "type": "Attribute", "name": "cell", "value": [ { - "start": 10651, - "end": 10657, + "start": 11155, + "end": 11161, "type": "MustacheTag", "expression": { "type": "Identifier", - "start": 10652, - "end": 10656, + "start": 11156, + "end": 11160, "loc": { "start": { - "line": 346, - "column": 51 + "line": 357, + "column": 53 }, "end": { - "line": 346, - "column": 55 + "line": 357, + "column": 57 } }, "name": "cell" @@ -2861,86 +2861,86 @@ ], "children": [ { - "start": 10659, - "end": 10676, + "start": 11163, + "end": 11182, "type": "Text", - "raw": "\n ", - "data": "\n " + "raw": "\n ", + "data": "\n " }, { - "start": 10676, - "end": 10742, + "start": 11182, + "end": 11248, "type": "MustacheTag", "expression": { "type": "ConditionalExpression", - "start": 10677, - "end": 10741, + "start": 11183, + "end": 11247, "loc": { "start": { - "line": 347, - "column": 17 + "line": 358, + "column": 19 }, "end": { - "line": 347, - "column": 81 + "line": 358, + "column": 83 } }, "test": { "type": "MemberExpression", - "start": 10677, - "end": 10695, + "start": 11183, + "end": 11201, "loc": { "start": { - "line": 347, - "column": 17 + "line": 358, + "column": 19 }, "end": { - "line": 347, - "column": 35 + "line": 358, + "column": 37 } }, "object": { "type": "MemberExpression", - "start": 10677, - "end": 10687, + "start": 11183, + "end": 11193, "loc": { "start": { - "line": 347, - "column": 17 + "line": 358, + "column": 19 }, "end": { - "line": 347, - "column": 27 + "line": 358, + "column": 29 } }, "object": { "type": "Identifier", - "start": 10677, - "end": 10684, + "start": 11183, + "end": 11190, "loc": { "start": { - "line": 347, - "column": 17 + "line": 358, + "column": 19 }, "end": { - "line": 347, - "column": 24 + "line": 358, + "column": 26 } }, "name": "headers" }, "property": { "type": "Identifier", - "start": 10685, - "end": 10686, + "start": 11191, + "end": 11192, "loc": { "start": { - "line": 347, - "column": 25 + "line": 358, + "column": 27 }, "end": { - "line": 347, - "column": 26 + "line": 358, + "column": 28 } }, "name": "j" @@ -2950,16 +2950,16 @@ }, "property": { "type": "Identifier", - "start": 10688, - "end": 10695, + "start": 11194, + "end": 11201, "loc": { "start": { - "line": 347, - "column": 28 + "line": 358, + "column": 30 }, "end": { - "line": 347, - "column": 35 + "line": 358, + "column": 37 } }, "name": "display" @@ -2969,74 +2969,74 @@ }, "consequent": { "type": "CallExpression", - "start": 10698, - "end": 10728, + "start": 11204, + "end": 11234, "loc": { "start": { - "line": 347, - "column": 38 + "line": 358, + "column": 40 }, "end": { - "line": 347, - "column": 68 + "line": 358, + "column": 70 } }, "callee": { "type": "MemberExpression", - "start": 10698, - "end": 10716, + "start": 11204, + "end": 11222, "loc": { "start": { - "line": 347, - "column": 38 + "line": 358, + "column": 40 }, "end": { - "line": 347, - "column": 56 + "line": 358, + "column": 58 } }, "object": { "type": "MemberExpression", - "start": 10698, - "end": 10708, + "start": 11204, + "end": 11214, "loc": { "start": { - "line": 347, - "column": 38 + "line": 358, + "column": 40 }, "end": { - "line": 347, - "column": 48 + "line": 358, + "column": 50 } }, "object": { "type": "Identifier", - "start": 10698, - "end": 10705, + "start": 11204, + "end": 11211, "loc": { "start": { - "line": 347, - "column": 38 + "line": 358, + "column": 40 }, "end": { - "line": 347, - "column": 45 + "line": 358, + "column": 47 } }, "name": "headers" }, "property": { "type": "Identifier", - "start": 10706, - "end": 10707, + "start": 11212, + "end": 11213, "loc": { "start": { - "line": 347, - "column": 46 + "line": 358, + "column": 48 }, "end": { - "line": 347, - "column": 47 + "line": 358, + "column": 49 } }, "name": "j" @@ -3046,16 +3046,16 @@ }, "property": { "type": "Identifier", - "start": 10709, - "end": 10716, + "start": 11215, + "end": 11222, "loc": { "start": { - "line": 347, - "column": 49 + "line": 358, + "column": 51 }, "end": { - "line": 347, - "column": 56 + "line": 358, + "column": 58 } }, "name": "display" @@ -3066,46 +3066,46 @@ "arguments": [ { "type": "MemberExpression", - "start": 10717, - "end": 10727, + "start": 11223, + "end": 11233, "loc": { "start": { - "line": 347, - "column": 57 + "line": 358, + "column": 59 }, "end": { - "line": 347, - "column": 67 + "line": 358, + "column": 69 } }, "object": { "type": "Identifier", - "start": 10717, - "end": 10721, + "start": 11223, + "end": 11227, "loc": { "start": { - "line": 347, - "column": 57 + "line": 358, + "column": 59 }, "end": { - "line": 347, - "column": 61 + "line": 358, + "column": 63 } }, "name": "cell" }, "property": { "type": "Identifier", - "start": 10722, - "end": 10727, + "start": 11228, + "end": 11233, "loc": { "start": { - "line": 347, - "column": 62 + "line": 358, + "column": 64 }, "end": { - "line": 347, - "column": 67 + "line": 358, + "column": 69 } }, "name": "value" @@ -3118,46 +3118,46 @@ }, "alternate": { "type": "MemberExpression", - "start": 10731, - "end": 10741, + "start": 11237, + "end": 11247, "loc": { "start": { - "line": 347, - "column": 71 + "line": 358, + "column": 73 }, "end": { - "line": 347, - "column": 81 + "line": 358, + "column": 83 } }, "object": { "type": "Identifier", - "start": 10731, - "end": 10735, + "start": 11237, + "end": 11241, "loc": { "start": { - "line": 347, - "column": 71 + "line": 358, + "column": 73 }, "end": { - "line": 347, - "column": 75 + "line": 358, + "column": 77 } }, "name": "cell" }, "property": { "type": "Identifier", - "start": 10736, - "end": 10741, + "start": 11242, + "end": 11247, "loc": { "start": { - "line": 347, - "column": 76 + "line": 358, + "column": 78 }, "end": { - "line": 347, - "column": 81 + "line": 358, + "column": 83 } }, "name": "value" @@ -3168,15 +3168,15 @@ } }, { - "start": 10742, - "end": 10757, + "start": 11248, + "end": 11265, "type": "Text", - "raw": "\n ", - "data": "\n " + "raw": "\n ", + "data": "\n " } ], "default": false, - "default_value": "\n \n{headers[j].display ? headers[j].display(cell.value) : cell.value}\n\n \n" + "default_value": "\n \n{headers[j].display ? headers[j].display(cell.value) : cell.value}\n\n \n" } ], [ @@ -3184,14 +3184,14 @@ { "attributes": [ { - "start": 11293, - "end": 11312, + "start": 11821, + "end": 11840, "type": "Attribute", "name": "name", "value": [ { - "start": 11299, - "end": 11311, + "start": 11827, + "end": 11839, "type": "Text", "raw": "expanded-row", "data": "expanded-row" @@ -3199,26 +3199,26 @@ ] }, { - "start": 11313, - "end": 11324, + "start": 11841, + "end": 11852, "type": "Attribute", "name": "row", "value": [ { - "start": 11318, - "end": 11323, + "start": 11846, + "end": 11851, "type": "MustacheTag", "expression": { "type": "Identifier", - "start": 11319, - "end": 11322, + "start": 11847, + "end": 11850, "loc": { "start": { - "line": 366, + "line": 378, "column": 48 }, "end": { - "line": 366, + "line": 378, "column": 51 } }, diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index df5cdb5d..eab2ee80 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -318,7 +318,7 @@ The slot name for the table header cells is `"cell-header"`. Restart all - API Documentation + API documentation Stop all @@ -385,7 +385,7 @@ The slot name for the table header cells is `"cell-header"`. Restart all - API Documentation + API documentation Stop all @@ -668,6 +668,15 @@ The slot name for the table header cells is `"cell-header"`. ]}" /> +### Empty column with overflow menu + +Some use cases require an empty column in the table body without a corresponding table header. + +For an object in the `headers` array, set `empty` to `true` to render an empty column. + +In the following example, each row in the sortable data table has an overflow menu. There isn't a separate, useless table header column for the overflow menu. + + ### Selectable diff --git a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte new file mode 100644 index 00000000..591f4362 --- /dev/null +++ b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte @@ -0,0 +1,38 @@ + + + + + {#if cell.key === 'overflow'} + + + + + + {:else}{cell.value}{/if} + + diff --git a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte index b777b34c..f87601cc 100644 --- a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte +++ b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte @@ -41,7 +41,7 @@ Restart all - API Documentation + API documentation Stop all diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index b569a70e..71c2eb57 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -1,7 +1,7 @@