How to Use VueJs Quasar Table (QTable): Functionalities, Capabilities, Usage
In this video you will learn about VueJS Quasar Table or (QTable). You will also discover here Quasar's robust and out-of-the-box Table functionalities, its capabilities, and its usage.
Quasar Table
According to Quasar.Dev, QTable is a component that allows you to display data in a tabular manner. It’s generally called a datatable. It packs the following main features:
Filtering
Sorting
Single / Multiple rows selection with custom selection actions
Pagination (including server-side if required)
Grid mode (you can use for example QCards to display data in a non-tabular manner)
Total customization of rows and cells through scoped slots
Ability to add additional row(s) at top or bottom of data rows
Column picker (through QTableColumns component described in one of the sections)
Custom top and/or bottom Table controls
Responsive design
#Tutorial
#Quasar
#QuasarTable
#Pixel8Academy
Timestamps:
00:00 - Intro
00:35 - Recap
00:49 - What Is a table?
01:48 - Defining the Columns
02:56 - Demonstration
06:31 - Dense Table
06:45 - Omitting Column Definition
07:50 - Sticky Header/Column
08:13 - Separator
09:14 - Styling
10:55 - Selection
12:37 - Visibility
12:55 - Popup Editing
13:45 - Grid Style
14:52 - Expanding Rows
15:31 - Before and After Slots
16:04 - Pagination
16:26 - Custom Slots
17:25 - No Data
18:16 - Handling Bottom Layer
18:22 - Additional Features
18:55 - Exporting Data
19:21 - Keyboard Navigation
If you don’t have much time but are so eager to learn about other programming frameworks, then you need to check these links;
Learn Vue Js in just 30 minutes; https://bit.ly/35aIpO4
Vue Js In-Depth (Components, Veux, Veu Router) https://bit.ly/361zZsD
Getting started with Git & GitLab https://bit.ly/3jxCQSe
How to Build an App Using Quasar Framework; Introduction; Installations; Instances; To-Do List App https://bit.ly/3wC79dg
VueJS Quasar Framework: 3 IMPORTANT COMPONENTS YOU MUST KNOW (Buttons, Groups, Dropdowns) https://bit.ly/2V43doi
How to Use & Customize VueJs Quasar Cards https://bit.ly/3zzrTEe
How to Use & Customize VueJs Quasar Dialog (QDialog) https://bit.ly/3s15woJ
KEEP IN TOUCH
Website
https://www.pixel8.ph
Facebook
/ pixel8software
Instagram
/ pixel8ph
Twitter
/ pixel8ph
Linkedin
/ pixel8websolutions
Pinterest
https://www.pinterest.ph/pixel8ph/_cr...
Email/Business: [email protected]