Quickly Create a Responsive Sales Data Table with Vue and Vuetify
Tags: appwrite, vue, vuetify, database
Published: 2022-09-26 00:11:37

When running a business, taking advantage of insights in your sales data provides an ingenious way to make better business decisions.

In this article, you will learn how to create a sales data table in Vue and Vuetify and store your data using Appwrite.

[Vuetify](https://vuetifyjs.com/) is a modern UI library built on Vue, with design patterns and principles based on Google’s Material UI. It provides many responsive components out of the box, speeding up your development process.

[Appwrite](https://appwrite.io/?utm_source=hackmamba&utm_medium=hackmamba-blog) is a backend-as-a-service platform that enables you to integrate features such as storage, authentication, and database management into your project without having to build a backend from scratch.

## GitHub Repo

Check out its source code on [GitHub](https://github.com/dpkreativ/appwrite-sales-data-table)

## Prerequisites

To follow along and understand this article, you should have:

- Basic knowledge of JavaScript and Vue.js
- [Vue CLI](https://cli.vuejs.org/) installed on your computer. Verify its installation by running `vue --version` in your terminal, or install it by running `npm install --location=global @vue/cli`
- Docker Desktop installed on your computer. Run `docker -v` in your terminal to verify its installation, or install it by following the steps outlined in the [Get Docker documentation](https://docs.docker.com/get-docker/)
- Appwrite instance running on Docker. Follow [this guide](https://dev.to/hackmamba/create-a-local-appwrite-instance-in-3-steps-19n9?utm_source=hackmamba&utm_medium=hackmamba) to create a local Appwrite instance

## Setting Up Your Vue Project

### Create your project

In your terminal, navigate to your preferred directory and run the command below to create a new `vue` project:

```bash
vue create <project-name>
```

In this article, `<project-name>` is `appwrite-sales-data-table`.

In the options to pick a preset, select `Default ([Vue2] babel, eslint)`.

### Install Vuetify

After successfully creating your Vue project, `cd` into it and run the command below to install Vuetify:

```bash
vue add vuetify
```

In the options to choose a preset, select `Vuetify 2 - Vue CLI (recommended)`.

After its successful installation, run `npm run serve` in your terminal and view your newly created Vue/Vuetify project in your browser at `localhost:8080`:

![Vuetify Home](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662042661974_Untitled-min.png)

## Setting Up Table UI

In Vuetify, you can use the [`v-data-table` component](https://vuetifyjs.com/en/components/data-tables/) to display tabular data. It contains APIs and props that enable you to use features such as sorting, searching, row selection, content editing, and pagination.

Open your project in your code editor and update `src/App.vue` with the code below:

[https://gist.github.com/dpkreativ/64768eb5f32c553ac7728e0caa19cb9c](https://gist.github.com/dpkreativ/64768eb5f32c553ac7728e0caa19cb9c)

In the code above, you did the following:

- Created a `<template>` with a `<v-app>` component which wraps all your HTML content. This component is essential because it gives you access to all the capabilities of Vuetify
- In your `<v-app>` component, you created another `<template>` containing `<v-data-table>`, the Vuetify data table component. It contains `:headers="headers"` and `:items="sales"` for your table’s header and body content
- The `<v-dialog>` tag enables you to create a dialog box. In this code, you created dialog boxes to add new sales data and confirm if you want to delete existing data
- The data object in your `<script>` tag contains the default state for your dialog boxes, headers, and sales content. The `<script>` tag also contains CRUD methods to populate your sales array and create/delete items from your table

In your browser, your project should look like this:

![Sales Data Table UI](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662042839233_Untitled+1-min.png)

## Setting Up Your Database On Appwrite

First, ensure that Docker Desktop is running your local Appwrite instance, then open `localhost:80` in your browser to sign into Appwrite’s console:

![Login to Appwrite](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1664149291304_image.png)

Click on “Create Project” to set up a new project for your database:

![Create Project](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662042935346_Untitled+2-min.png)

In your new project’s dashboard, click on “Database” located on the left sidebar, then click on “Add Database” to create a new database:

![Add Database](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662042999526_Untitled+3-min.png)

In your newly-created database, click on “Add Collection” and give your collection a suitable name:

![Add Collection](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662043078447_Untitled+4-min.png)

In your newly-created collection, click “Attributes” and add each key in your data object as an attribute.

For this project, you will create attributes for `rep` (string), `item` (string), `quantity` (integer), and `price` (float or double).

Here is for `rep`:

![rep attribute](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662043239968_Untitled+5-min.png)

Here is for `quantity`:

![quantity attribute](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662043267820_Untitled+6-min.png)

Here is the complete list of attributes:

![All attributes](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662043295335_Untitled+7-min.png)

Click on “Documents”, then click “Add Document” to add some data to your database:

![Add Document](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662043345872_Untitled+8-min.png)

Your “Documents” screen will look similar to this:

![Documents](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662043386508_Untitled+9-min.png)

Click on “Settings” and scroll down to “Permissions”. At the “Collection Level” section, set “Read Access” and “Write Access” to `role:all`, then click on “Update”:

![Read and Write Access](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662043522132_Untitled+10-min.png)

## Integrating Appwrite With Your Vue/Vuetify Project

### Install Appwrite’s Web SDK

In your project’s terminal, run the command below to install Appwrite’s Web SDK:

```bash
yarn add appwrite
```

After its successful installation, create a `utils/config.js` file in your project’s `src/` folder and update it with the code below:

```jsx
export const Server = {
  endpoint: process.env.VUE_APP_ENDPOINT,
  project: process.env.VUE_APP_PROJECT,
  collectionId: process.env.VUE_APP_COLLECTION_ID,
  database: process.env.VUE_APP_DATABASE_ID,
};
```

In the code above, you created a `Server` object that contains your Appwrite’s database secrets. These details are stored in a `.env.local` file, and you will use them to configure Appwrite for your Vue/Vuetify project.

### Configure Appwrite’s Account, Client, and Databases

In your `src/` folder, create an `api/index.js` file and update it with the code below:

```jsx
import { Server } from '@/utils/config';
import { Account, Client as Appwrite, Databases } from 'appwrite';
let api = {
  sdk: null,
  provider: () => {
    if (api.sdk) {
      return api.sdk;
    }
    let appwrite = new Appwrite();
    appwrite.setEndpoint(Server.endpoint).setProject(Server.project);
    const account = new Account(appwrite);
    const database = new Databases(appwrite, Server.database);
    api.sdk = { account, database };
    return appwrite;
  },
  getAccount: () => {
    return api.provider().account.createAnonymousSession();
  },
  createDocument: (collectionId, data, read, write) => {
    return api
      .provider()
      .database.createDocument(collectionId, 'unique()', data, read, write);
  },
  listDocuments: (collectionId) => {
    return api.provider().database.listDocuments(collectionId);
  },
  deleteDocument: (collectionId, documentId) => {
    return api.provider().database.deleteDocument(collectionId, documentId);
  },
};
export default api;
```

In the code above, you did the following:

- Imported your Appwrite secrets from `Server`
- Imported `Account`, `Client` as `Appwrite`, and `Databases` from Appwrite (these give you access to Appwrite’s account authentication and database features)
- Created an `api` object with two keys - `sdk` and `provider` (by default, `sdk` is null, meaning it does not contain an `account` and `database`)
- Your `provider` first checks if `sdk` is not null, in which case it returns whatever is in it. If the `sdk` is still null, it skips the `if` statement and runs the next code block
- You created an `Appwrite` instance and set its endpoint and project ID with secrets from your `Server`
- You created an `Account` instance, which you used in `getAccount()` to create an anonymous user session
- You created a `Databases` instance, which contains your database ID and used it to perform CRUD operations in `createDocument()`, `listDocuments()`, and `deleteDocument()`
- You exported your `api` to use in your Vue project

### Add Appwrite’s secrets to .env.local file

In your project’s root directory, create a `.env.local` file and update it with the code below:

```txt
VUE_APP_PROJECT=yourProjectId
VUE_APP_ENDPOINT=yourApiEndpoint
VUE_APP_DATABASE_ID=yourDatabaseId
VUE_APP_COLLECTION_ID=yourCollectionId
```

Navigate to your project’s Appwrite console in your browser, and on the home page, click on “Settings” to view your Project ID and API Endpoint:

![Project ID and API Endpoint](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662045959134_Untitled+11-min.png)

Click on “Database” in your project’s sidebar, then open your database and click on “Settings” to view your Database ID:

![Database ID](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662046044607_Untitled+12-min.png)

On the “Collections” tab, select your collection and click on “Settings” to view your Collection ID:

![Collection ID](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662046108007_Untitled+13-min.png)

### Import Appwrite’s config files into Vue project

In your `App.vue` file, import your Appwrite config files by updating `<script>` with the code below:

```html
<script>
  import api from './api';
  import { Server } from './utils/config';

  export default {
    // pre-existing code
  };
</script>
```

### Setup Authorization

In your `<script>`'s `methods` object, add the code below:

```jsx
authorize() {
  let init = api.getAccount();
  init.then(
    (res) => {
      console.log(res);
    },
    (err) => {
      console.log(err);
    }
  );
},
```

In the code above, you did the following:

- Triggered the `getAccount()` function in `api/index.js`
- When Appwrite grants a user permission to access the database, it sends a response to the console or displays an error if the request is unsuccessful

### Get data from Appwrite’s database

In your `<script>`'s `methods` object, update `initialize()` with the code below:

```jsx
initialize() {
  this.authorize();

  let getItems = api.listDocuments(Server.collectionId);
  getItems.then(
    (res) => {
      this.sales = res.documents;
    },
    (err) => {
      console.log(err);
    }
  );
},
```

Here, you did the following:

- Triggered the `authorize()` method
- Triggered the `listDocuments()` function in `api/index.js`. It takes in your `collectionId` as a parameter
- Added the successful response to your `sales` array, and displayed errors (if any) in your browser’s console

If you run `yarn serve` in your terminal, and refresh your browser, you will see the data you’ve already stored in your Appwrite database:

![Updated Sales Data Table](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662046655263_Untitled+14-min.png)

### Delete Data From the Table and Appwrite Database

In your `<script>`'s `methods` object, update `deleteConfirm()` with the code below:

```jsx
deleteItemConfirm() {
  try {
    api.deleteDocument(
      Server.collectionId,
      this.sales[this.editedIndex].$id
    );
  } catch (error) {
      console.log(error);
    }

  this.sales.splice(this.editedIndex, 1);
  this.closeDelete();
},
```

Here, you did the following:

- Added a `try-catch` block to trigger the `deleteDocument()` function in `api/index.js`. Its two parameters are your `collectionId`, and your document’s `$id`
- You also deleted the selected data from the `sales` array and closed the “Delete” modal

### Add New Data to the Table and Appwrite Database

In your `<script>`'s `methods` object, update `save()` with the code below:

```jsx
save() {
  let newItem = api.createDocument(Server.collectionId, this.editedItem);
  newItem.then(
    (res) => {
      this.sales.push(res);
    },
    (err) => {
      console.log(err);
    }
  );
  this.close();
},
```

Here, you did the following:

- Triggered the `createDocument()` function in `api/index.js`; it takes in your `collectionId` and the new data as parameters
- Added the data to the `sales` array after successfully adding it to your database.
- Closed your modal

Here is the final result:

![Final Result](https://paper-attachments.dropbox.com/s_DFAA6E4E3446FD3969F00FDE96EBB635D952D8A7BC79B79B8A162215B297EAD3_1662047085462_ezgif.com-gif-maker-min.gif)

## Conclusion

In the article, you learned how to create a responsive sales data table with Vue and Vuetify, store and retrieve your data using Appwrite.

Combining Vuetify and Appwrite provides many robust, out-of-the-box features to enable you to build full-fledged apps quickly.

To learn more about these features, check out the resources below.

## Resources

- [Appwrite’s official documentation](https://appwrite.io/docs)
- [Setting up Databases and Collections in Appwrite - YouTube](https://www.youtube.com/watch?v=cu5pkTdWiW8&list=PL-nc7zI7zjsaCNC-sluNK4mHwdqk-nKEU&index=5)
- [Appwrite Demo with Vue - GitHub](https://github.com/appwrite/demo-todo-with-vue)