feat(Table): allow columns class customization

Resolves #366
This commit is contained in:
Benjamin Canac
2023-06-29 17:42:34 +02:00
parent cbd8cc49fb
commit 5dffa868b1
2 changed files with 3 additions and 2 deletions

View File

@@ -72,6 +72,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o
- `key` - The field to display from the row data.
- `sortable` - Whether the column is sortable. Defaults to `false`.
- `direction` - The sort direction to use on first click. Defaults to `asc`.
- `class` - The class to apply to the column cells.
::component-example{class="grid"}
---

View File

@@ -7,7 +7,7 @@
<UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" @change="selected = $event.target.checked ? rows : []" />
</th>
<th v-for="(column, index) in columns" :key="index" scope="col" :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size]">
<th v-for="(column, index) in columns" :key="index" scope="col" :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]">
<slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
<UButton
v-if="column.sortable"
@@ -96,7 +96,7 @@ export default defineComponent({
default: () => []
},
columns: {
type: Array as PropType<{ key: string, sortable?: boolean, [key: string]: any }[]>,
type: Array as PropType<{ key: string, sortable?: boolean, class?: string, [key: string]: any }[]>,
default: null
},
columnAttribute: {