From 7eb8d5abdabe9d714090c76cc4d5910d53e5b9c1 Mon Sep 17 00:00:00 2001
From: Matt Gallo <mdgallo@us.ibm.com>
Date: Fri, 20 Sep 2024 12:16:52 -0400
Subject: [PATCH 1/2] feat: add columns and buttons to tearsheet

---
 web-components/customize-columns/src/basic.ts | 66 +++++++++++++++++--
 1 file changed, 62 insertions(+), 4 deletions(-)

diff --git a/web-components/customize-columns/src/basic.ts b/web-components/customize-columns/src/basic.ts
index 1c00c63..bcb74ac 100644
--- a/web-components/customize-columns/src/basic.ts
+++ b/web-components/customize-columns/src/basic.ts
@@ -13,8 +13,6 @@ 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';
 
@@ -72,7 +70,6 @@ export class MyBasicTable extends LitElement {
     this._tearsheetOpen = !this._tearsheetOpen;
   }
 
-  
   render() {
     const table = this.tableController.table({
       columns,
@@ -158,7 +155,33 @@ export class MyBasicTable extends LitElement {
         @cds-tearsheet-closed=${() => this._tearsheetOpen = false}
       >
           <span slot='title'>Customize column order</span>
-        content
+          ${repeat(
+            table.getHeaderGroups(),
+            headerGroup => headerGroup.id,
+            headerGroup =>
+              html`<div class="drag-wrapper">
+              ${repeat(
+                headerGroup.headers,
+                header => header.id,
+                header =>
+                  html` <div class="item">
+                    ${header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </div>`
+              )}</div>`
+          )}
+          <cds-button
+            @click=${() => this._tearsheetOpen = false}
+            slot="actions"
+            kind=${'secondary'}>Cancel</cds-button>
+          <cds-button
+            @click=${() => this._tearsheetOpen = false}
+            slot="actions"
+            kind=${'primary'}>Save</cds-button>
       </cds-tearsheet>
     `
   }
@@ -175,6 +198,41 @@ export class MyBasicTable extends LitElement {
     .customize-col-icon {
       fill: var(--cds-icon-primary)
     }
+
+    .drag-wrapper {
+      gap: 2px;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      border-top: 1px solid var(--cds-border-subtle);
+    }
+
+    .item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 10px 20px;
+    border: none;
+    gap: 10px;
+    background-color: #fff;
+    outline: none;
+    min-height: 48px;
+    width: 100%;
+    white-space: nowrap;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: hand;
+    border-bottom: 1px solid var(--cds-border-subtle);
+    }
+    .dragging-item {
+      border: 2px solid blue;
+      opacity: 1;
+    }
+
+    .ghost-item {
+      opacity: 0;
+    }
   `
 }
 

From e83bcf13f1f6c26f954a91e65d72702f6acb7d90 Mon Sep 17 00:00:00 2001
From: Matt Gallo <mdgallo@us.ibm.com>
Date: Fri, 20 Sep 2024 12:19:59 -0400
Subject: [PATCH 2/2] chore: cleanup styles

---
 web-components/customize-columns/src/basic.ts | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/web-components/customize-columns/src/basic.ts b/web-components/customize-columns/src/basic.ts
index bcb74ac..7e3b833 100644
--- a/web-components/customize-columns/src/basic.ts
+++ b/web-components/customize-columns/src/basic.ts
@@ -205,25 +205,18 @@ export class MyBasicTable extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: center;
-      border-top: 1px solid var(--cds-border-subtle);
     }
 
     .item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    padding: 10px 20px;
-    border: none;
-    gap: 10px;
-    background-color: #fff;
-    outline: none;
-    min-height: 48px;
-    width: 100%;
-    white-space: nowrap;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    cursor: hand;
-    border-bottom: 1px solid var(--cds-border-subtle);
+      display: flex;
+      align-items: center;
+      padding: 0 1rem;
+      border: none;
+      min-height: 3rem;
+      width: 100%;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      cursor: hand;
+      border-bottom: 1px solid var(--cds-border-subtle);
     }
     .dragging-item {
       border: 2px solid blue;