Learn how to create selectable header data tables in your Vue app with Vuetify to improve user experience.

Data tables are an absolute necessity when building enterprise-like applications. Generally, they are useful for a variety of applications. This article is geared towards helping you give your users more control over how their data can be displayed. This will improve user experience in your app.

To this end, we will build a data table whose headers can be modified using the well-known material design framework for Vue.js: Vuetify.

How it works

A user is able to select which columns they want the table to display on the left, and they can immediately see the change on the right.

Then, they can click the Save button, which saves the configuration they have chosen in the browser. As a result, when the user reloads that page or comes back to that page after a while, the columns that the user has selected remain the same.

#vue #vuejs #javascript #vuetify #web-development