Quasar Table Component With Action Buttons.

Viraj Madhushan
2 min readFeb 3, 2023

Quasar Framework?

quasar

Quasar Framework is an open-source, high-performance, full-stack JavaScript framework for building modern web applications. It is based on the popular Vue.js framework and uses a component-based architecture to create responsive, mobile-first user interfaces. Quasar also provides a wide range of features such as routing, state management, internationalization, and more. It is designed to be easy to use and extendable, so developers can quickly build powerful web applications with minimal effort.

Quasar Tables

Quasar tables are a type of table designed to be used in the Quasar framework. They are designed to be highly customizable and feature a wide range of features, such as sorting, filtering, pagination, and more. Quasar tables are built using the Vue.js framework and can be used to display data in an organized and efficient manner.

If you required more info and more examples about Quasar tables, click here to see official documentation.

Let’s build our custom component

In here I will use Vue 3, composition API. It doesn’t matter which Vue API used. The concept is the same.

Table component with action buttons.

Table component with action buttons, without props and emits.

Above Table component with action buttons. But in this time we pass the props and emits. So we can re-use our component at any place in the application.

Conclusion

Quasar tables offer a number of advantages over traditional HTML tables. They are easier to use, more efficient, and provide more features. Quasar tables are also more responsive and can be used to create dynamic data displays. Additionally, they are more accessible and can be used to create accessible data displays for users with disabilities.
Finally, Quasar tables are highly customizable and can be tailored to meet the needs of any project.

--

--

Viraj Madhushan

Passionate learner of AI and Robotics. Always exploring new technologies to stay ahead of emerging trends. Hiking and reading enthusiast.