やりたいこと
- Nuxt UIのUTableを使うとき、テーブルのカラムの長さを調整する
やり方
- 意外と単純でした。rowsやcolumnsにて、classを定義して長さの調整ができました
- しかし、振り向くと結構検索プロセスのところで遠回しがありました
環境
- macOS
- Nuxt 3
- Nuxt UI(+Tailwind CSS)
Before
<script setup lang="ts">
const columns = [{
key: 'id',
label: 'ID'
}, {
key: 'task',
label: 'Task'
}, {
key: 'date',
label: 'Register Date'
}, {
key: 'status',
label: 'Status'
}, {
key: 'actions'
}]
const tasks = [{
id: 1,
task: 'Study Nuxt 3',
date: '2024-05-03',
status: 'Not Finished'
}, {
id: 2,
task: 'Buy some snacks',
date: '2024-05-03',
status: 'Finished'
}, {
id: 3,
task: 'Cook dinner',
date: '2024-05-09',
status: 'Not Finished'
},]
</script>
<template>
<UTable :columns="columns" :rows="tasks">
<template #actions-data="">
<div class="flex gap-2">
<UButton color="blue">DONE</UButton>
<UButton color="red">DELETE</UButton>
</div>
</template>
</UTable>
</template>
ここのところ、データの長さによっていろいろ変わって行ったが、
タスクのところを長くし、ステータスや登録日は減らしたかったです。
After
const columns = [{
key: 'id',
- label: 'ID'
+ label: 'ID',
+ class: 'w-2'
}, {
key: 'task',
- label: 'Task'
+ label: 'Task',
+ class: 'w-1/2'
}, {
key: 'date',
label: 'Register Date'
}, {
key: 'status',
label: 'Status'
}, {
key: 'actions'
}]
「class」を定義することで簡単に対応できました。
参照資料
galexrt：
From my perspective, as a short-term "workaround," it would be good if there was a way to apply classes to the data columns directly, e.g., rowClass property, from the columns list. This would allow us to be easily be able to use media queries to hide/show/"combine" data where appropriate.
const columns = [
{
key: 'test1',
label: 'Big Screen',
class: 'hidden lg:block',
rowClass: 'hidden lg:block',
},
{
key: 'test2',
label: 'Mobile only',
class: 'block lg:hidden',
rowClass: 'block lg:hidden',
},
];
→ こちらのclass属性にヒントを得て、試してみたら成功！
しかし、元々は公式ドキュメントにあったものでした。。
こちら、
- tr,tdってclass elementを渡すことでスタイルの定義できますよ！と、
- th elementもclassで定義できますよ！と、
→ widthやcolumnなどの検索語で集中したら見逃してしまいました
遠回しのトラック
1)ググる＋Nuxt UIのリポジトリを探す
- 「Nuxt UI Table column width」
- 「UTable Nuxt width」
-
https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+width
→ (Tableやwidthなどのキーワードで探そうとする)
結局、上記の「参照」周りにgalexrtさんの返事からヒントが得られましたが、
- ChatGPTとのやりとり
私:[Q]UTableのカラムの長さ、どのように調整しますか。
ChatGPT: これ、試したらどうかしら？（ペラペラ）
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
const columns = ref([
{ key: 'id', label: 'ID', width: '10%' },
{ key: 'task', label: 'Task', width: '40%' },
{ key: 'date', label: 'Register Date', width: '20%' },
{ key: 'status', label: 'Status', width: '20%' },
{ key: 'actions', label: 'Actions', width: '10%' }
]);
const tasks = ref([
{ id: 1, task: 'Study Nuxt 3', date: '2024-05-03', status: 'Not Finished' },
{ id: 2, task: 'Buy some snacks', date: '2024-05-03', status: 'Finished' },
{ id: 3, task: 'Cook dinner', date: '2024-05-09', status: 'Not Finished' }
]);
const adjustColumns = () => {
const totalWidth = 100;
const fixedColumns = 3;
const dynamicWidth = (totalWidth - fixedColumns * 10) / (columns.value.length - fixedColumns);
columns.value.forEach(col => {
if (col.key === 'status') {
col.width = dynamicWidth + '%';
}
});
};
onMounted(adjustColumns);
watch([tasks, columns], adjustColumns);
</script>
なんの影響もなかった。。！
感想
- 公式ドキュメントをきちんと読むことが重要だと学びました