From 3b1f0f5ca3d724247d45a7264416f03099918166 Mon Sep 17 00:00:00 2001
From: MajesticPotatoe <amajesticpotatoe@gmail.com>
Date: Mon, 4 Nov 2024 18:17:25 -0500
Subject: [PATCH] docs(VDataTable): update filtering section

resolves #20052
---
 .../{prop-filterable.vue => prop-filter-keys.vue}         | 6 +++++-
 .../pages/en/components/data-tables/data-and-display.md   | 8 ++++----
 2 files changed, 9 insertions(+), 5 deletions(-)
 rename packages/docs/src/examples/v-data-table/{prop-filterable.vue => prop-filter-keys.vue} (96%)

diff --git a/packages/docs/src/examples/v-data-table/prop-filterable.vue b/packages/docs/src/examples/v-data-table/prop-filter-keys.vue
similarity index 96%
rename from packages/docs/src/examples/v-data-table/prop-filterable.vue
rename to packages/docs/src/examples/v-data-table/prop-filter-keys.vue
index 8024b1182f2..de1454523fc 100644
--- a/packages/docs/src/examples/v-data-table/prop-filterable.vue
+++ b/packages/docs/src/examples/v-data-table/prop-filter-keys.vue
@@ -19,7 +19,11 @@
     </v-card-title>
 
     <v-divider></v-divider>
-    <v-data-table v-model:search="search" :items="items">
+    <v-data-table
+      v-model:search="search"
+      :filter-keys="['name']"
+      :items="items"
+    >
       <template v-slot:header.stock>
         <div class="text-end">Stock</div>
       </template>
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 b0226fe94a4..968334fca1f 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
@@ -26,11 +26,11 @@ The data table exposes a **search** prop that allows you to filter your data.
 
 <ExamplesExample file="v-data-table/prop-search" />
 
-### Filterable
+### Filter Keys
 
-You can easily disable specific columns from being included when searching through table rows by setting the property **filterable** to false on the header item(s). In the example below the dessert name column is no longer searchable.
+You can easily select only the column you want to filter on by using the **filter-keys** prop. This prop accepts an array of keys from the table items that will be used for filtering. You may also choose to disable columns from filtering by setting the **filter** property to `false` on the header item(s). In the example below the we only filter on the `name` column.
 
-<ExamplesExample file="v-data-table/prop-filterable" />
+<ExamplesExample file="v-data-table/prop-filter-keys" />
 
 ### Custom filter
 
@@ -40,7 +40,7 @@ You can override the default filtering used with the **search** prop by supplyin
 (value: string, query: string, item?: any) => boolean | number | [number, number] | [number, number][]
 ```
 
-In the example below, the custom filter will only match inputs that are in completely in upper case.
+Additionally, you may apply customize the filtering on a per column basis by setting custom function to the **filter** property on the header item(s). In the example below, the custom filter will only match inputs that are in completely in upper case.
 
 <ExamplesExample file="v-data-table/prop-custom-filter" />