Building Simple CRM with Vue: Mastering Data Visualization with Vuetify Dynamic Table Components

Check this post in my web notes!

After laying the foundation with our previous tasks, we're now ready to delve into the core pages of our Simple CRM app – specifically, the "Users" and "Products" pages. Unlocking the potential of these main pages, we'll harness the power of Vuetify's dynamic table components to master the art of data visualization. Vuetify's tables boast an array of built-in functionalities, including seamless sorting, expanding, and selection capabilities. In this comprehensive guide, our focus narrows down to utilizing these tables for effective data visualization on the "Users" page. Join us in this journey as we explore the versatility of Vuetify tables, enabling us to present and interact with data effortlessly. But before we dive into the practical aspects, let's outline a succinct plan for our upcoming tasks.

1. Crafting an Effective Users Table with Vuetify Components

2. Implementing Enhanced Data Visualization: Configuring Vuetify's Expanded Table Feature

3. Streamlining Data Retrieval: Leveraging Firebase to Fetch Users from Firestore Database

Now that we've outlined our plan, it's time to roll up our sleeves and dive into the practical implementation. In the upcoming sections, we'll craft a dynamic users table with Vuetify components, configure advanced features like table expansion, and seamlessly integrate Firebase to retrieve users' data from our Firestore database. Let's embark on this journey to enhance data visualization and functionality in our Vue CRM application.

1. Crafting an Effective Users Table with Vuetify Components

As was mentioned one of the best things in Vuetify is tables. I'm offering to you to create a table on the users page, that will show a list of users and will be able to sort that list. Sounds like a few hours of work but with Vuetify only a few copy-paste actions.

We need to visit the "Data and Display" section in Vuetify and move to the basic-sort table. As usual, we will copy the code and paste it into our UsersList.vue file which we will import into the users page.

<template>
  <v-data-table
    v-model:sort-by="sortBy"
    :headers="headers"
    :items="desserts"
  ></v-data-table>
  <pre>{{ sortBy }}</pre>
</template>

You will not believe but that's it, we have our table. You will also need to import the script with default data but it is not necessary.

2. Implementing Enhanced Data Visualization: Configuring Vuetify's Expanded Table Feature

That would be cool if we could show additional information in the expended table row, so let's do it.

We need to set inside the data-table new slot template "expanded-row" which will store our expended component and render it in case the row was expended.

<template v-slot:expanded-row="{ item }">
      <td :colspan="headers.length">
        <UserTableExpanded :user="item" />
      </td>
</template>

We send to our UserTableExpended component user data, and inside that component, we will show all detailed data like avatar, and user role...

Now we will start our app and check the table, but it is still empty. Okay, we need to move to the last part of the article where we will receive the user's list from Firestore and show it in the table.

3. Streamlining Data Retrieval: Leveraging Firebase to Fetch Users from Firestore Database

For this case, we will create a new store inside the stores folder and call it users. Inside that store, we need to set the usersList state and new action aGetUsers which will use docs to fetch data from the "users" collection. And last we will add gUsersList as a getter to have access to our state.

import { defineStore } from 'pinia';
import { firestore } from '../firebase/firebase';
import { getDocs, collection } from "firebase/firestore";

export const useUsersStore = defineStore({
    id: 'users',
    state: () => ({
        usersList: []
    }),
    actions: {
        async aGetUsers() {
            try {
                this.usersList = [];
                const querySnapshot = await getDocs(collection(firestore, "users"));
                querySnapshot.forEach((doc) => {
                    const element = doc.data();
                    this.usersList.push(element);
                });
            } catch (error) {
                const errorCode = error.code;
                const errorMessage = error.message;
                console.log(errorCode,errorMessage);
            }
        }
    },
    getters: {
        gUsersList: (state) => state.usersList,
    }
});

Now, inside the main users component, we will import our user's store and in the created lifecycle hook call our getUsers action and do not forget to pass users to the UsersList component.

<template>
    <div class="users">
        <h3>Users</h3>
        <UsersList 
            :users="usersStore.gUsersList"/>
    </div>
</template>

<script>
import { useUsersStore } from '@/stores/users';
import UsersList from '@/components/users/UsersList.vue';
export default {
    name: 'Users',
    components: {
        UsersList
    },
    computed: {
        usersStore() {
            return useUsersStore();
        }
    },
    async created() {
        await this.usersStore.aGetUsers();
    }
}
</script>

After all this manipulations we can check the result.

Awesome!

In conclusion, this guide has empowered you to master data visualization in your Vue CRM application through the seamless integration of Vuetify's dynamic table components. By crafting an effective users table, configuring advanced features like table expansion, and leveraging Firebase to fetch users from the Firestore database, you've enhanced both functionality and visual appeal. This comprehensive approach ensures that your "Users" page not only presents data efficiently but also provides a user-friendly and interactive experience. As you implement these techniques, your Vue CRM project is poised for heightened data visualization and improved user engagement. Stay tuned for more insights and practical tips on elevating your Vue.js development journey. Elevate your Vue CRM with dynamic tables today!