PATCH: feat(table): add tableLayout prop to BIMDataTable

bimdata · Jul 18, 2022 · c636314 · c636314
1 parent e98ec3f
commit c636314
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue b/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue
@@ -6,7 +6,7 @@
         height: paginated ? `${(perPage + 1) * rowHeight}px` : undefined,
       }"
     >
-      <table :style="{ width: tableWidth }">
+      <table :style="{ width: tableWidth, tableLayout }">
         <thead>
           <tr key="head-row-0" :style="{ height: `${rowHeight}px` }">
             <th class="cell-checkbox" v-if="selectable">
@@ -137,9 +137,13 @@ export default {
       default: "",
     },
     tableWidth: {
-      type: [Number, String],
+      type: String,
       default: "100%",
     },
+    tableLayout: {
+      type: String,
+      default: "auto",
+    },
   },
   emits: [
     "selection-changed",

diff --git a/src/web/views/Components/Table/Table.vue b/src/web/views/Components/Table/Table.vue
@@ -16,19 +16,15 @@
             @selection-changed="simpleExample.selection = $event"
           />
           <div class="selection-box">
-            <div class="selection-box__label">
-              Selection :
-            </div>
+            <div class="selection-box__label">Selection :</div>
             <div
               class="selection-box__item"
               v-for="(s, i) of simpleExample.selection"
               :key="i"
             >
               {{ `[${i}] - ${s.join(", ")}` }}
             </div>
-            <div v-show="simpleExample.selection.length === 0">
-              ( None )
-            </div>
+            <div v-show="simpleExample.selection.length === 0">( None )</div>
           </div>
         </template>
 
@@ -165,7 +161,7 @@
           <pre>
             let columns = [
               { id: "fullName", label: "Name" },
-              { id: "age", label: "Age", width: "40px" },
+              { id: "age", label: "Age", width: "64px" },
               { id: "country", label: "Country", width: "200px", align: "center" }
             ];
           </pre>
@@ -305,7 +301,7 @@ export default {
       advancedExample: {
         columns: [
           { id: "fullName", label: "Name" },
-          { id: "age", label: "Age", width: "40px" },
+          { id: "age", label: "Age", width: "64px" },
           { id: "country", label: "Country", width: "200px", align: "center" },
         ],
         rows: [

diff --git a/src/web/views/Components/Table/props-data.js b/src/web/views/Components/Table/props-data.js
@@ -29,15 +29,7 @@ export default [
     "Number",
     "",
     "50",
-    "Use this prop to set rows height (in px)",
-    "",
-  ],
-  [
-    "tableWidth",
-    "[Number, String]",
-    "",
-    "100%",
-    "Use this prop to set table widt (in px)",
+    "Use this prop to set rows height (in px).",
     "",
   ],
   [
@@ -72,4 +64,20 @@ export default [
     "A text to display when the table is empty",
     "'Empty Table'",
   ],
+  [
+    "tableWidth",
+    "String",
+    "",
+    "100%",
+    "Use this prop to set table width.",
+    "",
+  ],
+  [
+    "tableLayout",
+    "String",
+    "",
+    "auto",
+    "Use this prop to set table-layout css property (e.g. 'auto' or 'fixed').",
+    "",
+  ],
 ];