Vuestic UI app with AG Grid tutorial

October 17, 2022
Yauheni Prakopchyk

You can find repo here and codesandbox here.

Requirements

The application we’re going to build is a CRUD page of users - something an admin would use to manage users. You can find something similar in almost any admin dashboard.

Here’s a wireframe for application:

Can’t work on app without a plan, so here’s one:

  • [ ]  Scaffold new project
  • [ ]  Make a simple table with image, name, email
  • [ ]  Add active column
  • [ ]  Implement sorting for all columns
  • [ ]  Implement full-text filtering
  • [ ]  Add create, edit and delete functionality

Scaffold new project

As we’re starting from scratch, we need a runtime environment. Vite is an optimal choice.

Code goes here:

If you open the page in browser - you should see default vite page:

There are several dependencies we’d need for our project:

Then we should add Vuestic UI import to main.ts file:

Make a simple table with "image", "name", "email"

Now let’s work on UsersPage.vue component:

Here we used modules import for AG Grid instead of packages. The difference is that modules is something like lego bricks, you assemble the configuration you need with small pieces to minimize footprint, and packages bundle already has everything included. modules is generally preferrable.

We need data for several users:

We don’t use backend in this example, but normally you’ll fetch this data from API. In our case - we import it directly from data/users.ts file.

`reactive(users)` is of no importance right now, but would be useful for dynamic data updates later on.

Image doesn’t look right! We can use AG Grid formatter, but better idea would be to use va-avatar from Vuestic UI. For that let’s create a component:

and register it in 'UsersPage.vue'

All custom components we have to attach via 'cellRenderer'. From component side we also have to use params, which is a prop AG Grid passes to component.

We can mark this step as complete and do a little celebration 🎉!

Add 'active' column

In active field we modify user data. Let’s create the component


and register it in 'UsersPage.vue'

Generally, you won’t modify user data directly, and instead rely on backend. Something like this:


Then, in component we can:


But our example is complicated enough as it is 😉, so let’s move to the next step.

Implement sorting for all columns

Sorting is the simplest thing if we just use sorting from AG Grid:

Implement full text filtering

For filtering AG Grid built in functionality is far from being sufficient, and we have to mostly implement it externally.


That’s a lot of code, so let’s try to piece it apart.

  • 'watch' part is needed to let AG Grid know that filter had changed, as it doesn’t catch up on its own.
  • 'isExtenalFilterPresent' informs AG Grid that external filter is present.
  • 'doesExternalFilterPass' allows us to pass external filter.

A bit excessive, but it works 😬

Add create, edit and delete functionality

That’s a big task, compared to what we did before, so let’s do it piece meal.

First, let’s focus on UI: we’d need “Actions” column with “Edit” and “Delete” buttons as well as “Create” button.

For “Actions”, as before, we’ll create a component with 2 buttons:

The key difference with “Active” component is that we use params.context, which gives access to state from parent component. In our case we pass editUser and removeUser functions from parent, which “Actions” component can run.

Create button is not hard at all and will just call a method UsersPage component.

Before we focus on users list logic we have to add an editing modal, with input for each field:

In parent component we implement all logic for creating, updating and deletion:

The only interesting part here is agGridContext, which we have to pass to ag-grid-vue component as a prop:

Alternative would be to use inject/provide, but it doesn’t work for composition api.

Here’s the end result of our journey:

And here’s an actual page if you want to click around.

Conclusion

In this article you learned how to use Vuestic UI and AG Grid together. AG Grid Vue is an advanced and configurable solution, that will support your application regardless of scale and complexity. That’s definitely a good option to consider if you’re looking for open source data grid with virtual scroll, fixed columns, editing and many other features you can check in docs.

Vuestic is a growing vue UI framework with high customizability and SSR support. It’s a good choice for modern responsive application.In this article you will learn to create an application using Vuestic UI and AG Grid.

🔥 3 Vue.js experts available in November to build and launch your product.
Got a project to discuss?