diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md index b7ea61bf7d..adf5a93996 100644 --- a/docs/content/4.data/1.table.md +++ b/docs/content/4.data/1.table.md @@ -327,9 +327,7 @@ const selected = ref([people[1]]) You can use the `by` prop to compare objects by a field instead of comparing object instances. We've replicated the behavior of Headless UI [Combobox](https://headlessui.com/vue/combobox#binding-objects-as-values). :: -### Clickable - -Add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument. +You can alsso add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument. You can use this to navigate to a page, open a modal or even to select the row manually. diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue index 7acb1581c1..9750c2dfe1 100644 --- a/src/runtime/components/data/Table.vue +++ b/src/runtime/components/data/Table.vue @@ -4,7 +4,7 @@ - + @@ -210,6 +210,25 @@ export default defineComponent({ attrs.onSelect(row) } + function selectAllRows () { + props.rows.forEach((row) => { + // If the row is already selected, don't select it again + if (selected.value.some((item) => compare(toRaw(item), toRaw(row)))) { + return + } + + onSelect(row) + }) + } + + function onChange (event: any) { + if (event.target.checked) { + selectAllRows() + } else { + selected.value = [] + } + } + return { // eslint-disable-next-line vue/no-dupe-keys ui, @@ -225,7 +244,8 @@ export default defineComponent({ emptyState, isSelected, onSort, - onSelect + onSelect, + onChange } } })