Add column based filtering in v-data-table

Viewed 32

I am surprised its not built into vuetify v-data-table but I am adding filtering based on each column similar to excel. I am hung up though on how to filter the original dataset based on each array I generate in the select boxes. My template code is as follows:

                                <v-navigation-drawer v-model="filterDrawer"
                                                 fixed
                                                 temporary
                                                 right
                                                 :width="600">
                                <v-container>
                                    <div class="ma-10">
                                        <h2 class="ma-10 text-center text-h5">
                                            Filters
                                            <v-icon color="primary">
                                                mdi-filter
                                            </v-icon>
                                        </h2>
                                        <v-form ref="filterForm"
                                                lazy-validation>
                                            @Html.AntiForgeryToken()
                                            <v-select v-for="(header, index) in headersToDoList" filled rounded :label="header.text" :key="index"
                                                      :items="getUniqueArray(toDoListResults, header.value)"
                                                      v-model="filterVModelArr[index]"
                                                      return-object
                                                      @@change="applyFilter(header.value,filterVModelArr[index])"
                                                      multiple
                                                      required></v-select>
                                        </v-form>
                                    </div>
                                </v-container>
                            </v-navigation-drawer>
                            <v-card-title>
                                <v-col cols="12" md="4">
                                    <v-btn class="mx-2"
                                           fab
                                           small
                                           dark
                                           color="primary"
                                           @@click.stop="filterDrawer = !filterDrawer">
                                        <v-icon dark>
                                            mdi-filter
                                        </v-icon>
                                    </v-btn>
                                </v-col>
                                <v-col cols="12" md="4"></v-col>
                                <v-col cols="12" md="4">
                                    <v-text-field v-model="searchToDoList"
                                                  append-icon="mdi-magnify"
                                                  label="Search"
                                                  single-line
                                                  hide-details></v-text-field>
                                </v-col>
                            </v-card-title>
                            <v-data-table :headers="headersToDoList"
                                          :items="toDoListResults"
                                          :search="searchToDoList"
                                          height="inherit"
                                          >
                            </v-data-table>

This generates a bunch of select boxes in a navigation drawer. I generate a unique list of values for each select box using the following:

                getUniqueArray(arr, property) {
                return [...new Set(arr.map(item => item[property]))];
            }

My issue is the applyFilter function I am struggling to think how this logic should work. Basically the v-model of the original dataset should be filtered on each change in the select box filtering on that. Then all future select box options should be reduced since their dependent on the current dataset being displayed. I just need to apply the filtering from an array of values ['text1','text',...etc] to the items array of the v-data-table using the header in the appliedFilter parameter. This approach might also be a bad way of doing this so I am open to anything as long as its imitating excels filter functionality.

0 Answers
Related