<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Bruno Panassi</title>
    <description>The latest articles on DEV Community by Bruno Panassi (@brunopanassi).</description>
    <link>https://dev.to/brunopanassi</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F618152%2Fb457a694-0cac-480e-8d5c-480434596ba2.jpg</url>
      <title>DEV Community: Bruno Panassi</title>
      <link>https://dev.to/brunopanassi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/brunopanassi"/>
    <language>en</language>
    <item>
      <title>TIL: @MappedSuperclass vs. @Inheritance (JPA)</title>
      <dc:creator>Bruno Panassi</dc:creator>
      <pubDate>Sun, 18 Dec 2022 00:38:30 +0000</pubDate>
      <link>https://dev.to/brunopanassi/til-mappedsuperclass-vs-inheritance-jpa-5hnl</link>
      <guid>https://dev.to/brunopanassi/til-mappedsuperclass-vs-inheritance-jpa-5hnl</guid>
      <description>&lt;p&gt;Today i needed to learn the difference between &lt;em&gt;MappedSuperclass&lt;/em&gt; and &lt;em&gt;Inheritance&lt;/em&gt; especially for use in my personal project.&lt;/p&gt;

&lt;h2&gt;
  
  
  What do i needed in my project
&lt;/h2&gt;

&lt;p&gt;There was two tables, &lt;em&gt;Person&lt;/em&gt; and &lt;em&gt;Role&lt;/em&gt;. The &lt;em&gt;Person&lt;/em&gt; table it's a super table, so there was more tables that inherits properties and methods from it, does not have the need for a table &lt;em&gt;Person&lt;/em&gt; in the database, so Person does not use the &lt;em&gt;Entity&lt;/em&gt; annotation.&lt;/p&gt;

&lt;p&gt;But, i need to use the &lt;em&gt;OneToMany&lt;/em&gt; and &lt;em&gt;ManyToOne&lt;/em&gt; annotation between Person and Role tables, but how Person does not use &lt;em&gt;Entity&lt;/em&gt;, the &lt;em&gt;OneToMany&lt;/em&gt; annotation was not possible in Role (Yes, i also learned this).&lt;/p&gt;

&lt;h2&gt;
  
  
  So, the difference between the annotations and my use for each it.
&lt;/h2&gt;

&lt;p&gt;I searched in the &lt;em&gt;StackOverflow&lt;/em&gt; and haved founded these links:&lt;br&gt;
&lt;a href="https://stackoverflow.com/questions/9667703/jpa-implementing-model-hierarchy-mappedsuperclass-vs-inheritance"&gt;JPA: Implementing Model Hierarchy - @MappedSuperclass vs. @Inheritance&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://stackoverflow.com/questions/4769546/mappedsuperclass-and-onetomany"&gt;@MappedSuperclass and @OneToMany&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What do i have learned from that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;MappedSuperclass&lt;/strong&gt;: Will only be used to inherits props and methods and will not create a table in the database for it.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Inheritance&lt;/strong&gt;: With the use of the prop (&lt;em&gt;strategy = InheritanceType.TABLE_PER_CLASS&lt;/em&gt;) and the &lt;em&gt;Entity&lt;/em&gt; annotation, will inherits the props and methods, and also, create a table for it in the database.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;if there is some misunderstood in my text, let me know so i can change it.&lt;/p&gt;

&lt;p&gt;Thanks for reading and i hope i helped.&lt;/p&gt;

</description>
      <category>java</category>
      <category>jpa</category>
      <category>spring</category>
      <category>database</category>
    </item>
    <item>
      <title>OMG, this was not supposed to be merged, how do i revert?</title>
      <dc:creator>Bruno Panassi</dc:creator>
      <pubDate>Tue, 12 Apr 2022 17:01:00 +0000</pubDate>
      <link>https://dev.to/brunopanassi/omg-this-was-not-supposed-to-be-merged-how-do-i-revert-1102</link>
      <guid>https://dev.to/brunopanassi/omg-this-was-not-supposed-to-be-merged-how-do-i-revert-1102</guid>
      <description>&lt;p&gt;Have you merged that branch from that PR that not supposed to be merged? Well, i already once, and i want to show how i got out of it.&lt;/p&gt;

&lt;h2&gt;
  
  
  What really happened?
&lt;/h2&gt;

&lt;p&gt;On the project that this happened, there was two branches, that we will call here as &lt;strong&gt;main&lt;/strong&gt; and &lt;strong&gt;parallel&lt;/strong&gt;. Only changes from &lt;strong&gt;main&lt;/strong&gt; can merge to &lt;strong&gt;parallel&lt;/strong&gt;, and not the other way around. But, on that day, i have merged changes from &lt;strong&gt;parallel&lt;/strong&gt; to &lt;strong&gt;main&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What do next?
&lt;/h2&gt;

&lt;p&gt;So on the &lt;strong&gt;main&lt;/strong&gt; branch, it had a last commit, that looks like:&lt;br&gt;
&lt;code&gt;8f937c683929b08379097828c8a04350b9b8e183&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;So i search &lt;em&gt;"Git merge commit revert"&lt;/em&gt; and with all the things that i read, and the commit id that i got it, i had executed the bellow command:&lt;br&gt;
&lt;code&gt;git revert &amp;lt;commit_id&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;And an error message was shown:&lt;br&gt;
&lt;code&gt;git revert &amp;lt;commit_id&amp;gt; alone won't work. -m must be specified&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What is this '-m must be specified'?
&lt;/h2&gt;

&lt;p&gt;So i searched deeper, and i found out this link on &lt;strong&gt;StackOverflow&lt;/strong&gt;, that helped me a lot:&lt;br&gt;
&lt;a href="https://stackoverflow.com/questions/7099833/how-to-revert-a-merge-commit-thats-already-pushed-to-remote-branch"&gt;How to revert a merge commi thats already pushed to remote branch&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;if you run &lt;em&gt;git log&lt;/em&gt; you will see the parents of the merge commit on the &lt;em&gt;Merge&lt;/em&gt; prop, like this:&lt;br&gt;
&lt;code&gt;commit 8f937c683929b08379097828c8a04350b9b8e183&lt;br&gt;
Merge: 8989ee0 7c6b236&lt;br&gt;
Author: Ben James &amp;lt;ben@example.com&amp;gt;&lt;br&gt;
Date:   Wed Aug 17 22:49:41 2011 +0100&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;When you run:&lt;br&gt;
&lt;code&gt;git revert &amp;lt;commit_id&amp;gt; -m 1&lt;/code&gt;&lt;br&gt;
You are saying that you want to come back like it was on &lt;em&gt;8989ee0&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;And if you run:&lt;br&gt;
&lt;code&gt;git revert &amp;lt;commit_id&amp;gt; -m 2&lt;/code&gt;&lt;br&gt;
You want to come back on &lt;em&gt;7c6b236&lt;/em&gt; tree.&lt;/p&gt;

&lt;p&gt;Thanks for the reading, and i hope that this can help you like it helped me.&lt;/p&gt;

</description>
      <category>git</category>
    </item>
    <item>
      <title>Using an Array of strings in a query with Oracle PL/SQL</title>
      <dc:creator>Bruno Panassi</dc:creator>
      <pubDate>Wed, 23 Mar 2022 00:35:37 +0000</pubDate>
      <link>https://dev.to/brunopanassi/using-an-array-of-strings-in-a-query-with-oracle-plsql-575i</link>
      <guid>https://dev.to/brunopanassi/using-an-array-of-strings-in-a-query-with-oracle-plsql-575i</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffp4g22f6sh1w0w51inai.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffp4g22f6sh1w0w51inai.jpg" alt="oracle-database"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Oracle Function
&lt;/h2&gt;

&lt;p&gt;In this case we will use a function created in Oracle PL/SQL that receives a string value and return as an array to your query:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

CREATE OR REPLACE FUNCTION string_to_list (stringParameter IN VARCHAR2,separator IN VARCHAR2 DEFAULT ',')
   RETURN ARRAY_TABLE
AS
   stringValue      LONG DEFAULT stringParameter || separator;
   dataToReturn     ARRAY_TABLE := ARRAY_TABLE ();
   n                NUMBER;
BEGIN
   LOOP
      EXIT WHEN stringValue IS NULL;
      n                                 := INSTR (stringValue, separator);
      dataToReturn.EXTEND;
      dataToReturn (dataToReturn.COUNT) := LTRIM (RTRIM (SUBSTR (stringValue, 1, n - 1)));
      stringValue                       := SUBSTR (stringValue, n + 1);
   EN


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;You can see that the return is a type of &lt;em&gt;ARRAY TABLE&lt;/em&gt;, this type can be created in this way:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

CREATE TYPE "ARRAY_TABLE" as table
     of varchar2 (4210)


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;So with this &lt;em&gt;type&lt;/em&gt; and &lt;em&gt;function&lt;/em&gt; created, you can use your query like this:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

SELECT * FROM TABLE_TO_SEARCH
WHERE (upper(column_to_search) in (SELECT * FROM TABLE(IN_LIST(upper(:stringParameter)))))


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Where the &lt;em&gt;stringParameter&lt;/em&gt; it's a value like: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;"Value 1, Value 2, Value 3". &lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;The &lt;em&gt;stringParameter&lt;/em&gt; is written with ":" because in this case i used the &lt;em&gt;Dbeaver&lt;/em&gt; tool.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Sorry for the Queries shown above for not being indented and with the usual colors.&lt;br&gt;
I hope that this can help you like it helped me.&lt;/p&gt;

&lt;p&gt;Thanks for reading.&lt;/p&gt;

</description>
      <category>sql</category>
      <category>plsql</category>
      <category>java</category>
      <category>springboot</category>
    </item>
    <item>
      <title>Search submenu tabs with flatMap and Vuetify</title>
      <dc:creator>Bruno Panassi</dc:creator>
      <pubDate>Mon, 07 Mar 2022 16:21:29 +0000</pubDate>
      <link>https://dev.to/brunopanassi/search-on-v-tabs-submenu-vuetify-5ehp</link>
      <guid>https://dev.to/brunopanassi/search-on-v-tabs-submenu-vuetify-5ehp</guid>
      <description>&lt;p&gt;On these days on work i had to add a search in a menu that has v-tabs on it, and when i finished, there was two approaches on how to do this. Of course that the changes in the system was more complex than in this example, but i hope that this can help someone.&lt;/p&gt;

&lt;h2&gt;
  
  
  Before we dive into
&lt;/h2&gt;

&lt;p&gt;The first approach was more simple (at least for me), that uses only &lt;em&gt;map&lt;/em&gt; and &lt;em&gt;filter&lt;/em&gt;.The second approach was made by a work colleague that uses a &lt;em&gt;v-autocomplete&lt;/em&gt; and &lt;em&gt;flatMap&lt;/em&gt;(that i had never heard before).&lt;/p&gt;

&lt;h2&gt;
  
  
  Structure
&lt;/h2&gt;

&lt;p&gt;So we have here a menu that have a sub menu, so you can imagine him like this:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu06pice8e6j9hna8pf86.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu06pice8e6j9hna8pf86.png" alt="menu-structure"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Yes, a computed property that is an &lt;em&gt;Array&lt;/em&gt; of a &lt;em&gt;Object&lt;/em&gt; that has two props:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;name&lt;/strong&gt;: Title of the menu (String)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;sub&lt;/strong&gt;: Content of the sub-menu (Array of strings)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And this will be the data for the &lt;em&gt;v-tabs&lt;/em&gt; that have a &lt;em&gt;v-menu&lt;/em&gt; on each tab. I will focus here only in the &lt;em&gt;JS&lt;/em&gt; code, but you can check the &lt;em&gt;HTML&lt;/em&gt; in this link of &lt;a href="https://codepen.io/BrunoPanassi/pen/OJOLBmd" rel="noopener noreferrer"&gt;CodePen&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1º Approach
&lt;/h2&gt;

&lt;p&gt;So the first approach will be a &lt;em&gt;map&lt;/em&gt; on the computed &lt;em&gt;tabs&lt;/em&gt; itself, that returns only the &lt;em&gt;sub&lt;/em&gt; names that includes the letters of the variable search(used by a &lt;em&gt;v-text-field&lt;/em&gt;), and then returns only the tabs that have the &lt;em&gt;subs&lt;/em&gt;:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvzpnm5ueeozzay8gnyl6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvzpnm5ueeozzay8gnyl6.png" alt="first-approach"&gt;&lt;/a&gt;&lt;br&gt;
The reason i thought this is the simplest way its for the familiar methods (filter and map) but this approach its not the clever or cleaner one.&lt;/p&gt;

&lt;h2&gt;
  
  
  2º Approach
&lt;/h2&gt;

&lt;p&gt;This approach uses the flatMap, that &lt;em&gt;maps&lt;/em&gt; a nested array to a single array (simplifying the explanation), wich in this case it's the better option because we need only the values of the &lt;em&gt;sub&lt;/em&gt; property. And then filter only the values that matchs with the &lt;em&gt;search&lt;/em&gt; variable.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnofqtssf01kmxej7q9a5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnofqtssf01kmxej7q9a5.png" alt="second_approach"&gt;&lt;/a&gt;&lt;br&gt;
In this example this computed property it's been used in a &lt;em&gt;v-auto-complete&lt;/em&gt; component.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;So for me the 2º approach was the cleaner one, both for code and screen design, and you can combine the search of the menu with a &lt;em&gt;$emit&lt;/em&gt; method to show the screen of the selected menu.&lt;/p&gt;

&lt;p&gt;Thanks for reading, i hope that this was useful for you!&lt;/p&gt;

</description>
      <category>vue</category>
      <category>vuetify</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Multi Filter Column in Vuetify Data Table</title>
      <dc:creator>Bruno Panassi</dc:creator>
      <pubDate>Sat, 24 Apr 2021 16:43:46 +0000</pubDate>
      <link>https://dev.to/brunopanassi/multi-filter-column-in-vuetify-data-table-2jbm</link>
      <guid>https://dev.to/brunopanassi/multi-filter-column-in-vuetify-data-table-2jbm</guid>
      <description>&lt;p&gt;I know that there is a solution for this if you see the documentation for custom filter in data table, but i tried and for some reason it didn’t work. So i search for other solution and i find many other ways, but the only one that allowed multi filter column independent of the filtering order, was the one that i will show here.&lt;/p&gt;

&lt;p&gt;So, i will take the common v-data-table used in the Vuetify documentation:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fba1jpkiyrantopdk9syg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fba1jpkiyrantopdk9syg.png" alt="Vuetify Data Table"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The first thing to do is use a slot for the header of the column name, that we will add a icon to activate a menu, that will have a v-text-field to filter the data and a button to clean the input.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Facoyffyezr4154hlxl8j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Facoyffyezr4154hlxl8j.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And we will have this:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnab70n4cn75qwnze51d4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnab70n4cn75qwnze51d4.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we gonna need a variable, that we will called it dessertName to filter the data. To this we add it to the property v-model of the v-text-field in the menu of the column template, and add a click event on the v-btn to clean the input data.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9by1lmnd769mvit5xhfp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9by1lmnd769mvit5xhfp.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A method is needed to filter the data when dessertName is filled, so we call it filterDessertName, and pass a argument called item to access the property name of the desserts array.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9nm5fm2zve4d1kej6rsr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9nm5fm2zve4d1kej6rsr.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But, to the method work and return the data filtered, we need to create a computed property and call it in the prop items of the v-data-table.&lt;/p&gt;

&lt;p&gt;In the computed property filteredDesserts we create the array conditions, and check every time that the variable dessertName is filled, if so, we add the method filterDessertName to the conditions, and then, we return the desserts array filtering every condition that have in the conditions array:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9z6jmr9dsoruzpay97lx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9z6jmr9dsoruzpay97lx.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And the v-data-table will be like this:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5q85bh3mttx1knhbntiv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5q85bh3mttx1knhbntiv.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And the column name filtered will be like:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpl0s9s2ebrdxwxw7vbvn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpl0s9s2ebrdxwxw7vbvn.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ok, for now, he have a column that allow you to filter the data in it, but this is not a multi filtering, so we gonna do the same for the columns Calories and Fat, and add more data to the dessert array. The data will be Eclair Dark and Eclair Light with new values, to test the multi filtering in the right way.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz6nwu4su6eh9lf5th8bz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz6nwu4su6eh9lf5th8bz.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The methods:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftg3dd9s773p0l88lcqup.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftg3dd9s773p0l88lcqup.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The computed property filteredDesserts:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgktr37yk2fg60x2db5y1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgktr37yk2fg60x2db5y1.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And the v-data-table header templates for Calories and Fat. To have a better vision of which column is filtered, a small function is added in the color property of every v-icon:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo5ca4np0mlmubo80yztf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo5ca4np0mlmubo80yztf.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And if we filter the column name with the text ec, the column calories with the value 2, and the column fat with the value 16, independent of the order that you put the values, we will see this row:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdha565k4cjcasirowz1q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdha565k4cjcasirowz1q.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can see the code and test the orders of the filter in this CodePen: &lt;br&gt;
&lt;a href="https://codepen.io/BrunoPanassi/pen/dyNQZQP" rel="noopener noreferrer"&gt;https://codepen.io/BrunoPanassi/pen/dyNQZQP&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Shure, you can make better the computed property filteredDesserts by decreasing the if statements and joining the filter variables and filter methods in one Object, but the purpose of this article, is only to show another way to do the multi filtering in the data table, other than by the documentation.&lt;/p&gt;

&lt;p&gt;So if you know a better way to do this or have something to say, fell free to comment!&lt;/p&gt;

&lt;p&gt;Thanks for reading!&lt;/p&gt;

</description>
      <category>vue</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
