Merge pull request #3 from matthewgallo/lit-customize-cols

chore: add customize col tearsheet
carbon-design-system · Sep 19, 2024 · 6d55449 · 6d55449
2 parents 2751a35 + 3c9ca6f
commit 6d55449
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 3 deletions.
diff --git a/web-components/customize-columns/package.json b/web-components/customize-columns/package.json
@@ -11,9 +11,10 @@
   "dependencies": {
     "@carbon/styles": "^1.34.0",
     "@carbon/web-components": "latest",
+    "@dnd-kit/dom": "^0.0.6-beta-20240919012756",
     "@tanstack/lit-table": "^8.20.5",
-    "sass": "^1.64.1",
-    "lit": "^3.2.0"
+    "lit": "^3.2.0",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "typescript": "^5.5.3",

diff --git a/web-components/customize-columns/src/basic.ts b/web-components/customize-columns/src/basic.ts
@@ -1,5 +1,5 @@
 import { LitElement, css, html } from 'lit'
-import { customElement } from 'lit/decorators.js'
+import { customElement, state } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
 import {
   createColumnHelper,
@@ -8,6 +8,14 @@ import {
   TableController,
 } from '@tanstack/lit-table'
 import '@carbon/web-components/es/components/data-table/index.js';
+import '@carbon/web-components/es/components/overflow-menu/index.js';
+import '@carbon/web-components/es/components/button/index.js';
+import '@carbon/web-components/es/components/tearsheet/index.js';
+import Column from '@carbon/web-components/es/icons/column/16';
+import { CDSTableToolbarSearch } from '@carbon/web-components/es';
+// import { DragDropManager } from '@dnd-kit/dom';
+// import { Sortable } from '@dnd-kit/dom/sortable';
+
 import { makeData } from './makeData';
 
 
@@ -54,15 +62,51 @@ const data: Resource[] = makeData(10);
 export class MyBasicTable extends LitElement {
   private tableController = new TableController<Resource>(this);
 
+  @state()
+  private _globalFilter = '';
+
+  @state()
+  private _tearsheetOpen = false;
+
+  private _toggleTearsheet() {
+    this._tearsheetOpen = !this._tearsheetOpen;
+  }
+
+
   render() {
     const table = this.tableController.table({
       columns,
       data,
       getCoreRowModel: getCoreRowModel(),
+      state: {
+        globalFilter: this._globalFilter,
+      }
     })
 
+    interface toolbarSearchDetail {
+      detail: {
+        value: string;
+      }
+    }
+    interface searchFull extends CDSTableToolbarSearch, toolbarSearchDetail {}
+
     return html`
       <cds-table>
+      <cds-table-toolbar slot="toolbar">
+          <cds-table-toolbar-content>
+            <cds-table-toolbar-search
+              placeholder="Filter table"
+              @cds-search-input=${(e: searchFull) => this._globalFilter = e.detail.value}
+            ></cds-table-toolbar-search>
+            <cds-button
+              @click=${this._toggleTearsheet}
+              tooltipText='Customize columns'
+              kind='ghost'>${Column({
+                slot: 'icon',
+                class: `customize-col-icon`,
+              })}</cds-button>
+          </cds-table-toolbar-content>
+        </cds-table-toolbar>
         <cds-table-head>
           ${repeat(
             table.getHeaderGroups(),
@@ -106,6 +150,16 @@ export class MyBasicTable extends LitElement {
           )}
         </cds-table-body>
       </cds-table>
+      <cds-tearsheet
+        class='customize-col-tearsheet'
+        ?open=${this._tearsheetOpen}
+        prevent-close-on-click-outside
+        width='narrow'
+        @cds-tearsheet-closed=${() => this._tearsheetOpen = false}
+      >
+          <span slot='title'>Customize column order</span>
+        content
+      </cds-tearsheet>
     `
   }
 
@@ -117,6 +171,10 @@ export class MyBasicTable extends LitElement {
       display: flex;
       place-items: center;
     }
+
+    .customize-col-icon {
+      fill: var(--cds-icon-primary)
+    }
   `
 }
 

diff --git a/web-components/customize-columns/src/customTypings.d.ts b/web-components/customize-columns/src/customTypings.d.ts
@@ -0,0 +1 @@
+declare module "@carbon/web-components/es/icons/column/16"
diff --git a/web-components/customize-columns/yarn.lock b/web-components/customize-columns/yarn.lock
@@ -101,6 +101,51 @@
     lit "^2.7.6"
     lodash-es "^4.17.21"
 
+"@dnd-kit/[email protected]":
+  version "0.0.6-beta-20240919012756"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/abstract/-/abstract-0.0.6-beta-20240919012756.tgz#272ba46ded6b453c6ba8656f04f7a5a26a7d6d90"
+  integrity sha512-urUY2/WPJdHT2/O/TYozr8YcMLEe0RxqZ6ADQiEFSyQBefJHQaEr5G18i46XCpl9A5cN8SaMI0K60qz1wDheLA==
+  dependencies:
+    "@dnd-kit/geometry" "0.0.6-beta-20240919012756"
+    "@dnd-kit/state" "0.0.6-beta-20240919012756"
+    tslib "^2.6.2"
+
+"@dnd-kit/[email protected]":
+  version "0.0.6-beta-20240919012756"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/collision/-/collision-0.0.6-beta-20240919012756.tgz#b58071f24f670b391272e7eca113284a39fdb50c"
+  integrity sha512-fqbuur7u3oNbC0YIg6JW/9FwiM7VdF3tyiW9WMgvUmo0qQ6triOUGCQehkAkeR3IZmqeVg6HJf0pMm61pgxpuQ==
+  dependencies:
+    "@dnd-kit/abstract" "0.0.6-beta-20240919012756"
+    "@dnd-kit/geometry" "0.0.6-beta-20240919012756"
+    tslib "^2.6.2"
+
+"@dnd-kit/dom@^0.0.6-beta-20240919012756":
+  version "0.0.6-beta-20240919012756"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/dom/-/dom-0.0.6-beta-20240919012756.tgz#547bd65f7917ab1150980e00c6014f66ba53961f"
+  integrity sha512-ORcUAd4CyLcujVrgEGtWYHy1uFToHhERyESjeDQjRgX/KYePB4tmUjP7AQsu8aIQTLGoGH1dzjuxiiIvQ7ThKA==
+  dependencies:
+    "@dnd-kit/abstract" "0.0.6-beta-20240919012756"
+    "@dnd-kit/collision" "0.0.6-beta-20240919012756"
+    "@dnd-kit/geometry" "0.0.6-beta-20240919012756"
+    "@dnd-kit/state" "0.0.6-beta-20240919012756"
+    tslib "^2.6.2"
+
+"@dnd-kit/[email protected]":
+  version "0.0.6-beta-20240919012756"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/geometry/-/geometry-0.0.6-beta-20240919012756.tgz#26e80cfc30d9c5dcea35d6e7969ec9084e4382fd"
+  integrity sha512-ERf0/TC6o6B3OaHxIJz+D7QEpa2JBBQj1sRcI2I5yf2IY1/3l0/Hsby5ynB4mmOyM32qQb/V2qdX7zucunxbFg==
+  dependencies:
+    "@dnd-kit/state" "0.0.6-beta-20240919012756"
+    tslib "^2.6.2"
+
+"@dnd-kit/[email protected]":
+  version "0.0.6-beta-20240919012756"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/state/-/state-0.0.6-beta-20240919012756.tgz#7d10cfd5b61d21575c55a4b0ac856e3592bc0b12"
+  integrity sha512-KzHVGJWLKillyOuGFXGWB6OJhkNNykjhsTHQNYcIW2MWlZfxBcbv/G7khiyBzhKE7alRBy0yxroaaI9lJtzy/Q==
+  dependencies:
+    "@preact/signals-core" "^1.6.0"
+    tslib "^2.6.2"
+
 "@esbuild/[email protected]":
   version "0.21.5"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
@@ -265,6 +310,11 @@
   dependencies:
     "@lit-labs/ssr-dom-shim" "^1.2.0"
 
+"@preact/signals-core@^1.6.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@preact/signals-core/-/signals-core-1.8.0.tgz#45ffadb81b48a298a4accd26b3f6c0140cd6dacc"
+  integrity sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==
+
 "@rollup/[email protected]":
   version "4.21.3"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.3.tgz#155c7d82c1b36c3ad84d9adf9b3cd520cba81a0f"
@@ -666,6 +716,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+tslib@^2.6.2:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
+  integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
+
 typescript@^5.5.3:
   version "5.6.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.2.tgz#d1de67b6bef77c41823f822df8f0b3bcff60a5a0"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		declare module "@carbon/web-components/es/icons/column/16"