UTable column width

[GFStong]

Description

The code for specifying column width when there is no data is as follows and it is expected

<template>
  <div>
    <UTable :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'No items.' }" :rows="people"
      :columns="columns">
      <template #from-data="{ row }">
        {{ row.from.value }}
      </template>
    </UTable>
    <UNotifications>
      <template #title="{ title }">
        <span v-html="title" />
      </template>

      <template #description="{ description }">
        <span v-html="description" />
      </template>
    </UNotifications>
  </div>
</template>

<script setup lang="ts">
const toast = useToast()
const app = useNuxtApp()

const columns = [{
  key: "id",
  label: "编号",
  class: 'w-16'
}, {
  key: "from",
  label: "发方",
  class: 'w-[180px]'
}, {
  key: "to",
  label: "接方",
  class: 'w-[180px]'

}, {
  key: "type",
  label: "类型",
  class: 'w-[120px]'

}, {
  key: "value",
  label: "金额",
  class: 'w-[120px]'

}, {
  key: "hash",
  label: "哈希",
}
]

const people = ref([
    /*{
    "id": 1,
    "from": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },
    "to": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',
    "type": 'ETH',
    "value": '123',
    "hash": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',
  }*/
])


</script>


<style>
a {
  color: #65a30d;
  font-weight: 700;
  font-size: 20px;
}


</style>

However, once there is data, it will be stretched open. How can I fix the header so that the content is partially hidden and drag the header to decide whether to hide or display it? This is too common in daily development and provides a good user experience

const people = ref([
    {
    "id": 1,
    "from": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },
    "to": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',
    "type": 'ETH',
    "value": '123',
    "hash": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',
  }
])