Merge pull request #46 from cloudblue/add-fixed-layout-to-table

Add fixed layout to Table widget

Author: arnaugiralt

components/src/widgets/complexTable/widget.vue

@@ -1,5 +1,8 @@
 <template>
-  <ui-table :headers="props.headers">
+  <ui-table
+    :headers="props.headers"
+    :fixed="fixed"
+  >
     <slot />
   </ui-table>
   <div class="buttons-container">
@@ -62,7 +65,11 @@ const props = defineProps({
   totalItems: {
     type: Number,
     default: 1,
-  }
+  },
+  fixed: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const totalPages = computed(() => Math.ceil(props.totalItems / ITEMS_PER_PAGE))

components/src/widgets/table/widget.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="table">
-    <table>
+    <table :class="{ fixed: fixed }">
       <thead v-if="headers.length">
         <tr>
           <th
             v-for="header in headers"
             :key="header.name"
+            :style="{ width: header.width }"
           >
             <div>{{ header.text }}</div>
             <div class="splitpane" />
@@ -26,6 +27,10 @@ defineProps({
     required: true,
     default: () => [],
   },
+  fixed: {
+    type: Boolean,
+    default: false,
+  }
 })
 </script>
 
@@ -36,6 +41,10 @@ table {
   width: 100%;
   max-width: 100%;
 
+  &.fixed {
+    table-layout: fixed;
+  }
+
   thead {
     border-top: 1px solid #e0e0e0;
     border-bottom: 1px solid #e0e0e0;