diff --git a/docs/components/content/examples/TableExampleCaptionSlot.vue b/docs/components/content/examples/TableExampleCaptionSlot.vue
new file mode 100644
index 0000000000..ead85e4c39
--- /dev/null
+++ b/docs/components/content/examples/TableExampleCaptionSlot.vue
@@ -0,0 +1,63 @@
+
+
+
+
+
+ Employees of ACME
+
+
+
diff --git a/docs/content/2.components/table.md b/docs/content/2.components/table.md
index f747feff21..630681758c 100644
--- a/docs/content/2.components/table.md
+++ b/docs/content/2.components/table.md
@@ -450,6 +450,19 @@ componentProps:
---
::
+### `caption`
+
+Use the `#caption` slot to customize the table's caption.
+
+::component-example
+---
+padding: false
+component: 'table-example-caption-slot'
+componentProps:
+ class: 'flex-1'
+---
+::
+
## Props
:component-props
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index e85c0ecbc1..08b6eb9b14 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -1,6 +1,11 @@
+
+
+ {{ caption }}
+
+
@@ -183,6 +188,10 @@ export default defineComponent({
type: Object as PropType<{ icon: string, label: string }>,
default: () => config.default.emptyState
},
+ caption: {
+ type: String,
+ default: null
+ },
progress: {
type: Object as PropType<{ color: ProgressColor, animation: ProgressAnimation }>,
default: () => config.default.progress
diff --git a/src/runtime/ui.config/data/table.ts b/src/runtime/ui.config/data/table.ts
index 6bf7f4f062..87f989da55 100644
--- a/src/runtime/ui.config/data/table.ts
+++ b/src/runtime/ui.config/data/table.ts
@@ -4,6 +4,7 @@ export default {
divide: 'divide-y divide-gray-300 dark:divide-gray-700',
thead: 'relative',
tbody: 'divide-y divide-gray-200 dark:divide-gray-800',
+ caption: 'sr-only',
tr: {
base: '',
selected: 'bg-gray-50 dark:bg-gray-800/50',
|