arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-27 10:20:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Table): allow columns class customization

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/content/4.data/1.table.md
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. - `key` - The field to display from the row data.
- `sortable` - Whether the column is sortable. Defaults to `false`. - `sortable` - Whether the column is sortable. Defaults to `false`.
- `direction` - The sort direction to use on first click. Defaults to `asc`. - `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"} ::component-example{class="grid"}
--- ---

4
src/runtime/components/data/Table.vue
View File

@@ -7,7 +7,7 @@
<UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" @change="selected = $event.target.checked ? rows : []" /> <UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" @change="selected = $event.target.checked ? rows : []" />
</th> </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"> <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
<UButton <UButton
v-if="column.sortable" v-if="column.sortable"
@@ -96,7 +96,7 @@ export default defineComponent({
default: () => [] default: () => []
}, },
columns: { 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 default: null
}, },
columnAttribute: { columnAttribute: {