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

feat(Table): customize header and cell through slots (#2457)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Alexander
2024-10-30 19:21:48 +05:00
committed by GitHub
parent 45171e206e
commit ef561e7cba
6 changed files with 542 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/runtime/components/Table.vue
View File

@@ -19,7 +19,9 @@ import type {
ExpandedOptions,
SortingOptions,
RowSelectionOptions,
Updater
Updater,
CellContext,
HeaderContext
} from '@tanstack/vue-table'
import _appConfig from '#build/app.config'
import theme from '#build/ui/table'
@@ -87,10 +89,13 @@ export interface TableProps<T> {
ui?: Partial<typeof table.slots>
}
export interface TableSlots<T> {
expanded(props: { row: Row<T> }): any
empty(props?: {}): any
}
type DynamicHeaderSlots<T, K = keyof T> = Record<string, T> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
type DynamicCellSlots<T, K = keyof T> = Record<string, T> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
export type TableSlots<T> = {
expanded: (props: { row: Row<T> }) => any
empty: (props?: {}) => any
} & DynamicHeaderSlots<T> & DynamicCellSlots<T>
</script>
@@ -193,7 +198,9 @@ defineExpose({
:data-pinned="header.column.getIsPinned()"
:class="ui.th({ class: [props.ui?.th], pinned: !!header.column.getIsPinned() })"
>
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
<slot :name="`${header.id}-header`" v-bind="header.getContext()">
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
</slot>
</th>
</tr>
</thead>
@@ -208,7 +215,9 @@ defineExpose({
:data-pinned="cell.column.getIsPinned()"
:class="ui.td({ class: [props.ui?.td], pinned: !!cell.column.getIsPinned() })"
>
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
<slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
</slot>
</td>
</tr>
<tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">