arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-01 04:37:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Table): handle rowClass property in columns (#1632)

Browse Source 
Signed-off-by: Alexander Trost <galexrt@googlemail.com>
This commit is contained in:
Alexander Trost
2024-07-23 14:44:33 +02:00
committed by GitHub
parent f74f1df6ca
commit 748e49175d
2 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/content/2.components/table.md
View File

@@ -29,6 +29,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o
- `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. - `class` - The class to apply to the column cells.
- `rowClass` - The class to apply to the data column cells.
- `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison. - `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison.
::component-example{class="grid"} ::component-example{class="grid"}

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

@@ -71,7 +71,7 @@
<UCheckbox v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.stop /> <UCheckbox v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.stop />
</td> </td>
<td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, row[column.key]?.class]"> <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, column?.rowClass, row[column.key]?.class]">
<slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)"> <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
{{ getRowData(row, column.key) }} {{ getRowData(row, column.key) }}
</slot> </slot>
@@ -121,6 +121,7 @@ interface Column {
sort?: (a: any, b: any, direction: 'asc' | 'desc') => number sort?: (a: any, b: any, direction: 'asc' | 'desc') => number
direction?: 'asc' | 'desc' direction?: 'asc' | 'desc'
class?: string class?: string
rowClass?: string
[key: string]: any [key: string]: any
} }