feat(data-grid): column width calculation and overflow scroll (#504)

* feat(data-grid): column width calculation and overflow scroll

* refactor: code

Author: ZonaHex

src/views/dashboard/modules/data-view/components/data-grid.vue

@@ -11,7 +11,7 @@ a-card.data-grid(:bordered="false")
       size="mini"
       :data="gridData"
       :pagination="pagination"
-      :scroll="{ y: '100%', x: '100%' }"
+      :scroll="{ y: '100%', x: tableWidth }"
       :bordered="{ headerCell: true }"
     )
       template(#empty)
@@ -20,6 +20,7 @@ a-card.data-grid(:bordered="false")
         template(v-for="column in gridColumns" :key="column.title")
           template(v-if="timeColumnNames.includes(column.title)")
             a-table-column(
+              :width="getColumnWidth(column)"
               :data-index="timeColumnFormatMap[column.dataIndex] ? `${column.dataIndex}${formatSuffix}` : column.dataIndex"
             )
               template(#title)
@@ -41,6 +42,7 @@ a-card.data-grid(:bordered="false")
               :title="column.title"
               :data-index="column.dataIndex"
               :ellipsis="column.ellipsis"
+              :width="getColumnWidth(column)"
             )
               template(#cell="{ record }")
                 | {{ record[column.dataIndex] }}
@@ -64,6 +66,13 @@ a-card.data-grid(:bordered="false")
     }
   )
 
+  const timeColumnWidth = 140
+
+  const MIN_COLUMN_WIDTHS = {
+    timestamp: timeColumnWidth,
+    boolean: 80,
+  }
+
   const pagination = ref({
     'total': props.data?.records.rows.length,
     'show-page-size': true,
@@ -122,6 +131,54 @@ a-card.data-grid(:bordered="false")
     })
   })
 
+  const calculateTextWidth = (text) => {
+    if (!text) return 0
+
+    const charWidths = {
+      default: 7.2, // average character width
+      narrow: 5.4, // narrow characters: i, l, j, t, f, r
+      wide: 10.8, // m, w, etc.
+      uppercase: 9, // A-Z
+    }
+
+    let width = 0
+    for (let i = 0; i < text.length; i += 1) {
+      const char = text[i]
+      if (char.match(/[A-Z]/)) {
+        width += charWidths.uppercase
+      } else if (char.match(/[iljtfr]/)) {
+        width += charWidths.narrow
+      } else if (char.match(/[mw]/)) {
+        width += charWidths.wide
+      } else {
+        width += charWidths.default
+      }
+    }
+    const PADDING = 16 * 2
+    return Math.ceil(width) + PADDING
+  }
+
+  const getColumnWidth = (column) => {
+    const titleWidth = calculateTextWidth(column.title)
+
+    if (timeColumnNames.value.includes(column.title)) {
+      return Math.max(titleWidth, MIN_COLUMN_WIDTHS.timestamp)
+    }
+    if (column.dataType && column.dataType.toLowerCase() === 'boolean') {
+      return Math.max(titleWidth, MIN_COLUMN_WIDTHS.boolean)
+    }
+
+    return Math.max(titleWidth, 80)
+  }
+
+  const tableWidth = computed(() => {
+    if (!gridColumns.value.length) return '100%'
+
+    const calculatedWidth = gridColumns.value.reduce((total, column) => total + getColumnWidth(column), 0)
+
+    return `${calculatedWidth}px`
+  })
+
   /**
    * use an extra state to store which time column is formatted
    * key is data-index instead of column name
@@ -146,9 +203,6 @@ a-card.data-grid(:bordered="false")
     }
   }
 
-  /** use a fixed width for the time column to prevent the width from changing automatically after formatting  */
-  const timeColumnWidth = 180
-
   onUpdated(() => {
     pagination.value.total = props.data?.records.rows.length
   })