[Feature][UI Next][V1.0.0-Alpha] Adjust all table column widths in th… (#9062)

* [Feature][UI Next][V1.0.0-Alpha] Adjust all table column widths in this project. * [Fix][UI Next][V1.0.0-Alpha] Fix workflow delete handle (#9057) * [Fix][UI Next][V1.0.0-Alpha] User Manage Queue display error (#9060) * fix package bug (#9051) * [Fix][UI Next][V1.0.0-Alpha] Fix the monitoring center does not support multiple worker. (#9061) * [Fix][UI Next][V1.0.0-Alpha] Remove the unused Ref. * [Fix-9025] [UI Next] Rectify this issue about failing to save a process when the user is ordinary user. (#9063) * modify the back-edn api * fix this issue * [Fix][UI Next][V1.0.0-Alpha]Change the column-config file name to column-width-config and COLUMN_CONFIG to COLUMN_WIDTH_CONFIG. * [Bug][UI Next] Fix style errors (#9067) * [Feature][UI Next][V1.0.0-Alpha] Adjust all table column widths in this project. * [Fix][UI Next][V1.0.0-Alpha] Remove the unused Ref. * [Fix][UI Next][V1.0.0-Alpha]Change the column-config file name to column-width-config and COLUMN_CONFIG to COLUMN_WIDTH_CONFIG. Co-authored-by: Devosend <devosend@gmail.com> Co-authored-by: zixi0825 <sunzhaohe0825@gmail.com> Co-authored-by: songjianet <1778651752@qq.com> Co-authored-by: calvin <jianghuachinacom@163.com> Co-authored-by: labbomb <739955946@qq.com>
3 years ago · bf1f959f58
36 changed files with 673 additions and 180 deletions
--- a/dolphinscheduler-ui-next/src/utils/column-width-config.ts
+++ b/dolphinscheduler-ui-next/src/utils/column-width-config.ts
@ -0,0 +1,94 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { isNumber, sumBy } from 'lodash'
+import type {
+  TableColumns,
+  CommonColumnInfo
+} from 'naive-ui/es/data-table/src/interface'
+
+export const COLUMN_WIDTH_CONFIG = {
+  selection: {
+    width: 50
+  },
+  index: {
+    width: 50
+  },
+  name: {
+    width: 200,
+    ellipsis: {
+      tooltip: true
+    }
+  },
+  state: {
+    width: 120
+  },
+  type: {
+    width: 120
+  },
+  version: {
+    width: 80
+  },
+  time: {
+    width: 180
+  },
+  operation: (number: number): CommonColumnInfo => ({
+    fixed: 'right',
+    width: Math.max(30 * number + 12 * (number - 1) + 24, 100)
+  }),
+  userName: {
+    width: 120,
+    ellipsis: {
+      tooltip: true
+    }
+  },
+  ruleType: {
+    width: 120
+  },
+  note: {
+    width: 180,
+    ellipsis: {
+      tooltip: true
+    }
+  },
+  dryRun: {
+    width: 140
+  },
+  times: {
+    width: 120
+  },
+  duration: {
+    width: 120
+  },
+  yesOrNo: {
+    width: 100,
+    ellipsis: {
+      tooltip: true
+    }
+  },
+  size: {
+    width: 100
+  },
+  tag: {
+    width: 160
+  }
+}
+
+export const calculateTableWidth = (columns: TableColumns) =>
+  sumBy(columns, (column) => (isNumber(column.width) ? column.width : 0))
+
+export const DefaultTableWidth = 1800
--- a/dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx
@ -155,7 +155,11 @@ const TaskResult = defineComponent({
          </NSpace>
        </NCard>
        <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable
+            columns={this.columns}
+            data={this.tableData}
+            scrollX={this.tableWidth}
+          />
          <div class={styles.pagination}>
            <NPagination
              v-model:page={this.page}
--- a/dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts
@ -20,6 +20,11 @@ import { reactive, ref } from 'vue'
 import { useAsyncState } from '@vueuse/core'
 import { queryExecuteResultListPaging } from '@/service/modules/data-quality'
 import { format } from 'date-fns'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type {
  ResultItem,
  ResultListRes
@ -31,6 +36,7 @@ export function useTable() {

  const variables = reactive({
    columns: [],
+    tableWidth: DefaultTableWidth,
    tableData: [],
    page: ref(1),
    pageSize: ref(10),
@ -46,15 +52,18 @@ export function useTable() {
      {
        title: '#',
        key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('data_quality.task_result.task_name'),
-        key: 'userName'
+        key: 'userName',
+        ...COLUMN_WIDTH_CONFIG['userName']
      },
      {
        title: t('data_quality.task_result.workflow_instance'),
-        key: 'processInstanceName'
+        key: 'processInstanceName',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('data_quality.task_result.rule_type'),
@ -69,11 +78,13 @@ export function useTable() {
          } else if (row.ruleType === 3) {
            return t('data_quality.task_result.multi_table_comparison')
          }
-        }
+        },
+        ...COLUMN_WIDTH_CONFIG['ruleType']
      },
      {
        title: t('data_quality.task_result.rule_name'),
-        key: 'ruleName'
+        key: 'ruleName',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('data_quality.task_result.state'),
@ -86,15 +97,18 @@ export function useTable() {
          } else if (row.state === 2) {
            return t('data_quality.task_result.failure')
          }
-        }
+        },
+        ...COLUMN_WIDTH_CONFIG['state']
      },
      {
        title: t('data_quality.task_result.actual_value'),
-        key: 'statisticsValue'
+        key: 'statisticsValue',
+        width: 140
      },
      {
        title: t('data_quality.task_result.excepted_value'),
-        key: 'comparisonValue'
+        key: 'comparisonValue',
+        width: 140
      },
      {
        title: t('data_quality.task_result.check_type'),
@ -109,7 +123,8 @@ export function useTable() {
          } else if (row.checkType === 3) {
            return t('data_quality.task_result.expected_and_actual_or_expected')
          }
-        }
+        },
+        ...COLUMN_WIDTH_CONFIG['type']
      },
      {
        title: t('data_quality.task_result.operator'),
@ -128,40 +143,51 @@ export function useTable() {
          } else if (row.operator === 5) {
            return '!='
          }
-        }
+        },
+        ...COLUMN_WIDTH_CONFIG['userName']
      },
      {
        title: t('data_quality.task_result.threshold'),
-        key: 'threshold'
+        key: 'threshold',
+        width: 120
      },
      {
        title: t('data_quality.task_result.failure_strategy'),
-        key: 'failureStrategy'
+        key: 'failureStrategy',
+        width: 150
      },
      {
        title: t('data_quality.task_result.excepted_value_type'),
-        key: 'comparisonTypeName'
+        key: 'comparisonTypeName',
+        width: 200
      },
      {
        title: t('data_quality.task_result.error_output_path'),
        key: 'errorOutputPath',
        render: (row: ResultItem) => {
          return row.errorOutputPath ? row : '-'
-        }
+        },
+        width: 200
      },
      {
        title: t('data_quality.task_result.username'),
-        key: 'userName'
+        key: 'userName',
+        ...COLUMN_WIDTH_CONFIG['userName']
      },
      {
        title: t('data_quality.task_result.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('data_quality.task_result.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      }
    ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const getTableData = (params: any) => {
--- a/dolphinscheduler-ui-next/src/views/datasource/list/detail.tsx
+++ b/dolphinscheduler-ui-next/src/views/datasource/list/detail.tsx
@ -141,7 +141,7 @@ const DetailModal = defineComponent({
                rules={rules}
                ref='detailFormRef'
                require-mark-placement='left'
-                label-align='right'
+                label-align='left'
              >
                <NFormItem
                  label={t('datasource.datasource')}
--- a/dolphinscheduler-ui-next/src/views/datasource/list/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/datasource/list/index.tsx
@ -31,6 +31,7 @@ import { useI18n } from 'vue-i18n'
 import { useColumns } from './use-columns'
 import { useTable } from './use-table'
 import styles from './index.module.scss'
+import type { TableColumns } from './types'

 const list = defineComponent({
  name: 'list',
@ -38,7 +39,7 @@ const list = defineComponent({
    const { t } = useI18n()
    const showDetailModal = ref(false)
    const selectId = ref()
-    const columns = ref()
+    const columns = ref({ columns: [] as TableColumns, tableWidth: 0 })
    const { data, changePage, changePageSize, deleteRecord, updateList } =
      useTable()

@ -131,10 +132,11 @@ const list = defineComponent({
        <Card title='' class={styles['mt-8']}>
          <NDataTable
            row-class-name='data-source-items'
-            columns={columns}
+            columns={columns.columns}
            data={list}
            loading={loading}
            striped
+            scrollX={columns.tableWidth}
          />
          <NPagination
            page={page}
--- a/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts
+++ b/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts
@ -28,33 +28,43 @@ import {
 import { EditOutlined, DeleteOutlined } from '@vicons/antd'
 import JsonHighlight from './json-highlight'
 import ButtonLink from '@/components/button-link'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type { TableColumns } from './types'

 export function useColumns(onCallback: Function) {
  const { t } = useI18n()

-  const getColumns = (): TableColumns => {
-    return [
+  const getColumns = (): { columns: TableColumns; tableWidth: number } => {
+    const columns = [
      {
        title: '#',
        key: 'index',
-        render: (rowData, rowIndex) => rowIndex + 1
+        render: (unused, rowIndex) => rowIndex + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('datasource.datasource_name'),
-        key: 'name'
+        key: 'name',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('datasource.datasource_user_name'),
-        key: 'userName'
+        key: 'userName',
+        ...COLUMN_WIDTH_CONFIG['userName']
      },
      {
        title: t('datasource.datasource_type'),
-        key: 'type'
+        key: 'type',
+        width: 180
      },
      {
        title: t('datasource.datasource_parameter'),
        key: 'parameter',
+        width: 180,
        render: (rowData) => {
          return h(
            NPopover,
@ -71,20 +81,23 @@ export function useColumns(onCallback: Function) {
      },
      {
        title: t('datasource.description'),
-        key: 'note'
+        key: 'note',
+        ...COLUMN_WIDTH_CONFIG['note']
      },
      {
        title: t('datasource.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('datasource.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('datasource.operation'),
        key: 'operation',
-        width: 150,
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
        render: (rowData) => {
          return h(NSpace, null, {
            default: () => [
@ -139,7 +152,12 @@ export function useColumns(onCallback: Function) {
          })
        }
      }
-    ]
+    ] as TableColumns
+
+    return {
+      columns,
+      tableWidth: calculateTableWidth(columns) || DefaultTableWidth
+    }
  }

  return {
--- a/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
@ -126,6 +126,7 @@ const list = defineComponent({
          <NDataTable
            columns={this.columns}
            data={this.tableData}
+            scrollX={this.tableWidth}
            row-class-name='items'
          />
          <div class={styles.pagination}>
--- a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
@ -32,6 +32,11 @@ import {
  NSpace,
  NTooltip
 } from 'naive-ui'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type { Router } from 'vue-router'
 import type { ProjectRes } from '@/service/modules/projects/types'
 import { DeleteOutlined, EditOutlined } from '@vicons/antd'
@ -64,12 +69,14 @@ export function useTable() {
      {
        title: '#',
        key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (unused: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('project.list.project_name'),
        key: 'name',
        className: 'project-name',
+        ...COLUMN_WIDTH_CONFIG['name'],
        render: (row: { code: string; name: any }) =>
          h(
            NEllipsis,
@ -89,18 +96,46 @@ export function useTable() {
            }
          )
      },
-      { title: t('project.list.owned_users'), key: 'userName' },
-      { title: t('project.list.workflow_define_count'), key: 'defCount' },
+      {
+        title: t('project.list.owned_users'),
+        key: 'userName',
+        ...COLUMN_WIDTH_CONFIG['userName']
+      },
+      {
+        title: t('project.list.workflow_define_count'),
+        key: 'defCount',
+        width: 120,
+        ellipsis: {
+          tooltip: true
+        }
+      },
      {
        title: t('project.list.process_instance_running_count'),
-        key: 'instRunningCount'
+        key: 'instRunningCount',
+        width: 120,
+        ellipsis: {
+          tooltip: true
+        }
+      },
+      {
+        title: t('project.list.description'),
+        key: 'description',
+        ...COLUMN_WIDTH_CONFIG['note']
+      },
+      {
+        title: t('project.list.create_time'),
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
+      },
+      {
+        title: t('project.list.update_time'),
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
-      { title: t('project.list.description'), key: 'description' },
-      { title: t('project.list.create_time'), key: 'createTime' },
-      { title: t('project.list.update_time'), key: 'updateTime' },
      {
        title: t('project.list.operation'),
        key: 'actions',
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
        render(row: any) {
          return h(NSpace, null, {
            default: () => [
@ -168,10 +203,14 @@ export function useTable() {
        }
      }
    ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const variables = reactive({
    columns: [],
+    tableWidth: DefaultTableWidth,
    tableData: [],
    page: ref(1),
    pageSize: ref(10),
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
@ -162,7 +162,11 @@ const TaskDefinition = defineComponent({
          </div>
        </NCard>
        <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable
+            columns={this.columns}
+            data={this.tableData}
+            scrollX={this.tableWidth}
+          />
          <div class={styles.pagination}>
            <NPagination
              v-model:page={this.page}
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
@ -31,6 +31,11 @@ import {
  deleteTaskDefinition
 } from '@/service/modules/task-definition'
 import { useRoute } from 'vue-router'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type {
  TaskDefinitionItem,
  TaskDefinitionRes
@ -47,7 +52,8 @@ export function useTable(onEdit: Function) {
      {
        title: '#',
        key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('project.task.task_name'),
@ -59,40 +65,41 @@ export function useTable(onEdit: Function) {
              onClick: () => void onEdit(row, true)
            },
            { default: () => row.taskName }
-          )
+          ),
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('project.task.workflow_name'),
-        key: 'processDefinitionName'
+        key: 'processDefinitionName',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('project.task.workflow_state'),
        key: 'processReleaseState',
        render: (row: any) => {
          if (row.processReleaseState === 'OFFLINE') {
-            return h(
-              NTag,
-              { type: 'error', size: 'small' },
+            return h(NTag, { type: 'error', size: 'small' }, () =>
              t('project.task.offline')
            )
          } else if (row.processReleaseState === 'ONLINE') {
-            return h(
-              NTag,
-              { type: 'info', size: 'small' },
+            return h(NTag, { type: 'info', size: 'small' }, () =>
              t('project.task.online')
            )
          }
-        }
+        },
+        ...COLUMN_WIDTH_CONFIG['state']
      },
      {
        title: t('project.task.task_type'),
-        key: 'taskType'
+        key: 'taskType',
+        ...COLUMN_WIDTH_CONFIG['type']
      },
      {
        title: t('project.task.version'),
        key: 'taskVersion',
        render: (row: TaskDefinitionItem) =>
-          h('span', null, 'v' + row.taskVersion)
+          h('span', null, 'v' + row.taskVersion),
+        ...COLUMN_WIDTH_CONFIG['version']
      },
      {
        title: t('project.task.upstream_tasks'),
@ -113,19 +120,23 @@ export function useTable(onEdit: Function) {
                      )
                    })
                })
-          )
+          ),
+        width: 140
      },
      {
        title: t('project.task.create_time'),
-        key: 'taskCreateTime'
+        key: 'taskCreateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('project.task.update_time'),
-        key: 'taskUpdateTime'
+        key: 'taskUpdateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('project.task.operation'),
        key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](4),
        render(row: any) {
          return h(NSpace, null, {
            default: () => [
@ -251,10 +262,14 @@ export function useTable(onEdit: Function) {
        }
      }
    ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const variables = reactive({
    columns: [],
+    tableWidth: DefaultTableWidth,
    tableData: [],
    page: ref(1),
    pageSize: ref(10),
--- a/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
@ -185,7 +185,7 @@ const TaskInstance = defineComponent({
          <NDataTable
            columns={this.columns}
            data={this.tableData}
-            scrollX={1800}
+            scrollX={this.tableWidth}
          />
          <div class={styles.pagination}>
            <NPagination
--- a/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
@ -33,6 +33,11 @@ import {
 import { format } from 'date-fns'
 import { useRoute, useRouter } from 'vue-router'
 import { parseTime, tasksState } from '@/utils/common'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type { Router, TaskInstancesRes, IRecord, ITaskState } from './types'

 export function useTable() {
@ -44,6 +49,7 @@ export function useTable() {

  const variables = reactive({
    columns: [],
+    tableWidth: DefaultTableWidth,
    tableData: [] as IRecord[],
    page: ref(1),
    pageSize: ref(10),
@ -64,15 +70,18 @@ export function useTable() {
      {
        title: '#',
        key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('project.task.task_name'),
-        key: 'name'
+        key: 'name',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('project.task.workflow_instance'),
        key: 'processInstanceName',
+        ...COLUMN_WIDTH_CONFIG['name'],
        render: (row: {
          processInstanceId: number
          processInstanceName: string
@ -92,52 +101,61 @@ export function useTable() {
      },
      {
        title: t('project.task.executor'),
-        key: 'executorName'
+        key: 'executorName',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('project.task.node_type'),
-        key: 'taskType'
+        key: 'taskType',
+        ...COLUMN_WIDTH_CONFIG['type']
      },
      {
        title: t('project.task.state'),
        key: 'state',
+        ...COLUMN_WIDTH_CONFIG['state'],
        render: (row: IRecord) => renderStateCell(row.state, t)
      },
      {
        title: t('project.task.submit_time'),
+        ...COLUMN_WIDTH_CONFIG['time'],
        key: 'submitTime'
      },
      {
        title: t('project.task.start_time'),
+        ...COLUMN_WIDTH_CONFIG['time'],
        key: 'startTime'
      },
      {
        title: t('project.task.end_time'),
+        ...COLUMN_WIDTH_CONFIG['time'],
        key: 'endTime'
      },
      {
        title: t('project.task.duration'),
        key: 'duration',
+        ...COLUMN_WIDTH_CONFIG['duration'],
        render: (row: any) => h('span', null, row.duration ? row.duration : '-')
      },
      {
        title: t('project.task.retry_count'),
-        key: 'retryTimes'
+        key: 'retryTimes',
+        ...COLUMN_WIDTH_CONFIG['times']
      },
      {
        title: t('project.task.dry_run_flag'),
        key: 'dryRun',
+        ...COLUMN_WIDTH_CONFIG['dryRun'],
        render: (row: IRecord) => (row.dryRun === 1 ? 'YES' : 'NO')
      },
      {
        title: t('project.task.host'),
-        key: 'host'
+        key: 'host',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('project.task.operation'),
        key: 'operation',
-        width: 150,
-        fixed: 'right',
+        ...COLUMN_WIDTH_CONFIG['operation'](3),
        render(row: any) {
          return h(NSpace, null, {
            default: () => [
@ -220,6 +238,9 @@ export function useTable() {
        }
      }
    ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const handleLog = (row: any) => {
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
@ -154,10 +154,10 @@ export default defineComponent({
            columns={this.columns}
            data={this.tableData}
            striped
-            size={'small'}
            class={styles.table}
            v-model:checked-row-keys={this.checkedRowKeys}
            row-class-name='items'
+            scrollX={this.tableWidth}
          />
          <div class={styles.pagination}>
            <NPagination
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx
@ -92,6 +92,7 @@ export default defineComponent({
            striped
            size={'small'}
            class={styles.table}
+            scrollX={this.tableWidth}
          />
          <div class={styles.pagination}>
            <NPagination
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
@ -31,11 +31,16 @@ import {
  DeleteOutlined,
  EditOutlined
 } from '@vicons/antd'
-import type { Router } from 'vue-router'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import { format } from 'date-fns-tz'
 import { ISearchParam } from './types'
 import { useTimezoneStore } from '@/store/timezone/timezone'
 import styles from '../index.module.scss'
+import type { Router } from 'vue-router'

 export function useTable() {
  const { t } = useI18n()
@ -45,6 +50,7 @@ export function useTable() {

  const variables = reactive({
    columns: [],
+    tableWidth: DefaultTableWidth,
    row: {},
    tableData: [],
    projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
@ -70,13 +76,13 @@ export function useTable() {
      {
        title: '#',
        key: 'id',
-        width: 50,
+        ...COLUMN_WIDTH_CONFIG['index'],
        render: (row: any, index: number) => index + 1
      },
      {
        title: t('project.workflow.workflow_name'),
        key: 'processDefinitionName',
-        width: 200,
+        ...COLUMN_WIDTH_CONFIG['name'],
        render: (row: any) =>
          h(
            NEllipsis,
@ -89,24 +95,29 @@ export function useTable() {
      {
        title: t('project.workflow.start_time'),
        key: 'startTime',
+        ...COLUMN_WIDTH_CONFIG['time'],
        render: (row: any) => renderTime(row.startTime)
      },
      {
        title: t('project.workflow.end_time'),
        key: 'endTime',
+        ...COLUMN_WIDTH_CONFIG['time'],
        render: (row: any) => renderTime(row.endTime)
      },
      {
        title: t('project.workflow.crontab'),
-        key: 'crontab'
+        key: 'crontab',
+        width: 140
      },
      {
        title: t('project.workflow.failure_strategy'),
-        key: 'failureStrategy'
+        key: 'failureStrategy',
+        width: 140
      },
      {
        title: t('project.workflow.status'),
        key: 'releaseState',
+        ...COLUMN_WIDTH_CONFIG['state'],
        render: (row: any) =>
          row.releaseState === 'ONLINE'
            ? t('project.workflow.up_line')
@ -114,16 +125,18 @@ export function useTable() {
      },
      {
        title: t('project.workflow.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('project.workflow.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('project.workflow.operation'),
        key: 'operation',
-        fixed: 'right',
+        ...COLUMN_WIDTH_CONFIG['operation'](3),
        className: styles.operation,
        render: (row: any) => {
          return h(NSpace, null, {
@ -218,6 +231,9 @@ export function useTable() {
        }
      }
    ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const handleEdit = (row: any) => {
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
@ -31,10 +31,15 @@ import {
  release
 } from '@/service/modules/process-definition'
 import TableAction from './components/table-action'
-import { IDefinitionParam } from './types'
 import styles from './index.module.scss'
 import { NEllipsis, NTag } from 'naive-ui'
 import ButtonLink from '@/components/button-link'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { IDefinitionParam } from './types'

 export function useTable() {
  const { t } = useI18n()
@ -42,6 +47,7 @@ export function useTable() {

  const variables = reactive({
    columns: [],
+    tableWidth: DefaultTableWidth,
    checkedRowKeys: [] as Array<RowKey>,
    row: {},
    tableData: [],
@ -62,19 +68,20 @@ export function useTable() {
      {
        type: 'selection',
        disabled: (row) => row.releaseState === 'ONLINE',
-        className: 'btn-selected'
+        className: 'btn-selected',
+        ...COLUMN_WIDTH_CONFIG['selection']
      },
      {
        title: '#',
        key: 'id',
-        width: 50,
+        ...COLUMN_WIDTH_CONFIG['index'],
        render: (row, index) => index + 1
      },
      {
        title: t('project.workflow.workflow_name'),
        key: 'name',
-        width: 200,
        className: 'workflow-name',
+        ...COLUMN_WIDTH_CONFIG['name'],
        render: (row) =>
          h(
            NEllipsis,
@ -99,6 +106,7 @@ export function useTable() {
      {
        title: t('project.workflow.status'),
        key: 'releaseState',
+        ...COLUMN_WIDTH_CONFIG['state'],
        render: (row) =>
          row.releaseState === 'ONLINE'
            ? t('project.workflow.up_line')
@ -107,28 +115,32 @@ export function useTable() {
      {
        title: t('project.workflow.create_time'),
        key: 'createTime',
-        width: 150
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('project.workflow.update_time'),
        key: 'updateTime',
-        width: 150
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('project.workflow.description'),
-        key: 'description'
+        key: 'description',
+        ...COLUMN_WIDTH_CONFIG['note']
      },
      {
        title: t('project.workflow.create_user'),
-        key: 'userName'
+        key: 'userName',
+        ...COLUMN_WIDTH_CONFIG['userName']
      },
      {
        title: t('project.workflow.modify_user'),
-        key: 'modifyBy'
+        key: 'modifyBy',
+        ...COLUMN_WIDTH_CONFIG['userName']
      },
      {
        title: t('project.workflow.schedule_publish_status'),
        key: 'scheduleReleaseState',
+        ...COLUMN_WIDTH_CONFIG['state'],
        render: (row) => {
          if (row.scheduleReleaseState === 'ONLINE') {
            return h(
@ -154,8 +166,7 @@ export function useTable() {
      {
        title: t('project.workflow.operation'),
        key: 'operation',
-        width: 360,
-        fixed: 'right',
+        ...COLUMN_WIDTH_CONFIG['operation'](8.5),
        className: styles.operation,
        render: (row) =>
          h(TableAction, {
@ -173,6 +184,9 @@ export function useTable() {
          })
      }
    ] as TableColumns<any>
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const editWorkflow = (row: any) => {
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx
@ -105,7 +105,7 @@ export default defineComponent({
            striped
            size={'small'}
            class={styles.table}
-            scrollX={1800}
+            scrollX={this.tableWidth}
            v-model:checked-row-keys={this.checkedRowKeys}
            row-class-name='items-workflow-instances'
          />
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts
@ -33,6 +33,11 @@ import { runningType } from '@/utils/common'
 import { parseTime } from '@/utils/common'
 import styles from './index.module.scss'
 import { renderStateCell } from '../../task/instance/use-table'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type { Router } from 'vue-router'
 import type { IWorkflowInstance } from '@/service/modules/process-instances/types'
 import type { ICountDownParam } from './types'
@ -44,6 +49,7 @@ export function useTable() {

  const variables = reactive({
    columns: [],
+    tableWidth: DefaultTableWidth,
    checkedRowKeys: [] as Array<RowKey>,
    tableData: [] as Array<IWorkflowInstance>,
    page: ref(1),
@ -62,18 +68,19 @@ export function useTable() {
    variables.columns = [
      {
        type: 'selection',
-        className: 'btn-selected'
+        className: 'btn-selected',
+        ...COLUMN_WIDTH_CONFIG['selection']
      },
      {
        title: '#',
        key: 'id',
-        width: 50,
+        ...COLUMN_WIDTH_CONFIG['index'],
        render: (rowData: any, rowIndex: number) => rowIndex + 1
      },
      {
        title: t('project.workflow.workflow_name'),
        key: 'name',
-        width: 200,
+        ...COLUMN_WIDTH_CONFIG['name'],
        className: 'workflow-name',
        render: (row: IWorkflowInstance) =>
          h(
@ -92,12 +99,14 @@ export function useTable() {
      {
        title: t('project.workflow.status'),
        key: 'state',
+        ...COLUMN_WIDTH_CONFIG['state'],
        className: 'workflow-status',
        render: (_row: IWorkflowInstance) => renderStateCell(_row.state, t)
      },
      {
        title: t('project.workflow.run_type'),
        key: 'commandType',
+        width: 160,
        className: 'workflow-run-type',
        render: (_row: IWorkflowInstance) =>
          (
@ -108,6 +117,7 @@ export function useTable() {
      {
        title: t('project.workflow.scheduling_time'),
        key: 'scheduleTime',
+        ...COLUMN_WIDTH_CONFIG['time'],
        render: (_row: IWorkflowInstance) =>
          _row.scheduleTime
            ? format(parseTime(_row.scheduleTime), 'yyyy-MM-dd HH:mm:ss')
@ -116,6 +126,7 @@ export function useTable() {
      {
        title: t('project.workflow.start_time'),
        key: 'startTime',
+        ...COLUMN_WIDTH_CONFIG['time'],
        render: (_row: IWorkflowInstance) =>
          _row.startTime
            ? format(parseTime(_row.startTime), 'yyyy-MM-dd HH:mm:ss')
@ -124,6 +135,7 @@ export function useTable() {
      {
        title: t('project.workflow.end_time'),
        key: 'endTime',
+        ...COLUMN_WIDTH_CONFIG['time'],
        render: (_row: IWorkflowInstance) =>
          _row.endTime
            ? format(parseTime(_row.endTime), 'yyyy-MM-dd HH:mm:ss')
@ -132,35 +144,40 @@ export function useTable() {
      {
        title: t('project.workflow.duration'),
        key: 'duration',
+        ...COLUMN_WIDTH_CONFIG['duration'],
        render: (_row: IWorkflowInstance) => _row.duration || '-'
      },
      {
        title: t('project.workflow.run_times'),
        key: 'runTimes',
+        ...COLUMN_WIDTH_CONFIG['times'],
        className: 'workflow-run-times'
      },
      {
        title: t('project.workflow.fault_tolerant_sign'),
-        key: 'recovery'
+        key: 'recovery',
+        width: 100
      },
      {
        title: t('project.workflow.dry_run_flag'),
        key: 'dryRun',
+        ...COLUMN_WIDTH_CONFIG['dryRun'],
        render: (_row: IWorkflowInstance) => (_row.dryRun === 1 ? 'YES' : 'NO')
      },
      {
        title: t('project.workflow.executor'),
-        key: 'executorName'
+        key: 'executorName',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('project.workflow.host'),
-        key: 'host'
+        key: 'host',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('project.workflow.operation'),
        key: 'operation',
-        width: 250,
-        fixed: 'right',
+        ...COLUMN_WIDTH_CONFIG['operation'](6),
        className: styles.operation,
        render: (_row: IWorkflowInstance, index: number) =>
          h(TableAction, {
@ -213,6 +230,9 @@ export function useTable() {
          })
      }
    ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const getTableData = () => {
--- a/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
@ -196,7 +196,7 @@ export default defineComponent({
        const newDir = dirs.slice(0, index + 1).join('/')
        if (newDir) {
          const id = 0
-          let resource = await queryResourceById(
+          const resource = await queryResourceById(
            {
              id,
              type: 'FILE',
@ -249,7 +249,10 @@ export default defineComponent({
  },
  render() {
    const { t } = useI18n()
-    const { columnsRef } = useTable(this.handleRenameFile, this.updateList)
+    const { columnsRef, tableWidth } = useTable(
+      this.handleRenameFile,
+      this.updateList
+    )
    const {
      handleConditions,
      handleCreateFolder,
@ -322,6 +325,7 @@ export default defineComponent({
                  size={'small'}
                  class={styles['table-box']}
                  row-class-name='items'
+                  scrollX={tableWidth}
                />
                <div class={styles.pagination}>
                  <NPagination
--- a/dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts
@ -23,6 +23,11 @@ import { useFileStore } from '@/store/file/file'
 import TableAction from './table-action'
 import { IRenameFile } from '../types'
 import ButtonLink from '@/components/button-link'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type { Router } from 'vue-router'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'

@ -46,13 +51,13 @@ export function useTable(renameResource: IRenameFile, updateList: () => void) {
    {
      title: '#',
      key: 'id',
-      width: 50,
+      ...COLUMN_WIDTH_CONFIG['index'],
      render: (_row, index) => index + 1
    },
    {
      title: t('resource.file.name'),
      key: 'name',
-      width: 120,
+      ...COLUMN_WIDTH_CONFIG['name'],
      render: (row) =>
        h(
          ButtonLink,
@ -62,37 +67,55 @@ export function useTable(renameResource: IRenameFile, updateList: () => void) {
          { default: () => row.name }
        )
    },
-    { title: t('resource.file.user_name'), width: 100, key: 'user_name' },
+    {
+      title: t('resource.file.user_name'),
+      ...COLUMN_WIDTH_CONFIG['userName'],
+      key: 'user_name'
+    },
    {
      title: t('resource.file.whether_directory'),
      key: 'whether_directory',
-      width: 100,
+      ...COLUMN_WIDTH_CONFIG['yesOrNo'],
      render: (row) =>
        row.directory ? t('resource.file.yes') : t('resource.file.no')
    },
-    { title: t('resource.file.file_name'), key: 'file_name' },
-    { title: t('resource.file.description'), width: 150, key: 'description' },
+    {
+      title: t('resource.file.file_name'),
+      ...COLUMN_WIDTH_CONFIG['name'],
+      key: 'file_name'
+    },
+    {
+      title: t('resource.file.description'),
+      ...COLUMN_WIDTH_CONFIG['note'],
+      key: 'description'
+    },
    {
      title: t('resource.file.size'),
      key: 'size',
+      ...COLUMN_WIDTH_CONFIG['size'],
      render: (row) => bytesToSize(row.size)
    },
-    { title: t('resource.file.update_time'), width: 150, key: 'update_time' },
+    {
+      title: t('resource.file.update_time'),
+      ...COLUMN_WIDTH_CONFIG['time'],
+      key: 'update_time'
+    },
    {
      title: t('resource.file.operation'),
      key: 'operation',
-      width: 150,
      render: (row) =>
        h(TableAction, {
          row,
          onRenameResource: (id, name, description) =>
            renameResource(id, name, description),
          onUpdateList: () => updateList()
-        })
+        }),
+      ...COLUMN_WIDTH_CONFIG['operation'](4)
    }
  ]

  return {
-    columnsRef
+    columnsRef,
+    tableWidth: calculateTableWidth(columnsRef) || DefaultTableWidth
  }
 }
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx
@ -41,7 +41,7 @@ const taskGroupOption = defineComponent({

    const searchParamRef = ref()

-    let updateItemData = reactive({
+    const updateItemData = reactive({
      id: 0,
      name: '',
      projectCode: 0,
@ -180,6 +180,7 @@ const taskGroupOption = defineComponent({
              size={'small'}
              data={this.tableData}
              striped
+              scrollX={this.tableWidth}
            />
            <div class={styles.pagination}>
              <NPagination
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts
@ -18,12 +18,17 @@
 import { h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { format } from 'date-fns'
-import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 import { queryTaskGroupListPaging } from '@/service/modules/task-group'
 import { queryAllProjectList } from '@/service/modules/projects'
 import TableAction from './components/table-action'
 import _ from 'lodash'
 import { parseTime } from '@/utils/common'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { TableColumns } from 'naive-ui/es/data-table/src/interface'

 export function useTable(
  updateItem = (
@ -39,24 +44,51 @@ export function useTable(
  const { t } = useI18n()

  const columns: TableColumns<any> = [
-    { title: '#', key: 'index', render: (row, index) => index + 1 },
-    { title: t('resource.task_group_option.name'), key: 'name' },
-    { title: t('resource.task_group_option.project_name'), key: 'projectName' },
+    {
+      title: '#',
+      key: 'index',
+      render: (row, index) => index + 1,
+      ...COLUMN_WIDTH_CONFIG['index']
+    },
+    {
+      title: t('resource.task_group_option.name'),
+      key: 'name',
+      ...COLUMN_WIDTH_CONFIG['name']
+    },
+    {
+      title: t('resource.task_group_option.project_name'),
+      key: 'projectName',
+      ...COLUMN_WIDTH_CONFIG['name']
+    },
    {
      title: t('resource.task_group_option.resource_pool_size'),
-      key: 'groupSize'
+      key: 'groupSize',
+      width: 160
    },
    {
      title: t('resource.task_group_option.resource_used_pool_size'),
-      key: 'useSize'
+      key: 'useSize',
+      width: 140
+    },
+    {
+      title: t('resource.task_group_option.desc'),
+      key: 'description',
+      ...COLUMN_WIDTH_CONFIG['note']
+    },
+    {
+      title: t('resource.task_group_option.create_time'),
+      key: 'createTime',
+      ...COLUMN_WIDTH_CONFIG['time']
+    },
+    {
+      title: t('resource.task_group_option.update_time'),
+      key: 'updateTime',
+      ...COLUMN_WIDTH_CONFIG['time']
    },
-    { title: t('resource.task_group_option.desc'), key: 'description' },
-    { title: t('resource.task_group_option.create_time'), key: 'createTime' },
-    { title: t('resource.task_group_option.update_time'), key: 'updateTime' },
    {
      title: t('resource.task_group_option.actions'),
      key: 'actions',
-      width: 150,
+      ...COLUMN_WIDTH_CONFIG['operation'](3),
      render: (row: any) =>
        h(TableAction, {
          row,
@ -82,6 +114,7 @@ export function useTable(

  const variables = reactive({
    tableData: [],
+    tableWidth: calculateTableWidth(columns) || DefaultTableWidth,
    page: ref(1),
    pageSize: ref(10),
    name: ref(null),
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx
@ -196,6 +196,7 @@ const taskGroupQueue = defineComponent({
              size={'small'}
              data={this.tableData}
              striped
+              scrollX={this.tableWidth}
            />
            <div class={styles.pagination}>
              <NPagination
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts
@ -25,6 +25,11 @@ import {
 } from '@/service/modules/task-group'
 import TableAction from './components/table-action'
 import _ from 'lodash'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import { parseTime } from '@/utils/common'

 export function useTable(
@ -34,30 +39,66 @@ export function useTable(
  const { t } = useI18n()

  const columns: TableColumns<any> = [
-    { title: '#', key: 'index', render: (row, index) => index + 1 },
-    { title: t('resource.task_group_queue.project_name'), key: 'projectName' },
-    { title: t('resource.task_group_queue.task_name'), key: 'taskName' },
+    {
+      title: '#',
+      key: 'index',
+      render: (row, index) => index + 1,
+      ...COLUMN_WIDTH_CONFIG['index']
+    },
+    {
+      title: t('resource.task_group_queue.project_name'),
+      key: 'projectName',
+      ...COLUMN_WIDTH_CONFIG['name']
+    },
+    {
+      title: t('resource.task_group_queue.task_name'),
+      key: 'taskName',
+      ...COLUMN_WIDTH_CONFIG['name']
+    },
    {
      title: t('resource.task_group_queue.process_instance_name'),
-      key: 'processInstanceName'
+      key: 'processInstanceName',
+      ...COLUMN_WIDTH_CONFIG['name']
    },
    {
      title: t('resource.task_group_queue.task_group_name'),
-      key: 'taskGroupName'
+      key: 'taskGroupName',
+      ...COLUMN_WIDTH_CONFIG['name']
+    },
+    {
+      title: t('resource.task_group_queue.priority'),
+      key: 'priority',
+      width: 120
    },
-    { title: t('resource.task_group_queue.priority'), key: 'priority' },
    {
      title: t('resource.task_group_queue.force_starting_status'),
-      key: 'forceStart'
+      key: 'forceStart',
+      ...COLUMN_WIDTH_CONFIG['state']
+    },
+    {
+      title: t('resource.task_group_queue.in_queue'),
+      key: 'inQueue',
+      width: 120
+    },
+    {
+      title: t('resource.task_group_queue.task_status'),
+      key: 'status',
+      ...COLUMN_WIDTH_CONFIG['state']
+    },
+    {
+      title: t('resource.task_group_queue.create_time'),
+      key: 'createTime',
+      ...COLUMN_WIDTH_CONFIG['time']
+    },
+    {
+      title: t('resource.task_group_queue.update_time'),
+      key: 'updateTime',
+      ...COLUMN_WIDTH_CONFIG['time']
    },
-    { title: t('resource.task_group_queue.in_queue'), key: 'inQueue' },
-    { title: t('resource.task_group_queue.task_status'), key: 'status' },
-    { title: t('resource.task_group_queue.create_time'), key: 'createTime' },
-    { title: t('resource.task_group_queue.update_time'), key: 'updateTime' },
    {
      title: t('resource.task_group_queue.actions'),
      key: 'actions',
-      width: 150,
+      ...COLUMN_WIDTH_CONFIG['operation'](2),
      render: (row: any) =>
        h(TableAction, {
          row,
@ -76,6 +117,7 @@ export function useTable(

  const variables = reactive({
    tableData: [],
+    tableWidth: calculateTableWidth(columns) || DefaultTableWidth,
    page: ref(1),
    pageSize: ref(10),
    groupId: ref(3),
--- a/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx
@ -129,6 +129,7 @@ export default defineComponent({
            size={'small'}
            class={styles.table}
            row-class-name='items'
+            scrollX={this.tableWidth}
          />
          <div class={styles.pagination}>
            <NPagination
--- a/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts
@ -27,7 +27,12 @@ import {
  queryUdfFuncListPaging,
  deleteUdfFunc
 } from '@/service/modules/resources'
-import { IUdfFunctionParam } from './types'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { IUdfFunctionParam } from './types'

 export function useTable() {
  const { t } = useI18n()
@ -35,6 +40,7 @@ export function useTable() {

  const variables = reactive({
    columns: [],
+    tableWidth: DefaultTableWidth,
    row: {},
    tableData: [],
    id: ref(Number(router.currentRoute.value.params.id) || -1),
@ -50,36 +56,43 @@ export function useTable() {
      {
        title: '#',
        key: 'id',
-        width: 50,
-        render: (_row, index) => index + 1
+        render: (_row, index) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('resource.function.udf_function_name'),
-        key: 'funcName'
+        key: 'funcName',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('resource.function.class_name'),
-        key: 'className'
+        key: 'className',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('resource.function.type'),
-        key: 'type'
+        key: 'type',
+        ...COLUMN_WIDTH_CONFIG['type']
      },
      {
        title: t('resource.function.description'),
-        key: 'description'
+        key: 'description',
+        ...COLUMN_WIDTH_CONFIG['note']
      },
      {
        title: t('resource.function.jar_package'),
-        key: 'resourceName'
+        key: 'resourceName',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('resource.function.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('resource.function.operation'),
        key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
        render: (row) => {
          return h(NSpace, null, {
            default: () => [
@ -143,6 +156,9 @@ export function useTable() {
        }
      }
    ] as TableColumns<any>
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const getTableData = (params: IUdfFunctionParam) => {
--- a/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx
@ -161,6 +161,7 @@ export default defineComponent({
                  size={'small'}
                  class={styles.table}
                  row-class-name='items'
+                  scrollX={this.tableWidth}
                />
                <div class={styles.pagination}>
                  <NPagination
--- a/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts
@ -32,7 +32,12 @@ import {
  queryResourceById
 } from '@/service/modules/resources'
 import ButtonLink from '@/components/button-link'
-import { IUdfResourceParam } from './types'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { IUdfResourceParam } from './types'

 const goSubFolder = (router: Router, item: any) => {
  const fileStore = useFileStore()
@ -51,6 +56,7 @@ export function useTable() {

  const variables = reactive({
    columns: [],
+    tableWidth: DefaultTableWidth,
    row: {},
    tableData: [],
    breadList: [],
@ -68,12 +74,13 @@ export function useTable() {
      {
        title: '#',
        key: 'id',
-        width: 50,
+        ...COLUMN_WIDTH_CONFIG['index'],
        render: (_row, index) => index + 1
      },
      {
        title: t('resource.udf.udf_source_name'),
        key: 'alias',
+        width: 60,
        render: (row) => {
          return !row.directory
            ? row.alias
@ -89,33 +96,40 @@ export function useTable() {
      {
        title: t('resource.udf.whether_directory'),
        key: 'whether_directory',
+        ...COLUMN_WIDTH_CONFIG['yesOrNo'],
        render: (row) =>
          row.directory ? t('resource.file.yes') : t('resource.file.no')
      },
      {
        title: t('resource.udf.file_name'),
+        ...COLUMN_WIDTH_CONFIG['name'],
        key: 'fileName'
      },
      {
        title: t('resource.udf.file_size'),
        key: 'size',
+        ...COLUMN_WIDTH_CONFIG['size'],
        render: (row) => bytesToSize(row.size)
      },
      {
        title: t('resource.udf.description'),
-        key: 'description'
+        key: 'description',
+        ...COLUMN_WIDTH_CONFIG['note']
      },
      {
        title: t('resource.udf.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('resource.udf.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('resource.udf.operation'),
        key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](3),
        render: (row) => {
          return h(NSpace, null, {
            default: () => [
@ -204,6 +218,9 @@ export function useTable() {
        }
      }
    ] as TableColumns<any>
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const getTableData = (params: IUdfResourceParam) => {
--- a/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
@ -138,6 +138,7 @@ const environmentManage = defineComponent({
            row-class-name='items'
            columns={this.columns}
            data={this.tableData}
+            scrollX={this.tableWidth}
          />
          <div class={styles.pagination}>
            <NPagination
--- a/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
@ -30,6 +30,11 @@ import type {
  EnvironmentItem
 } from '@/service/modules/environment/types'
 import { parseTime } from '@/utils/common'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'

 export function useTable() {
  const { t } = useI18n()
@ -45,24 +50,29 @@ export function useTable() {
      {
        title: '#',
        key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('security.environment.environment_name'),
        key: 'name',
-        className: 'environment-name'
+        className: 'environment-name',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('security.environment.environment_config'),
-        key: 'config'
+        key: 'config',
+        ...COLUMN_WIDTH_CONFIG['note']
      },
      {
        title: t('security.environment.environment_desc'),
-        key: 'description'
+        key: 'description',
+        ...COLUMN_WIDTH_CONFIG['note']
      },
      {
        title: t('security.environment.worker_groups'),
        key: 'workerGroups',
+        ...COLUMN_WIDTH_CONFIG['tag'],
        render: (row: EnvironmentItem) =>
          h(NSpace, null, {
            default: () =>
@ -77,15 +87,18 @@ export function useTable() {
      },
      {
        title: t('security.environment.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('security.environment.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('security.environment.operation'),
        key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
        render(row: any) {
          return h(NSpace, null, {
            default: () => [
@ -153,10 +166,14 @@ export function useTable() {
        }
      }
    ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const variables = reactive({
    columns: [],
+    tableWidth: DefaultTableWidth,
    tableData: [],
    page: ref(1),
    pageSize: ref(10),
--- a/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx
@ -130,7 +130,11 @@ const k8sNamespaceManage = defineComponent({
          </div>
        </NCard>
        <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable
+            columns={this.columns}
+            data={this.tableData}
+            scrollX={this.tableWidth}
+          />
          <div class={styles.pagination}>
            <NPagination
              v-model:page={this.page}
--- a/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts
@ -30,6 +30,11 @@ import type {
  NamespaceItem
 } from '@/service/modules/k8s-namespace/types'
 import { parseTime } from '@/utils/common'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'

 export function useTable() {
  const { t } = useI18n()
@ -58,43 +63,53 @@ export function useTable() {
      {
        title: '#',
        key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('security.k8s_namespace.k8s_namespace'),
-        key: 'namespace'
+        key: 'namespace',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('security.k8s_namespace.k8s_cluster'),
-        key: 'k8s'
+        key: 'k8s',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('security.k8s_namespace.owner'),
-        key: 'owner'
+        key: 'owner',
+        ...COLUMN_WIDTH_CONFIG['userName']
      },
      {
        title: t('security.k8s_namespace.tag'),
-        key: 'tag'
+        key: 'tag',
+        ...COLUMN_WIDTH_CONFIG['tag']
      },
      {
        title: t('security.k8s_namespace.limit_cpu'),
-        key: 'limitsCpu'
+        key: 'limitsCpu',
+        width: 140
      },
      {
        title: t('security.k8s_namespace.limit_memory'),
-        key: 'limitsMemory'
+        key: 'limitsMemory',
+        width: 140
      },
      {
        title: t('security.k8s_namespace.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('security.k8s_namespace.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('security.k8s_namespace.operation'),
        key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
        render(row: NamespaceItem) {
          return h(NSpace, null, {
            default: () => [
@ -160,11 +175,15 @@ export function useTable() {
        }
      }
    ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const variables = reactive({
    columns: [],
    tableData: [],
+    tableWidth: DefaultTableWidth,
    page: ref(1),
    pageSize: ref(10),
    searchVal: ref(null),
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
@ -127,6 +127,7 @@ const tenementManage = defineComponent({
            columns={this.columns}
            data={this.tableData}
            row-class-name='items'
+            scrollX={this.tableWidth}
          />
          <div class={styles.pagination}>
            <NPagination
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
@ -24,6 +24,11 @@ import { reactive, h, ref } from 'vue'
 import { NButton, NIcon, NPopconfirm, NSpace, NTooltip } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { DeleteOutlined, EditOutlined } from '@vicons/antd'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'

 export function useTable() {
  const { t } = useI18n()
@ -52,35 +57,39 @@ export function useTable() {
      {
        title: '#',
        key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('security.tenant.tenant_code'),
        key: 'tenantCode',
-        className: 'tenant-code'
+        className: 'tenant-code',
+        ...COLUMN_WIDTH_CONFIG['userName']
      },
      {
        title: t('security.tenant.description'),
        key: 'description',
-        ellipsis: {
-          tooltip: true
-        }
+        ...COLUMN_WIDTH_CONFIG['note']
      },
      {
        title: t('security.tenant.queue_name'),
-        key: 'queueName'
+        key: 'queueName',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('security.tenant.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('security.tenant.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('security.tenant.actions'),
        key: 'actions',
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
        render(row: any) {
          return h(NSpace, null, {
            default: () => [
@ -148,10 +157,14 @@ export function useTable() {
        }
      }
    ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
  }

  const variables = reactive({
    columns: [],
+    tableWidth: DefaultTableWidth,
    tableData: [],
    page: ref(1),
    pageSize: ref(10),
--- a/dolphinscheduler-ui-next/src/views/security/user-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/user-manage/index.tsx
@ -90,9 +90,10 @@ const UsersManage = defineComponent({
            <NSpace vertical>
              <NDataTable
                row-class-name='items'
-                columns={this.columnsRef}
+                columns={this.columnsRef.columns}
                data={this.list}
                loading={this.loading}
+                scrollX={this.columnsRef.tableWidth}
              />
              <NSpace justify='center'>
                <NPagination
--- a/dolphinscheduler-ui-next/src/views/security/user-manage/use-columns.ts
+++ b/dolphinscheduler-ui-next/src/views/security/user-manage/use-columns.ts
@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { h, ref, watch, onMounted, Ref } from 'vue'
+import { h, ref, watch, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
  NSpace,
@ -27,24 +27,34 @@ import {
  NPopconfirm
 } from 'naive-ui'
 import { EditOutlined, DeleteOutlined, UserOutlined } from '@vicons/antd'
-import { TableColumns, InternalRowData } from './types'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { TableColumns, InternalRowData } from './types'

 export function useColumns(onCallback: Function) {
  const { t } = useI18n()

-  const columnsRef = ref([]) as Ref<TableColumns>
+  const columnsRef = ref({
+    columns: [] as TableColumns,
+    tableWidth: DefaultTableWidth
+  })

  const createColumns = () => {
-    columnsRef.value = [
+    const columns = [
      {
        title: '#',
        key: 'index',
-        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1
+        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('security.user.username'),
        key: 'userName',
-        className: 'name'
+        className: 'name',
+        ...COLUMN_WIDTH_CONFIG['userName']
      },
      {
        title: t('security.user.user_type'),
@ -52,27 +62,33 @@ export function useColumns(onCallback: Function) {
        render: (rowData: InternalRowData) =>
          rowData.userType === 'GENERAL_USER'
            ? t('security.user.ordinary_user')
-            : t('security.user.administrator')
+            : t('security.user.administrator'),
+        ...COLUMN_WIDTH_CONFIG['type']
      },
      {
        title: t('security.user.tenant_code'),
-        key: 'tenantCode'
+        key: 'tenantCode',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('security.user.queue'),
-        key: 'queue'
+        key: 'queue',
+        width: 120
      },
      {
        title: t('security.user.email'),
-        key: 'email'
+        key: 'email',
+        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('security.user.phone'),
-        key: 'phone'
+        key: 'phone',
+        width: 140
      },
      {
        title: t('security.user.state'),
        key: 'state',
+        ...COLUMN_WIDTH_CONFIG['state'],
        render: (rowData: any, unused: number) =>
          h(
            NTag,
@ -89,15 +105,18 @@ export function useColumns(onCallback: Function) {
      },
      {
        title: t('security.user.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('security.user.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('security.user.operation'),
        key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](3),
        render: (rowData: any, unused: number) => {
          return h(NSpace, null, {
            default: () => [
@ -204,6 +223,10 @@ export function useColumns(onCallback: Function) {
        }
      }
    ]
+    columnsRef.value = {
+      columns,
+      tableWidth: calculateTableWidth(columns)
+    }
  }

  onMounted(() => {