diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md
index b43074b4..933dbccb 100644
--- a/apps/www/src/content/docs/components/data-table.md
+++ b/apps/www/src/content/docs/components/data-table.md
@@ -1368,3 +1368,41 @@ const columns = computed(() => props.table.getAllColumns()
```vue
```
+
+### Expanding
+
+Let's add the display of arbitrary content in expandable rows
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Now we are not bound to columns content, we can render any component with any content
+
+```vue
+
+
+
+
+
+```
diff --git a/apps/www/src/examples/tasks/Example.vue b/apps/www/src/examples/tasks/Example.vue
index cd8257c5..869b2c5b 100644
--- a/apps/www/src/examples/tasks/Example.vue
+++ b/apps/www/src/examples/tasks/Example.vue
@@ -1,8 +1,17 @@
@@ -31,6 +40,6 @@ import { columns } from './components/columns'
-
+
diff --git a/apps/www/src/examples/tasks/components/DataTable.vue b/apps/www/src/examples/tasks/components/DataTable.vue
index 4730b371..21d81f47 100644
--- a/apps/www/src/examples/tasks/components/DataTable.vue
+++ b/apps/www/src/examples/tasks/components/DataTable.vue
@@ -1,7 +1,9 @@
-
@@ -74,7 +89,7 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
diff --git a/apps/www/src/examples/tasks/components/DataTablePagination.vue b/apps/www/src/examples/tasks/components/DataTablePagination.vue
index acd18544..8d42f1ff 100644
--- a/apps/www/src/examples/tasks/components/DataTablePagination.vue
+++ b/apps/www/src/examples/tasks/components/DataTablePagination.vue
@@ -1,6 +1,5 @@
-
diff --git a/apps/www/src/examples/tasks/components/DataTableRowActions.vue b/apps/www/src/examples/tasks/components/DataTableRowActions.vue
index d3a23541..1150577c 100644
--- a/apps/www/src/examples/tasks/components/DataTableRowActions.vue
+++ b/apps/www/src/examples/tasks/components/DataTableRowActions.vue
@@ -24,8 +24,13 @@ import {
interface DataTableRowActionsProps {
row: Row
}
+
const props = defineProps()
+defineEmits<{
+ (e: 'expand'): void
+}>()
+
const task = computed(() => taskSchema.parse(props.row.original))
@@ -56,6 +61,9 @@ const task = computed(() => taskSchema.parse(props.row.original))
+
+ Expand
+
Delete
⌘⌫
diff --git a/apps/www/src/examples/tasks/components/DataTableToolbar.vue b/apps/www/src/examples/tasks/components/DataTableToolbar.vue
index 9887e815..71d204c3 100644
--- a/apps/www/src/examples/tasks/components/DataTableToolbar.vue
+++ b/apps/www/src/examples/tasks/components/DataTableToolbar.vue
@@ -1,8 +1,6 @@
-
+
+
+
+
+
+
+ {{ firstName.slice(0, 1) }}
+
+
{{ `${firstName} ${lastName}` }}
+
+
+
+ #{{ id }}
+
+
+
diff --git a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
index 84a42f26..205a72f6 100644
--- a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
+++ b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
@@ -1,7 +1,6 @@
-