@spectrum-web-components/table 0.0.2-table.2625 → 0.0.2-table.2715

package/README.md

@@ -13,6 +13,12 @@ yarn add @spectrum-web-components/table
 
 Import the side effectful registration of `<sp-table>`, `<sp-table-body>`, `<sp-table-cell>`, `<sp-table-checkbox-cell>`, `<sp-table-head>`, `<sp-table-head-cell>`. and `<sp-table-row>` via:
 
+```
+import '@spectrum-web-components/table/elements.js';
+```
+
+Or individually via:
+
 ```
 import '@spectrum-web-components/table/sp-table.js';
 import '@spectrum-web-components/table/sp-table-body.js';
@@ -82,45 +88,10 @@ To ensure that the table scrolls, make sure to add a `style` attribute to `<sp-t
 
 To manage selection on an `<sp-table>`, utilise the `selects` attribute on `<sp-table>`. Each `<sp-table-row>` has a `value` attribute which, by default, corresponds to its index in the table, and these `value`s tell `<sp-table>` which `<sp-table-row>`s are selected. The selected items can be manually fed in through the `.selected` attribute on the table.
 
-```html
-<sp-table size="m">
-    <sp-table-head>
-        <sp-table-head-cell sortable sort>Column Title</sp-table-head-cell>
-        <sp-table-head-cell>Column Title</sp-table-head-cell>
-        <sp-table-head-cell>Column Title</sp-table-head-cell>
-    </sp-table-head>
-    <sp-table-body>
-        <sp-table-row>
-            <sp-table-cell>Row Item Alpha</sp-table-cell>
-            <sp-table-cell>Row Item Alpha</sp-table-cell>
-            <sp-table-cell>Row Item Alpha</sp-table-cell>
-        </sp-table-row>
-        <sp-table-row>
-            <sp-table-cell>Row Item Bravo</sp-table-cell>
-            <sp-table-cell>Row Item Bravo</sp-table-cell>
-            <sp-table-cell>Row Item Bravo</sp-table-cell>
-        </sp-table-row>
-        <sp-table-row>
-            <sp-table-cell>Row Item Charlie</sp-table-cell>
-            <sp-table-cell>Row Item Charlie</sp-table-cell>
-            <sp-table-cell>Row Item Charlie</sp-table-cell>
-        </sp-table-row>
-        <sp-table-row>
-            <sp-table-cell>Row Item Delta</sp-table-cell>
-            <sp-table-cell>Row Item Delta</sp-table-cell>
-            <sp-table-cell>Row Item Delta</sp-table-cell>
-        </sp-table-row>
-        <sp-table-row>
-            <sp-table-cell>Row Item Echo</sp-table-cell>
-            <sp-table-cell>Row Item Echo</sp-table-cell>
-            <sp-table-cell>Row Item Echo</sp-table-cell>
-        </sp-table-row>
-    </sp-table-body>
-</sp-table>
-```
-
 ### `selects="single"`
 
+When `selects="single"` the `<sp-table>` will manage a _single_ selection in the array value of `selected`.
+
 ```html
 <sp-table
     size="m"
@@ -166,7 +137,7 @@ To manage selection on an `<sp-table>`, utilise the `selects` attribute on `<sp-
 
 ### `selects="multiple"`
 
-When `selects` is set to "multiple", the `<sp-table-checkbox-cell>` in `<sp-table-head>` acts as the select/deselect all button.
+When `selects="multiple"` the `<sp-table>` will manage a selection in the array value of `selected` in via a presence toggle. Further, an `<sp-table-checkbox-cell>` will be made available in the `<sp-table-head>` in order to select/deselect all items in the `<sp-table>`.
 
 ```html
 <sp-table
@@ -249,7 +220,7 @@ For large amounts of data, the `<sp-table>` can be virtualised to easily add tab
             const cell1 = document.createElement('sp-table-cell');
             const cell2 = document.createElement('sp-table-cell');
             const cell3 = document.createElement('sp-table-cell');
-            cell1.textContent = `Row Item Alpha ${item.value}`;
+            cell1.textContent = `Row Item Alpha ${item.name}`;
             cell2.textContent = `Row Item Alpha ${index}`;
             cell3.textContent = `Last Thing`;
             return [cell1, cell2, cell3];
@@ -283,7 +254,7 @@ For large amounts of data, the `<sp-table>` can be virtualised to easily add tab
             const cell1 = document.createElement('sp-table-cell');
             const cell2 = document.createElement('sp-table-cell');
             const cell3 = document.createElement('sp-table-cell');
-            cell1.textContent = `Row Item Alpha ${item.value}`;
+            cell1.textContent = `Row Item Alpha ${item.name}`;
             cell2.textContent = `Row Item Alpha ${index}`;
             cell3.textContent = `Last Thing`;
             return [cell1, cell2, cell3];
@@ -329,6 +300,207 @@ const renderItem = (item: Item, index: number): TemplateResult => {
 
 Please note that there is a bug when attempting to select all virtualised elements. The items are selected programatically, it's just not reflected visually.
 
+### Selection
+
+When making a selection on a virtualized table, it can sometimes be useful to track that selection as something other than an array of indexes. To make this possible the `itemValue` property will accept a method who argument is an item object, return a computed string value to track selection with this value rather than the item's index:
+
+```html-live
+<sp-table
+    size="m"
+    id="table-item-value-demo"
+    style="height: 200px"
+    scroller="true"
+    selects="multiple"
+>
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+</sp-table>
+<div class="selection">Selected: [ ]</div>
+<script type="module">
+    const initItems = (count) => {
+        const total = count;
+        const items = [];
+        while (count) {
+            count--;
+            items.push({
+                id: crypto.randomUUID(),
+                name: String(total - count),
+                date: count,
+            });
+        }
+        return items;
+    };
+    const initTable = () => {
+        const table = document.querySelector('#table-item-value-demo');
+        table.items = initItems(50);
+
+        table.renderItem = (item, index) => {
+            const cell1 = document.createElement('sp-table-cell');
+            const cell2 = document.createElement('sp-table-cell');
+            const cell3 = document.createElement('sp-table-cell');
+            cell1.textContent = `Row Item Alpha ${item.name}`;
+            cell2.textContent = `Row Item Alpha ${index}`;
+            cell3.textContent = `Last Thing`;
+            return [cell1, cell2, cell3];
+        };
+
+        table.addEventListener('change', (event) => {
+            const selected = event.target.nextElementSibling;
+            selected.textContent = `Selected: ${JSON.stringify(event.target.selected, null, ' ')}`;
+        });
+    };
+    customElements.whenDefined('sp-table').then(() => {
+        initTable();
+    });
+</script>
+```
+
+<script type="module">
+    const initItems = (count) => {
+        const total = count;
+        const items = [];
+        while (count) {
+            count--;
+            items.push({
+                id: crypto.randomUUID(),
+                name: String(total - count),
+                date: count,
+            });
+        }
+        return items;
+    }
+
+    const initTable = () => {
+        const table = document.querySelector('#table-item-value-demo');
+        table.items = initItems(50);
+        table.itemValue = (item) => item.id;
+
+        table.renderItem = (item, index) => { 
+            const cell1 = document.createElement('sp-table-cell');
+            const cell2 = document.createElement('sp-table-cell');
+            const cell3 = document.createElement('sp-table-cell');
+            cell1.textContent = `Row Item Alpha ${item.name}`;
+            cell2.textContent = `Row Item Alpha ${index}`;
+            cell3.textContent = `Last Thing`;
+            return [cell1, cell2, cell3];
+        };
+
+        table.addEventListener('change', (event) => {
+            const selected = event.target.nextElementSibling;
+            selected.textContent = `Selected: ${JSON.stringify(event.target.selected, null, ' ')}`;
+        });
+    };
+    customElements.whenDefined('sp-table').then(() => {
+        initTable();
+    });
+</script>
+
+### Row Types
+
+All values in the item array are assumed to be homogenous by default. This means all of the rendered rows are either delivered as provided, or, in the case you are leveraging `selects`, rendered with an `<sp-table-checkbox-cell>`. However, when virtualizing a table with selection it can sometimes be useful to surface rows with additional interactions, e.g. "Load more data" links. To support that you can optionally include the `_$rowType$` brand in your item. The values for this are outlined by the `RowType` enum and include `ITEM` (0) and `INFORMATION` (1). When `_$rowType$: RowType.INFORMATION` is provided it informs the `<sp-table>` element not to deliver an `<sp-table-checkbox-cell>` with that row.
+
+```html-live
+<sp-table
+    size="m"
+    id="table-row-type-demo"
+    style="height: 200px"
+    scroller="true"
+    selects="single"
+>
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+</sp-table>
+<script type="module">
+    const initItems = (count) => {
+        const total = count;
+        const items = [];
+        while (count) {
+            count--;
+            items.push({
+                name: String(total - count),
+                date: count,
+            });
+        }
+        return items;
+    };
+    const initTable = () => {
+        const table = document.querySelector('#table-row-type-demo');
+        const items = initItems(50);
+        items.splice(3, 0, {
+            _$rowType$: 1,
+        });
+        table.items = items;
+
+        table.renderItem = (item, index) => {
+            if (item._$rowType$ === 1) {
+                const infoCell = document.createElement('sp-table-cell');
+                infoCell.textContent = 'Use this row type for non-selectable content.';
+                return [infoCell];
+            }
+            const cell1 = document.createElement('sp-table-cell');
+            const cell2 = document.createElement('sp-table-cell');
+            const cell3 = document.createElement('sp-table-cell');
+            cell1.textContent = `Row Item Alpha ${item.name}`;
+            cell2.textContent = `Row Item Alpha ${index}`;
+            cell3.textContent = `Last Thing`;
+            return [cell1, cell2, cell3];
+        };
+    };
+    customElements.whenDefined('sp-table').then(() => {
+        initTable();
+    });
+</script>
+```
+
+<script type="module">
+    const initItems = (count) => {
+        const total = count;
+        const items = [];
+        while (count) {
+            count--;
+            items.push({
+                name: String(total - count),
+                date: count,
+            });
+        }
+        return items;
+    }
+
+    const initTable = () => {
+        const table = document.querySelector('#table-row-type-demo');
+        const items = initItems(50);
+        items.splice(3, 0, {
+            _$rowType$: 1,
+        });
+        table.items = items;
+
+
+        table.renderItem = (item, index) => { 
+            if (item._$rowType$ === 1) {
+                const infoCell = document.createElement('sp-table-cell');
+                infoCell.textContent = 'Use this row type for non-selectable content.';
+                return [infoCell];
+            }
+            const cell1 = document.createElement('sp-table-cell');
+            const cell2 = document.createElement('sp-table-cell');
+            const cell3 = document.createElement('sp-table-cell');
+            cell1.textContent = `Row Item Alpha ${item.name}`;
+            cell2.textContent = `Row Item Alpha ${index}`;
+            cell3.textContent = `Last Thing`;
+            return [cell1, cell2, cell3];
+        };
+    };
+    customElements.whenDefined('sp-table').then(() => {
+        initTable();
+    });
+</script>
+
 ### The `scroller` property
 
 By default, the virtualized table doesn't contain a scroll bar and will display the entire length of the table body. Use the `scroller` property and specify an inline style for the height to get a `Table` of your desired height that scrolls.

package/custom-elements.json

@@ -4,7 +4,7 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "sp-table-body.ts",
+      "path": "sp-table-body.js",
       "declarations": [],
       "exports": [
         {
@@ -19,7 +19,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "sp-table-cell.ts",
+      "path": "sp-table-cell.js",
       "declarations": [],
       "exports": [
         {
@@ -34,7 +34,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "sp-table-checkbox-cell.ts",
+      "path": "sp-table-checkbox-cell.js",
       "declarations": [],
       "exports": [
         {
@@ -49,7 +49,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "sp-table-head-cell.ts",
+      "path": "sp-table-head-cell.js",
       "declarations": [],
       "exports": [
         {
@@ -64,7 +64,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "sp-table-head.ts",
+      "path": "sp-table-head.js",
       "declarations": [],
       "exports": [
         {
@@ -79,7 +79,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "sp-table-row.ts",
+      "path": "sp-table-row.js",
       "declarations": [],
       "exports": [
         {
@@ -94,7 +94,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "sp-table.ts",
+      "path": "sp-table.js",
       "declarations": [],
       "exports": [
         {
@@ -109,7 +109,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/Table.ts",
+      "path": "src/Table.js",
       "declarations": [
         {
           "kind": "class",
@@ -231,7 +231,8 @@
               "privacy": "public",
               "default": "false",
               "description": "Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.",
-              "attribute": "scroller"
+              "attribute": "scroller",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -476,6 +477,12 @@
               "fieldName": "scroller"
             }
           ],
+          "mixins": [
+            {
+              "name": "SizedMixin",
+              "package": "@spectrum-web-components/base"
+            }
+          ],
           "superclass": {
             "name": "SpectrumElement",
             "package": "@spectrum-web-components/base"
@@ -490,7 +497,7 @@
           "name": "RangeChangedEvent",
           "declaration": {
             "name": "RangeChangedEvent",
-            "module": "src/Table.ts"
+            "module": "src/Table.js"
           }
         },
         {
@@ -498,14 +505,14 @@
           "name": "Table",
           "declaration": {
             "name": "Table",
-            "module": "src/Table.ts"
+            "module": "src/Table.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/TableBody.ts",
+      "path": "src/TableBody.js",
       "declarations": [
         {
           "kind": "class",
@@ -548,14 +555,14 @@
           "name": "TableBody",
           "declaration": {
             "name": "TableBody",
-            "module": "src/TableBody.ts"
+            "module": "src/TableBody.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/TableCell.ts",
+      "path": "src/TableCell.js",
       "declarations": [
         {
           "kind": "class",
@@ -598,14 +605,14 @@
           "name": "TableCell",
           "declaration": {
             "name": "TableCell",
-            "module": "src/TableCell.ts"
+            "module": "src/TableCell.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/TableCheckboxCell.ts",
+      "path": "src/TableCheckboxCell.js",
       "declarations": [
         {
           "kind": "class",
@@ -674,8 +681,8 @@
             },
             {
               "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
+              "name": "click",
+              "privacy": "public",
               "return": {
                 "type": {
                   "text": "void"
@@ -683,14 +690,6 @@
               }
             }
           ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "Event"
-              }
-            }
-          ],
           "attributes": [
             {
               "name": "role",
@@ -747,14 +746,14 @@
           "name": "TableCheckboxCell",
           "declaration": {
             "name": "TableCheckboxCell",
-            "module": "src/TableCheckboxCell.ts"
+            "module": "src/TableCheckboxCell.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/TableHead.ts",
+      "path": "src/TableHead.js",
       "declarations": [
         {
           "kind": "class",
@@ -850,14 +849,14 @@
           "name": "TableHead",
           "declaration": {
             "name": "TableHead",
-            "module": "src/TableHead.ts"
+            "module": "src/TableHead.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/TableHeadCell.ts",
+      "path": "src/TableHeadCell.js",
       "declarations": [
         {
           "kind": "class",
@@ -973,14 +972,14 @@
           "name": "TableHeadCell",
           "declaration": {
             "name": "TableHeadCell",
-            "module": "src/TableHeadCell.ts"
+            "module": "src/TableHeadCell.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/TableRow.ts",
+      "path": "src/TableRow.js",
       "declarations": [
         {
           "kind": "class",
@@ -1005,6 +1004,16 @@
               "attribute": "role",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "selectable",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "selectable"
+            },
             {
               "kind": "field",
               "name": "selected",
@@ -1032,18 +1041,36 @@
               "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Promise<void>"
                 }
               },
               "parameters": [
                 {
-                  "name": "{\n        target: checkboxCell,\n    }",
+                  "name": "event",
                   "type": {
                     "text": "Event & { target: TableCheckboxCell }"
                   }
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "handleSlotchange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "{\n        target,\n    }",
+                  "type": {
+                    "text": "Event & { target: HTMLSlotElement }"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "manageSelected",
@@ -1053,6 +1080,24 @@
                   "text": "void"
                 }
               }
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             }
           ],
           "events": [
@@ -1070,6 +1115,14 @@
               "default": "'row'",
               "fieldName": "role"
             },
+            {
+              "name": "selectable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selectable"
+            },
             {
               "name": "selected",
               "type": {
@@ -1101,7 +1154,7 @@
           "name": "TableRow",
           "declaration": {
             "name": "TableRow",
-            "module": "src/TableRow.ts"
+            "module": "src/TableRow.js"
           }
         }
       ]

package/elements.d.ts

@@ -0,0 +1,7 @@
+import './sp-table-body.js';
+import './sp-table-cell.js';
+import './sp-table-checkbox-cell.js';
+import './sp-table-head-cell.js';
+import './sp-table-head.js';
+import './sp-table-row.js';
+import './sp-table-table.js';

package/elements.dev.js

@@ -0,0 +1,8 @@
+import "./sp-table-body.dev.js";
+import "./sp-table-cell.dev.js";
+import "./sp-table-checkbox-cell.dev.js";
+import "./sp-table-head-cell.dev.js";
+import "./sp-table-head.dev.js";
+import "./sp-table-row.dev.js";
+import "./sp-table-table.dev.js";
+//# sourceMappingURL=elements.dev.js.map

package/elements.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["elements.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport './sp-table-body.dev.js'\nimport './sp-table-cell.dev.js'\nimport './sp-table-checkbox-cell.dev.js'\nimport './sp-table-head-cell.dev.js'\nimport './sp-table-head.dev.js'\nimport './sp-table-row.dev.js'\nimport './sp-table-table.dev.js'\n"],
+  "mappings": "AAYA;AACA;AACA;AACA;AACA;AACA;AACA;",
+  "names": []
+}

package/elements.js

@@ -0,0 +1,2 @@
+import"./sp-table-body.js";import"./sp-table-cell.js";import"./sp-table-checkbox-cell.js";import"./sp-table-head-cell.js";import"./sp-table-head.js";import"./sp-table-row.js";import"./sp-table-table.js";
+//# sourceMappingURL=elements.js.map

package/elements.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["elements.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport './sp-table-body.js';\nimport './sp-table-cell.js';\nimport './sp-table-checkbox-cell.js';\nimport './sp-table-head-cell.js';\nimport './sp-table-head.js';\nimport './sp-table-row.js';\nimport './sp-table-table.js';\n"],
+  "mappings": "AAYA,2BACA,2BACA,oCACA,gCACA,2BACA,0BACA",
+  "names": []
+}