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',
  }
])

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

Hi! 👋

This issue has been automatically closed due to prolonged inactivity.

We're a small team and can't address every report, but we appreciate your feedback and contributions.

If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.

Thank you for your understanding and support!

— Nuxt UI Team