diff --git a/docs/components/content/examples/TableExampleExpandable.vue b/docs/components/content/examples/TableExampleExpandable.vue
new file mode 100644
index 0000000000..52337e4697
--- /dev/null
+++ b/docs/components/content/examples/TableExampleExpandable.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index 09aefb8b9d..da92b3ddf1 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -281,6 +281,20 @@ componentProps:
---
::
+### Expandable
+
+You can use the `expand` slot to display extra information about a row. You will have access to the `row` property in the slot scope.
+
+::component-example{class="grid"}
+---
+padding: false
+component: 'table-example-expandable'
+componentProps:
+ class: 'flex-1'
+---
+::
+
+
### Loading
Use the `loading` prop to display a loading state.
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 2daff923a2..000189a7c4 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -7,6 +7,10 @@
+
+ Expand
+ |
+
- onSelect(row)">
-
-
- |
-
-
-
- {{ getRowData(row, column.key) }}
-
- |
-
+
+ onSelect(row)">
+
+
+ |
+
+
+
+ |
+
+
+
+ {{ getRowData(row, column.key) }}
+
+ |
+
+
+
+
+ |
+
+
@@ -177,8 +206,12 @@ export default defineComponent({
const sort = useVModel(props, 'sort', emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: 'asc' }) })
+ const openedRows = ref([])
+
+ const defaultSort = { column: sort.value.column, direction: null }
const savedSort = { column: sort.value.column, direction: null }
+
const rows = computed(() => {
if (!sort.value?.column || props.sortMode === 'manual') {
return props.rows
@@ -280,6 +313,14 @@ export default defineComponent({
return get(row, rowKey, defaultValue)
}
+ function toggleOpened (index: number) {
+ if (openedRows.value.includes(index)) {
+ openedRows.value = openedRows.value.filter((i) => i !== index)
+ } else {
+ openedRows.value.push(index)
+ }
+ }
+
return {
// eslint-disable-next-line vue/no-dupe-keys
ui,
@@ -296,11 +337,13 @@ export default defineComponent({
emptyState,
// eslint-disable-next-line vue/no-dupe-keys
loadingState,
+ openedRows,
isSelected,
onSort,
onSelect,
onChange,
- getRowData
+ getRowData,
+ toggleOpened
}
}
})
|