Vue Material -

Table

Data tables display sets of raw data. They usually appear in desktop enterprise products. They are the component that have more features in all Vue Material ecosystem. There is a lot of options that you can tweak to change and impact on the table layout.

This component is still WIP. Right now you can use the core basic stuff, but soon we will release Pagination, Internal search and Edit options. The current API will not change during the beta phase (likely).

Simple tables

To create a basic table, with simple data and without any advanced options, you have a really simple markup to use.

There is some components that mimics the native table elements:

  • md-table => table
  • md-table-row => tr
  • md-table-head => th
  • md-table-cell => td
Basic Table
ID
Name
Email
Gender
Job Title
1
Shawna Dubbin
sdubbin0@geocities.com
Male
Assistant Media Planner
2
Odette Demageard
odemageard1@spotify.com
Female
Account Coordinator
3
Vera Taleworth
vtaleworth2@google.ca
Male
Community Outreach Specialist

In pages that only have a table, you can put this table within a card. Fortunately Vue Material provide an options out of the box to add a table card without any efforts:

Table within a card

Users

ID
Name
Email
Gender
Job Title
1
Shawna Dubbin
sdubbin0@geocities.com
Male
Assistant Media Planner
2
Odette Demageard
odemageard1@spotify.com
Female
Account Coordinator
3
Vera Taleworth
vtaleworth2@google.ca
Male
Community Outreach Specialist

Advanced tables

This section will assume that you have knowledge of Vue Scoped Slots. You'll need them to create advanced tables.

Vue Material have advanced tables that can handle with your data, sorting, selecting and manipulating it. You can pass a v-model with you data and tweak the table to suit your needs. Along with that, you should give to data table a custom template. This will allow the table to have it's own markup and display all rows for you. This is really powerfull!

There are plenty of options for you to make your data table awesome, so carefully read this documentation, analyze the code examples with full attention and take a deeper look at the API section.

Let's start with a custom template feature:

When you provide a model along with a custom template, the data table will render the whole Array of options for you, without the need of a v-for, for example:

Custom template

Users

ID
Name
Email
Gender
Job Title
1
Shawna Dubbin
sdubbin0@geocities.com
Male
Assistant Media Planner
2
Odette Demageard
odemageard1@spotify.com
Female
Account Coordinator
3
Lonnie Izkovitz
lizkovitz3@youtu.be
Female
Operator
4
Thatcher Stave
tstave4@reference.com
Male
Software Test Engineer III
5
Clarinda Marieton
cmarietonh@theatlantic.com
Female
Paralegal

With a custom template, a model and some other properties, you can have automatic sort:

Sort

Users

ID
Name
Email
Gender
Job Title
1
Shawna Dubbin
sdubbin0@geocities.com
Male
Assistant Media Planner
2
Odette Demageard
odemageard1@spotify.com
Female
Account Coordinator
3
Lonnie Izkovitz
lizkovitz3@youtu.be
Female
Operator
4
Thatcher Stave
tstave4@reference.com
Male
Software Test Engineer III
5
Clarinda Marieton
cmarietonh@theatlantic.com
Female
Paralegal

Sometimes the internal sort from Vue Material will not be enough for you. You can provide your own sort function:

Custom Sort function

Users

ID
Name
Email
Gender
Job Title
1
Shawna Dubbin
sdubbin0@geocities.com
Male
Assistant Media Planner
2
Odette Demageard
odemageard1@spotify.com
Female
Account Coordinator
3
Lonnie Izkovitz
lizkovitz3@youtu.be
Female
Operator
4
Thatcher Stave
tstave4@reference.com
Male
Software Test Engineer III
5
Clarinda Marieton
cmarietonh@theatlantic.com
Female
Paralegal

With large datasets comes great responsability... with your user. We know that Vue Material tables have a great layout, but we need to care about the usability of your screens. Fixed headers will make easier to interact with the table, by keeping all options always visible:

Fixed headers

Users

ID
Name
Email
Gender
Job Title
1
Shawna Dubbin
sdubbin0@geocities.com
Male
Assistant Media Planner
2
Odette Demageard
odemageard1@spotify.com
Female
Account Coordinator
3
Vera Taleworth
vtaleworth2@google.ca
Male
Community Outreach Specialist
4
Lonnie Izkovitz
lizkovitz3@youtu.be
Female
Operator
5
Thatcher Stave
tstave4@reference.com
Male
Software Test Engineer III
6
Karim Chipping
kchipping5@scribd.com
Female
Safety Technician II
7
Helge Holyard
hholyard6@howstuffworks.com
Female
Internal Auditor
8
Rod Titterton
rtitterton7@nydailynews.com
Male
Technical Writer
9
Gawen Applewhite
gapplewhite8@reverbnation.com
Female
GIS Technical Architect
10
Nero Mulgrew
nmulgrew9@plala.or.jp
Female
Staff Scientist
11
Cybill Rimington
crimingtona@usnews.com
Female
Assistant Professor
12
Maureene Eggleson
megglesonb@elpais.com
Male
Recruiting Manager
13
Cortney Caulket
ccaulketc@cbsnews.com
Male
Safety Technician IV
14
Selig Swynfen
sswynfend@cpanel.net
Female
Environmental Specialist
15
Ingar Raggles
iragglese@cbc.ca
Female
VP Sales
16
Karmen Mines
kminesf@topsy.com
Male
Administrative Officer
17
Salome Judron
sjudrong@jigsy.com
Male
Staff Scientist
18
Clarinda Marieton
cmarietonh@theatlantic.com
Male
Paralegal
19
Paxon Lotterington
plotteringtoni@netvibes.com
Female
Marketing Assistant
20
Maura Thoms
mthomsj@webeden.co.uk
Male
Actuary

It's easy to integrate a search functionality on tables. You only need to change the model that you share with your table. You can also use the md-table-empty-state component to show an empty state when the search returns zero items:

Search and empty state

Users

ID
Name
Email
Gender
Job Title
1
Shawna Dubbin
sdubbin0@geocities.com
Male
Assistant Media Planner
2
Odette Demageard
odemageard1@spotify.com
Female
Account Coordinator
3
Vera Taleworth
vtaleworth2@google.ca
Male
Community Outreach Specialist
4
Lonnie Izkovitz
lizkovitz3@youtu.be
Female
Operator
5
Thatcher Stave
tstave4@reference.com
Male
Software Test Engineer III
6
Karim Chipping
kchipping5@scribd.com
Female
Safety Technician II
7
Helge Holyard
hholyard6@howstuffworks.com
Female
Internal Auditor
8
Rod Titterton
rtitterton7@nydailynews.com
Male
Technical Writer
9
Gawen Applewhite
gapplewhite8@reverbnation.com
Female
GIS Technical Architect
10
Nero Mulgrew
nmulgrew9@plala.or.jp
Female
Staff Scientist
11
Cybill Rimington
crimingtona@usnews.com
Female
Assistant Professor
12
Maureene Eggleson
megglesonb@elpais.com
Male
Recruiting Manager
13
Cortney Caulket
ccaulketc@cbsnews.com
Male
Safety Technician IV
14
Selig Swynfen
sswynfend@cpanel.net
Female
Environmental Specialist
15
Ingar Raggles
iragglese@cbc.ca
Female
VP Sales
16
Karmen Mines
kminesf@topsy.com
Male
Administrative Officer
17
Salome Judron
sjudrong@jigsy.com
Male
Staff Scientist
18
Clarinda Marieton
cmarietonh@theatlantic.com
Male
Paralegal
19
Paxon Lotterington
plotteringtoni@netvibes.com
Female
Marketing Assistant
20
Maura Thoms
mthomsj@webeden.co.uk
Male
Actuary

Selection

When dealing with large data sets, when may want to have quick actions over our data, whether to remove or make some bulk change. Tables have inner selection in two ways: Single and Multiple.

The single selection is really great to highlight a particular item. Maybe, by clicking on a table row, will show the details of the item. With single selections you'll have access to the selected item and the table will do the rest. You can use the primary and accent hue colors to give more appealing highlight colors:

Single

Multiple selections great for bulk changes and you can use the alternate header to hold the options that you can call when there are options selected. Note that if you click in the checkbox or on the entire row will do the same action, due to md-auto-select option. Really handy:

Multiple

The table pagination will create the mechanism to show contents through pages. This component will be available soon. :)

Pagination

API - md-table

Coming soon...