Skip to content

Commit

Permalink
docs(VDataTable): update filtering section
Browse files Browse the repository at this point in the history
resolves #20052
  • Loading branch information
MajesticPotatoe committed Nov 4, 2024
1 parent 24b12d9 commit 3b1f0f5
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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" />

Expand Down

0 comments on commit 3b1f0f5

Please sign in to comment.