feat(Table): add caption prop

This commit is contained in:
Benjamin Canac
2024-11-09 23:55:26 +01:00
parent 7e8a1dd496
commit 446f9c1085
6 changed files with 144 additions and 5 deletions

View File

@@ -41,6 +41,7 @@ export interface TableData {
export interface TableProps<T> {
data?: T[]
columns?: TableColumn<T>[]
caption?: string
/**
* Whether the table should have a sticky header.
* @defaultValue false
@@ -95,6 +96,7 @@ type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, un
export type TableSlots<T> = {
expanded: (props: { row: Row<T> }) => any
empty: (props?: {}) => any
caption: (props?: {}) => any
} & DynamicHeaderSlots<T> & DynamicCellSlots<T>
</script>
@@ -191,6 +193,12 @@ defineExpose({
<template>
<div :class="ui.root({ class: [props.class, props.ui?.root] })">
<table :class="ui.base({ class: [props.ui?.base] })">
<caption v-if="caption" :class="ui.caption({ class: [props.ui?.caption] })">
<slot name="caption">
{{ caption }}
</slot>
</caption>
<thead :class="ui.thead({ class: [props.ui?.thead] })">
<tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
<th