{"id":38050,"date":"2025-08-25T21:22:27","date_gmt":"2025-08-25T19:22:27","guid":{"rendered":"https:\/\/www.dbi-services.com\/blog\/?p=38050"},"modified":"2025-08-26T12:07:57","modified_gmt":"2025-08-26T10:07:57","slug":"how-to-add-column-filtering-to-vuetify-data-table","status":"publish","type":"post","link":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/","title":{"rendered":"How to add Column Filtering to Vuetify Data Table"},"content":{"rendered":"\n<p>For a long time, my v-data-table-server implementation in the <a href=\"https:\/\/yak4all.io\/\">YaK <\/a>only supported global search through a simple text input. While it was good enough for basic queries, I needed something more powerful\u2014the ability to filter by individual columns using custom operators.<\/p>\n\n\n\n<p>Here\u2019s a walkthrough of how I added column filters with v-select and v-text-field embedded in v-menu components right inside the table headers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-problem\">The Problem<\/h2>\n\n\n\n<p>My users wanted to search not just by a global term but with more granularity\u2014for example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Show only items where provider contains \u201caws\u201d<\/li>\n\n\n\n<li>Filter out items with a specific state<\/li>\n\n\n\n<li>View all entries with a name that contains \u201cmaster\u201d<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"468\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/image-34-1024x468.png\" alt=\"\" class=\"wp-image-38053\" srcset=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/image-34-1024x468.png 1024w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/image-34-300x137.png 300w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/image-34-768x351.png 768w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/image-34-1536x702.png 1536w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/image-34.png 1761w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The default Vuetify Data Table doesn\u2019t support per-column filtering out of the box, so I needed to get creative, even if you can override the default filtering used with the\u00a0<strong><a href=\"https:\/\/vuetifyjs.com\/en\/components\/data-tables\/data-and-display\/#custom-filter\">search<\/a><\/strong>\u00a0prop.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-approach\">The Approach<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Attach filter UI elements to each column header<\/code><\/li>\n\n\n\n<li><code>Bind filters to a filters object keyed by column title<\/code><\/li>\n\n\n\n<li><code>Apply the filters to the data using a computed property<\/code><\/li>\n\n\n\n<li><code>Change the icon and icon color on the header to indicate active filters<\/code><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-i-injecting-the-filter-ui-into-headers\">I. Injecting the Filter UI into Headers<\/h2>\n\n\n\n<p>In the v-slot:[header.key], I added a v-menu that displays a filter operator dropdown and a text input:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;template\n  v-for=&quot;header in dataHeaders&quot;\n  v-slot:&#x5B;header.${header.key}]=&quot;{ column }&quot;\n  :key=&quot;header.key&quot;\n&gt;\n  {{ column.title }}\n  &lt;v-menu :close-on-content-click=&quot;false&quot;&gt;\n    &lt;template v-slot:activator=&quot;{ props }&quot;&gt;\n      &lt;v-btn icon v-bind=&quot;props&quot; color=&quot;transparent&quot;&gt;\n        &lt;v-icon v-if=&quot;filters&#x5B;column.title].value&quot;&gt;mdi-filter&lt;\/v-icon&gt;\n        &lt;v-icon v-else&gt;mdi-filter-outline&lt;\/v-icon&gt;\n      &lt;\/v-btn&gt;\n    &lt;\/template&gt;\n    &lt;div class=&quot;filter-menu&quot;&gt;\n      &lt;v-select\n        v-model=&quot;filters&#x5B;column.title].operator&quot;\n        :items=&quot;&#x5B;&#039;=&#039;, &#039;!=&#039;]&quot;\n        label=&quot;Operator&quot;\n        variant=&quot;outlined&quot;\n        density=&quot;compact&quot;\n      &gt;&lt;\/v-select&gt;\n      &lt;v-text-field\n        v-model=&quot;filters&#x5B;column.title].value&quot;\n        label=&quot;Search Term&quot;\n        variant=&quot;outlined&quot;\n        clearable\n        density=&quot;compact&quot;\n      &gt;&lt;\/v-text-field&gt;\n    &lt;\/div&gt;\n  &lt;\/v-menu&gt;\n&lt;\/template&gt;\n<\/pre><\/div>\n\n\n<p>Each filter\u2019s state is stored in a reactive object:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst filters = ref&lt;Record&lt;string, { value: string; operator: string }&gt;&gt;({});\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ii-initializing-filters-for-each-column\">II. Initializing Filters for Each Column<\/h2>\n\n\n\n<p>Once I loaded the table headers, I made sure to initialize the corresponding filters:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\ndataHeaders.value.forEach((header) =&gt; {\n    if (!filters.value&#x5B;header.title]) {\n        filters.value&#x5B;header.title] = { value: &quot;&quot;, operator: &quot;=&quot; };\n     }\n});\n<\/pre><\/div>\n\n\n<p>This ensured every column could be filtered independently and to avoid errors related to empty\/null data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-iii-applying-the-filters-to-the-data\">III. Applying the Filters to the Data<\/h2>\n\n\n\n<p>I used a computed property to transform the data on the fly:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst filteredData = computed(() =&gt; {\n  return recordData.value.filter((item) =&gt; {\n    return Object.entries(filters.value).every((&#x5B;filterKey, filter]) =&gt; {\n      if (!filter.value) return true;\n\n      const matchingKey = Object.keys(item).find((key) =&gt; {\n        const normalizedFilterKey = filterKey.toLowerCase();\n        return key.toLowerCase() === normalizedFilterKey ||\n               key.toLowerCase().endsWith(&quot;name&quot;) &amp;&amp;\n               key.toLowerCase().startsWith(normalizedFilterKey);\n      });\n\n      if (!matchingKey) return true;\n\n      const itemValue = String(item&#x5B;matchingKey] || &quot;&quot;).toLowerCase();\n      const filterValue = filter.value.toLowerCase();\n\n      return filter.operator === &quot;=&quot;\n        ? itemValue.includes(filterValue)\n        : !itemValue.includes(filterValue);\n    });\n  });\n});\n<\/pre><\/div>\n\n\n<p>This filtering happens client-side after the data is fetched.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-iv-adding-ux-details\">IV. Adding UX Details<\/h2>\n\n\n\n<p>A few extra things I did for better UX:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Colored icons: A regular filter icon shows when a filter is active.<\/li>\n\n\n\n<li>Clear filters button (optional): Could be added for each column.<\/li>\n\n\n\n<li>Auto-focus: Focuses on the text field when the menu opens.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;v-data-table-server\n    v-model:items-per-page=&quot;itemsPerPage&quot;\n    :items-per-page-options=&quot;itemsPerPageOptions&quot;\n    :max-height=&quot;&#039;50vh&#039;&quot;\n    fixed-header\n    v-model=&quot;selected&quot;\n    class=&quot;rounded-lg&quot;\n    :headers=&quot;dataHeaders&quot;\n    :items-length=&quot;recordLength&quot;\n    :items=&quot;filteredData&quot;\n    :loading=&quot;data.loading&quot;\n    :search=&quot;search&quot;\n    :select-strategy=&quot;&#039;all&#039;&quot;\n    @update:options=&quot;loadRecord&quot;\n    @click:row=&quot;onRowClick&quot;\n    show-select\n  &gt;\n    &lt;template\n      v-for=&quot;dataKey in dataHeaders&quot;\n      v-slot:&#x5B;`item.${dataKey.key}`]=&quot;{ item }&quot;\n    &gt;\n      &lt;slot\n        v-if=&quot;item&quot;\n        :name=&quot;dataKey.key&quot;\n        :value=&quot;item&#x5B;dataKey.key]&quot;\n        :record=&quot;item&quot;\n        &gt;{{ item&#x5B;dataKey.key] }}&lt;\/slot\n      &gt;\n      &lt;span :key=&quot;`${dataKey.key}-placeholder`&quot; v-else&gt;-&lt;\/span&gt;\n    &lt;\/template&gt;\n\n    &lt;template\n      v-for=&quot;header in dataHeaders&quot;\n      v-slot:&#x5B;`header.${header.key}`]=&quot;{ column }&quot;\n      :key=&quot;header.key&quot;\n    &gt;\n      {{ column.title }}\n      &lt;v-menu :close-on-content-click=&quot;false&quot;&gt;\n        &lt;template v-slot:activator=&quot;{ props }&quot;&gt;\n          {{ filters&#x5B;header] }}\n          &lt;v-btn\n            icon\n            v-bind=&quot;props&quot;\n            color=&quot;rgba(255, 0, 0, 0.0)&quot;\n            style=&quot;box-shadow: none&quot;\n          &gt;\n            &lt;v-icon v-if=&quot;filters&#x5B;column!.title!].value == &#039;&#039; ||filters&#x5B;column!.title!].value == null&quot; color=&quot;white&quot; size=&quot;small&quot;&gt;mdi-filter-outline&lt;\/v-icon&gt;\n            &lt;v-icon v-else color=&quot;orange&quot; size=&quot;small&quot;&gt;mdi-filter&lt;\/v-icon&gt;\n          &lt;\/v-btn&gt;\n        &lt;\/template&gt;\n        &lt;div style=&quot;background-color: white; width: 200px; border-radius: 10px;&quot;&gt;\n          &lt;v-select\n            v-model=&quot;filters&#x5B;column.title!].operator&quot;\n            :items=&quot;&#x5B;&#039;=&#039;, &#039;!=&#039;]&quot;\n            label=&quot;Select operator&quot;\n            class=&quot;pt-4 pl-4 pr-4&quot;\n            variant=&quot;outlined&quot;\n            density=&quot;compact&quot;\n          &gt;&lt;\/v-select&gt;\n          &lt;v-text-field\n            v-model=&quot;filters&#x5B;column.title!].value&quot;\n            class=&quot;pl-4 pr-4&quot;\n            type=&quot;text&quot;\n            label=&quot;Enter the search term&quot;\n            :autofocus=&quot;true&quot;\n            variant=&quot;outlined&quot;\n            clearable\n            density=&quot;compact&quot;\n          &gt;&lt;\/v-text-field&gt;\n        &lt;\/div&gt;\n      &lt;\/v-menu&gt;\n    &lt;\/template&gt;\n  &lt;\/v-data-table-server&gt;\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-s-next\">What\u2019s Next?<\/h2>\n\n\n\n<p>After adding this new feature, the sort indicator next to each column header disappeared\u2014although sorting still works as expected. I haven\u2019t had time to look into it yet, but I\u2019d like to find a solution. If you happen to figure it out, feel free to share it in the comments!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-where-to-find-the-complete-code\">Where to find the complete code ?<\/h2>\n\n\n\n<p>You can check out the complete and latest code in the open-source project on GitLab:<br>\ud83d\udc49 <a class=\"\" href=\"https:\/\/gitlab.com\/yak4all\/yak_frontend\/yak_ui\">https:\/\/gitlab.com\/yak4all\/yak_frontend\/yak_ui<\/a><br>The relevant logic lives in the <code>YakGrid.vue<\/code> component.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2>\n\n\n\n<p>By embedding filter controls directly into column headers and managing state reactively, I was able to turn a basic Vuetify data table into a much more powerful data exploration tool.<\/p>\n\n\n\n<p>Let me know if you try this pattern or come up with improvements\u2014I\u2019m always up for iterating! You can also suggest changes or contribute directly on the GitLab repo of the Yak project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For a long time, my v-data-table-server implementation in the YaK only supported global search through a simple text input. While it was good enough for basic queries, I needed something more powerful\u2014the ability to filter by individual columns using custom operators. Here\u2019s a walkthrough of how I added column filters with v-select and v-text-field embedded [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":40174,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3029,2721],"tags":[3034,3035,3358,2717],"type_dbi":[3039,3038,3359,3037,3239],"class_list":["post-38050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","category-yak","tag-vue","tag-vuejs","tag-vuetify","tag-yak-2","type-vue","type-vuejs","type-vuetify","type-web","type-yak"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to add Column Filtering to Vuetify Data Table - dbi Blog<\/title>\n<meta name=\"description\" content=\"Learn how to add powerful column-based filtering to Vuetify Data Tables using v-select and v-text-field in headers. Step-by-step guide by Joan Frey.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add Column Filtering to Vuetify Data Table\" \/>\n<meta property=\"og:description\" content=\"Learn how to add powerful column-based filtering to Vuetify Data Tables using v-select and v-text-field in headers. Step-by-step guide by Joan Frey.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/\" \/>\n<meta property=\"og:site_name\" content=\"dbi Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-25T19:22:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-26T10:07:57+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/08\/image-29.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joan Frey\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joan Frey\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/\"},\"author\":{\"name\":\"Joan Frey\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\"},\"headline\":\"How to add Column Filtering to Vuetify Data Table\",\"datePublished\":\"2025-08-25T19:22:27+00:00\",\"dateModified\":\"2025-08-26T10:07:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/\"},\"wordCount\":456,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/08\/image-29.png\",\"keywords\":[\"vue\",\"vuejs\",\"vuetify\",\"yak\"],\"articleSection\":[\"Web\",\"YaK\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/\",\"name\":\"How to add Column Filtering to Vuetify Data Table - dbi Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/08\/image-29.png\",\"datePublished\":\"2025-08-25T19:22:27+00:00\",\"dateModified\":\"2025-08-26T10:07:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\"},\"description\":\"Learn how to add powerful column-based filtering to Vuetify Data Tables using v-select and v-text-field in headers. Step-by-step guide by Joan Frey.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#primaryimage\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/08\/image-29.png\",\"contentUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/08\/image-29.png\",\"width\":1536,\"height\":1024,\"caption\":\"How to add Column Filtering to Vuetify Data Table\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.dbi-services.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add Column Filtering to Vuetify Data Table\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/\",\"name\":\"dbi Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\",\"name\":\"Joan Frey\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"caption\":\"Joan Frey\"},\"url\":\"https:\/\/www.dbi-services.com\/blog\/author\/joanfrey\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to add Column Filtering to Vuetify Data Table - dbi Blog","description":"Learn how to add powerful column-based filtering to Vuetify Data Tables using v-select and v-text-field in headers. Step-by-step guide by Joan Frey.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/","og_locale":"en_US","og_type":"article","og_title":"How to add Column Filtering to Vuetify Data Table","og_description":"Learn how to add powerful column-based filtering to Vuetify Data Tables using v-select and v-text-field in headers. Step-by-step guide by Joan Frey.","og_url":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/","og_site_name":"dbi Blog","article_published_time":"2025-08-25T19:22:27+00:00","article_modified_time":"2025-08-26T10:07:57+00:00","og_image":[{"width":1536,"height":1024,"url":"http:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/08\/image-29.png","type":"image\/png"}],"author":"Joan Frey","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Joan Frey","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#article","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/"},"author":{"name":"Joan Frey","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06"},"headline":"How to add Column Filtering to Vuetify Data Table","datePublished":"2025-08-25T19:22:27+00:00","dateModified":"2025-08-26T10:07:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/"},"wordCount":456,"commentCount":0,"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/08\/image-29.png","keywords":["vue","vuejs","vuetify","yak"],"articleSection":["Web","YaK"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/","url":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/","name":"How to add Column Filtering to Vuetify Data Table - dbi Blog","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#primaryimage"},"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/08\/image-29.png","datePublished":"2025-08-25T19:22:27+00:00","dateModified":"2025-08-26T10:07:57+00:00","author":{"@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06"},"description":"Learn how to add powerful column-based filtering to Vuetify Data Tables using v-select and v-text-field in headers. Step-by-step guide by Joan Frey.","breadcrumb":{"@id":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#primaryimage","url":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/08\/image-29.png","contentUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/08\/image-29.png","width":1536,"height":1024,"caption":"How to add Column Filtering to Vuetify Data Table"},{"@type":"BreadcrumbList","@id":"https:\/\/www.dbi-services.com\/blog\/how-to-add-column-filtering-to-vuetify-data-table\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.dbi-services.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add Column Filtering to Vuetify Data Table"}]},{"@type":"WebSite","@id":"https:\/\/www.dbi-services.com\/blog\/#website","url":"https:\/\/www.dbi-services.com\/blog\/","name":"dbi Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06","name":"Joan Frey","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","caption":"Joan Frey"},"url":"https:\/\/www.dbi-services.com\/blog\/author\/joanfrey\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/38050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/comments?post=38050"}],"version-history":[{"count":17,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/38050\/revisions"}],"predecessor-version":[{"id":38068,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/38050\/revisions\/38068"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/media\/40174"}],"wp:attachment":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/media?parent=38050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/categories?post=38050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/tags?post=38050"},{"taxonomy":"type","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/type_dbi?post=38050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}