FOUR-20598: Horizontal adaptation define a minimum width of the columns

resources/jscomposition/base/table/BaseTable.vue

@@ -1,8 +1,7 @@
 <template>
   <div
     class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
-      tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto tw-overflow-y-auto"
-  >
+      tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto tw-overflow-y-auto">
     <table
       class="tw-w-full tw-border-collapse"
       :class="{
@@ -86,7 +85,7 @@ import TCell from "./TCell.vue";
 import ContainerRow from "./ContainerRow.vue";
 
 const defaultConfig = () => ({
-  tableFixed: true,
+  tableFixed: false,
 });
 
 export default defineComponent({

resources/jscomposition/base/table/TCell.vue

@@ -1,20 +1,23 @@
 <template>
   <td
     class="tw-relative tw-p-0"
-    :style="{ width: `${column.width}px` }">
+    :style="{ width: width }">
     <template v-if="!column.cellRenderer">
       <slot
         :columns="columns"
         :column="column"
         :row="row">
-        <div class="tw-p-3 tw-text-ellipsis tw-text-nowrap tw-overflow-hidden">
+        <div
+          :style="{ width: width }"
+          class="tw-p-3 tw-text-ellipsis tw-text-nowrap tw-overflow-hidden">
           {{ getValue() }}
         </div>
       </slot>
     </template>
     <component
       :is="getComponent()"
       v-else
+      :style="{ width: width }"
       v-bind="getParams()"
       :columns="columns"
       :column="column"
@@ -24,7 +27,7 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
 import { isFunction, get } from "lodash";
 
 export default defineComponent({
@@ -56,11 +59,21 @@ export default defineComponent({
 
     const collapseContainer = (value) => emit("toogleContainer", value);
 
+    const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
+
+    const width = computed(() => {
+      if (index.value === props.columns.length - 1) {
+        return "auto";
+      }
+      return `${props.column.width || 200}px`;
+    });
+
     return {
       getComponent,
       getParams,
       getValue,
       collapseContainer,
+      width,
     };
   },
 });

resources/jscomposition/base/table/THeader.vue

@@ -1,8 +1,9 @@
 <template>
   <th
     class="tw-relative thead-resizable tw-p-0"
-    :style="{ width: width + 'px' }">
+    :style="{ width: width }">
     <div
+      :style="{ width: width }"
       class="tw-py-3 tw-px-3 tw-text-left tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis">
       <slot>
         {{ $t(getValue()) }}
@@ -22,7 +23,7 @@
 
 <script>
 import { isFunction } from "lodash";
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed, ref } from "vue";
 import { columnResizeComposable } from "./composables/columnComposable";
 
 export default defineComponent({
@@ -39,7 +40,14 @@ export default defineComponent({
   setup(props, { emit }) {
     const columnResize = columnResizeComposable(props.column);
 
-    const width = computed(() => props.column.width || 200);
+    const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
+
+    const width = computed(() => {
+      if (index.value === props.columns.length - 1) {
+        return "auto";
+      }
+      return `${props.column.width || 200}px`;
+    });
 
     const getValue = () => {
       if (isFunction(props.column?.headerFormatter)) {
@@ -50,6 +58,7 @@ export default defineComponent({
     };
     return {
       getValue,
+      index,
       width,
       columnResize,
     };

resources/jscomposition/base/table/composables/columnComposable.js

@@ -12,13 +12,17 @@ export const columnResizeComposable = (column) => {
   const startWidth = ref(0);
   const isResizing = ref(false);
 
-  //Resize the column value
+  const minWidth = 144;
+
+  // Resize the column value
   const doResize = (event) => {
     if (isResizing.value) {
       const diff = event.pageX - startX.value;
-      const min = 30;
+      const min = minWidth;
       const currentWidth = Math.max(min, startWidth.value + diff);
 
+      console.log("doResize", currentWidth);
+
       column.width = currentWidth;
     }
   };
@@ -35,7 +39,8 @@ export const columnResizeComposable = (column) => {
   const startResize = (event, index) => {
     isResizing.value = true;
     startX.value = event.pageX;
-    startWidth.value = column.width || 200;
+    startWidth.value = column.width || minWidth;
+    console.log("startResize", startWidth.value);
 
     document.addEventListener("mousemove", doResize);
     document.addEventListener("mouseup", stopResize);

resources/jscomposition/cases/casesDetail/components/TaskTable.vue

@@ -5,8 +5,7 @@
       :columns="columnsConfig"
       :data="data"
       :placeholder="showPlaceholder"
-      @changeFilter="onChangeFilter"
-    >
+      @changeFilter="onChangeFilter">
       <template #placeholder>
         <TablePlaceholder
           :placeholder="placeholderType"

resources/jscomposition/cases/casesDetail/config/columns.js

@@ -14,7 +14,7 @@ const taskNumberColumn = () => ({
   field: "id",
   header: "Tasks #",
   resizable: true,
-  width: 100,
+  width: 144,
   filter: true,
   formatter: (row, column, columns) => `#${row.id}`,
   cellRenderer: () => ({
@@ -68,7 +68,7 @@ const dueDateColumn = () => ({
   field: "due_at",
   header: "Due Date",
   resizable: true,
-  width: 200,
+  width: "auto",
   filter: true,
   formatter: (row, column, columns) => formatDate(row.due_at, "datetime"),
 });
@@ -127,7 +127,7 @@ const startedColumn = () => ({
   header: "Started",
   filter: true,
   resizable: true,
-  width: 200,
+  width: "auto",
   formatter: (row, column, columns) => formatDate(row.initiated_at, "datetime"),
 });
 

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -3,20 +3,17 @@
     <CaseFilter @enter="onChangeSearch" />
     <BadgesSection
       v-model="badgesData"
-      @remove="onRemoveBadge"
-    />
+      @remove="onRemoveBadge" />
     <FilterableTable
       ref="table"
       :columns="columnsConfig"
       :data="data"
       :placeholder="showPlaceholder"
-      @changeFilter="onChangeFilter"
-    >
+      @changeFilter="onChangeFilter">
       <template #placeholder>
         <TablePlaceholder
           :placeholder="placeholderType"
-          class="tw-grow"
-        />
+          class="tw-grow" />
       </template>
     </FilterableTable>
     <Pagination
@@ -28,8 +25,7 @@
       :page="dataPagination.page"
       :pages="dataPagination.pages"
       @perPage="onPerPage"
-      @go="onGo"
-    />
+      @go="onGo" />
   </div>
 </template>
 <script setup>

resources/jscomposition/cases/casesMain/config/columns.js

@@ -33,7 +33,7 @@ export const caseNumberColumn = () => ({
   field: "case_number",
   header: "Case #",
   resizable: true,
-  width: 100,
+  width: 144,
   filter: {
     dataType: "string",
     operators: ["=", ">", ">=", "in", "between"],
@@ -162,7 +162,7 @@ export const completedColumn = () => ({
   field: "completed_at",
   header: "Completed",
   resizable: true,
-  width: 200,
+  width: "auto",
   formatter: (row, column, columns) => formatDate(row.completed_at, "datetime"),
   filter: {
     dataType: "datetime",

resources/jscomposition/system/table/FilterableTable.vue

@@ -3,14 +3,14 @@
     :columns="columns"
     :data="data"
     :placeholder="placeholder"
-    class="tw-grow"
-  >
+    :config="config"
+    class="tw-grow">
     <template
       v-for="(column, index) in columns"
       #[`theader-filter-${column.field}`]>
       <FilterColumn
-        :id="column.field"
         v-if="column.filter"
+        :id="column.field"
         :key="`default-${index}-${hasFilter(index,column)}`"
         :filter="column.filter"
         :value="getFilter(index, column)"
@@ -42,6 +42,10 @@ const props = defineProps({
     type: Boolean,
     default: () => false,
   },
+  config: {
+    type: Object,
+    default: () => {},
+  },
 });
 
 const filters = ref([]);

resources/jscomposition/system/table/SortTable.vue

@@ -5,8 +5,7 @@
     :data="data"
     :config="config"
     :placeholder="placeholder"
-    class="tw-grow"
-  >
+    class="tw-grow">
     <template
       v-for="(column, index) in columns"
       #[`theader-filter-${column.field}`]>