From 31be8f31f173a7bc23e69b842d9bb0fdb1776826 Mon Sep 17 00:00:00 2001 From: MajesticPotatoe Date: Wed, 22 May 2024 22:28:11 -0400 Subject: [PATCH] docs: add data-table-select example --- .../slot-item-data-table-select.vue | 200 ++++++++++++++++++ .../data-tables/data-and-display.md | 6 + 2 files changed, 206 insertions(+) create mode 100644 packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue diff --git a/packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue b/packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue new file mode 100644 index 000000000000..dcbf5df150e4 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue @@ -0,0 +1,200 @@ + + + + + diff --git a/packages/docs/src/pages/en/components/data-tables/data-and-display.md b/packages/docs/src/pages/en/components/data-tables/data-and-display.md index b76e817ea9ed..4f024946ad15 100644 --- a/packages/docs/src/pages/en/components/data-tables/data-and-display.md +++ b/packages/docs/src/pages/en/components/data-tables/data-and-display.md @@ -80,6 +80,12 @@ Use the **item-selectable** prop to designate a property on your items that cont +### Custom select column + +Use the **item.data-table-select** slot alongside `v-checkbox-btn` to customize the checkbox used for row selection. You can also use the **header.data-table-select** slot to customize the select-all checkbox in the header of the column. + + + ### Select strategies Data-tables support three different select strategies.