feat: add collapsible column

Author: uwla

src/components/Table/Table.scss

@@ -46,13 +46,39 @@
         top: 0;
         user-select: none;
 
-        &[data-sortable] {
+        &[data-sortable=true] {
             cursor: pointer;
-
-            &:hover {
+            span:hover {
                 color: #3490dc;
             }
         }
+
+        &[data-collapsed=true] {
+            width: 1px;
+        }
+    }
+
+    .vdt-column-collapse {
+        color: #000;
+        cursor: pointer;
+        position: relative;
+        span {
+            position: absolute;
+            top: 2em;
+            left: -1.5em;
+            background: #fff;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            padding: 4px;
+            display: none;
+            z-index: 50;
+        }
+        &:hover {
+            color: #00f;
+            span {
+                display: block;
+            }
+        }
     }
 
     .vdt-column-center span {
@@ -64,11 +90,11 @@
     .vdt-column-content {
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: space-between;
+        gap: 5px;
     }
 
     .vdt-empty-body {
         text-align: center;
     }
 }
-

src/components/Table/Table.vue

@@ -10,10 +10,20 @@
                         :class="column.cssClass"
                         :data-sortable="column.sortable"
                         :data-sorting="column.sortingMode"
+                        :data-collapsed="column.collapsed"
                         @click="$emit('sort-column', column)">
 
+                        <div
+                            v-if="column.collapsible && column.collapsed"
+                            @click="column.collapsed = false"
+                            class="vdt-column-collapse"
+                        >
+                            [+]
+                            <span>{{column.title}}</span>
+                        </div>
+
                         <!-- COLUMN HEADER CONTENT -->
-                        <div class="vdt-column-content">
+                        <div v-else class="vdt-column-content">
                             <span>{{ column.title }}</span>
 
                             <!-- SORTING INDEX -->
@@ -24,6 +34,14 @@
                             <!-- SORTING ICON -->
                             <component v-if="column.sortable"
                                 :is="sortingIconComponent" />
+
+                            <div
+                                v-if="column.collapsible && !column.collapsed"
+                                @click="column.collapsed = true"
+                                class="vdt-column-collapse"
+                            >
+                                [-]
+                            </div>
                         </div>
                     </th>
                 </tr>
@@ -45,21 +63,29 @@
                         v-for="(column, j) in columns"
                         :key="data._key + '_' + j"
                     >
+                        <div v-if="column.collapsible && column.collapsed"></div>
                         <component
-                            :is="column.component"
+                            v-else
                             v-bind="{ data, ...column.componentProps }"
+                            :is="column.component"
                             @userEvent="emitUserEvent"
                         />
                     </td>
                 </tr>
             </tbody>
 
             <!-- COMPONENT IF LOADING -->
-            <component v-if="isLoading" :is="loadingComponent" />
+            <component
+                v-if="isLoading"
+                :is="loadingComponent"
+            />
 
             <!-- TABLE FOOTER -->
-            <component v-if="footerComponent" :is="footerComponent"
-                    v-bind="{ data, dataDisplayed, dataFiltered }" />
+            <component
+                v-if="footerComponent"
+                v-bind="{ data, dataDisplayed, dataFiltered }"
+                :is="footerComponent"
+            />
         </table>
     </div>
 </template>

src/demo/App.ts

@@ -73,6 +73,7 @@ const params2 = {
             cssClass: "minwidth",
             component: "vdt-actions",
             componentProps: { actions: ["view", "delete"] },
+            collapsible: true,
         },
     ],
     vKey: "id",
@@ -97,14 +98,14 @@ const params3 = {
             title: "Image",
             component: "CellImage",
             cssClass: "minwidth",
+            collapsible: true,
         },
     ],
     vKey: "id",
 };
 
 export default {
     data() {
-
         return {
             title: "UPDATE USER",
 

src/parser/index.ts

@@ -13,8 +13,10 @@ export const globalDefaultColumn = {
     searchable: true,
     sortable: true,
     editable: false,
+    collapsible: false,
+    collapsed: false,
     type: "string",
-} as Column
+} as Column;
 
 const type2searchFunction = {
     string: searchStringColumn as Function,
@@ -52,7 +54,6 @@ export function parseColumnProps(props: any) {
         // editable cell
         if (column.editable)
             column.component = 'vdt-cell-editable'
-            // column.component = VdtTableCellEditable
 
         // merge the column with the default values
         column = { ...globalDefaultColumn, ...defaultColumn, ...column }
@@ -85,4 +86,4 @@ export function parseTextProps(props: any): LanguageDict {
     const lang = props.lang as LanguageName
     const text = props.text as LanguageDict
     return { ...translations[lang], ...text }
-}
+}

src/types.d.ts

@@ -10,6 +10,8 @@ type Column = {
     compareFunction: Function,
     component: VueComponent
     componentProps: VueComponentProps,
+    collapsed: boolean,
+    collapsible: boolean,
     displayIndex: number,
     editable: boolean,
     key: string,