Data table

The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.

Basic

ID
NAME
EMAIL
DATE
EXPERIENCE
AGE
95Edwina Ebswortheebsworth2m@sbwire.com09/27/20182 Years27
1Korrie O'Crevykocrevy0@thetimes.co.uk09/23/20161 Year61
7Eileen Diehnediehn6@163.com10/15/20179 Years59
11De Falloondfalloona@ifeng.com06/12/20180 Year30
3Stella Gandertonsganderton2@tuttocitta.it03/24/20186 Years66
Items per page:
1-5 of 100

Dense

You can show a dense version of the table by using the density prop.

ID
NAME
EMAIL
DATE
EXPERIENCE
AGE
95Edwina Ebswortheebsworth2m@sbwire.com09/27/20182 Years27
1Korrie O'Crevykocrevy0@thetimes.co.uk09/23/20161 Year61
7Eileen Diehnediehn6@163.com10/15/20179 Years59
11De Falloondfalloona@ifeng.com06/12/20180 Year30
3Stella Gandertonsganderton2@tuttocitta.it03/24/20186 Years66
Items per page:
1-5 of 100

Cell Slot

Normally you would use the item.<key> slots to render custom markup in specific columns. If you instead need more control over the entire row, you can use the item slot.

NAME
EMAIL
DATE
SALARY
AGE
STATUS
Edwina EbsworthHuman Resources Assistant
eebsworth2m@sbwire.com09/27/201819586.2327
Current
Korrie O'CrevyNuclear Power Engineer
kocrevy0@thetimes.co.uk09/23/201623896.3561
Professional
ED
Eileen DiehnEnvironmental Specialist
ediehn6@163.com10/15/201718991.6759
Rejected
DF
De FalloonSales Representative
dfalloona@ifeng.com06/12/201819252.1230
Resigned
Stella GandertonOperator
sganderton2@tuttocitta.it03/24/201813076.2866
Applied
Items per page:
1-5 of 100

Row Selection

The show-select prop will render a checkbox in the default header to toggle all rows, and a checkbox for each row.

NAME
EMAIL
DATE
SALARY
AGE
STATUS
Edwina EbsworthHuman Resources Assistant
eebsworth2m@sbwire.com09/27/201819586.2327
Current
Korrie O'CrevyNuclear Power Engineer
kocrevy0@thetimes.co.uk09/23/201623896.3561
Professional
ED
Eileen DiehnEnvironmental Specialist
ediehn6@163.com10/15/201718991.6759
Rejected
DF
De FalloonSales Representative
dfalloona@ifeng.com06/12/201819252.1230
Resigned
Stella GandertonOperator
sganderton2@tuttocitta.it03/24/201813076.2866
Applied
Items per page:
1-5 of 100

Fixed Header

You can fix the header of table by using the fixed-header prop.

NAME
EMAIL
DATE
SALARY
AGE
STATUS
Edwina EbsworthHuman Resources Assistant
eebsworth2m@sbwire.com09/27/201819586.2327
Current
Korrie O'CrevyNuclear Power Engineer
kocrevy0@thetimes.co.uk09/23/201623896.3561
Professional
ED
Eileen DiehnEnvironmental Specialist
ediehn6@163.com10/15/201718991.6759
Rejected
DF
De FalloonSales Representative
dfalloona@ifeng.com06/12/201819252.1230
Resigned
Stella GandertonOperator
sganderton2@tuttocitta.it03/24/201813076.2866
Applied
HN
Harmonia NisiusSenior Cost Accountant
hnisius4@gnu.org08/25/201710909.5233
Professional
GH
Genevra HoneywoodGeologist
ghoneywood5@narod.ru06/01/201717803.861
Current
Dorolice CrossmanCost Accountant
dcrossman3@google.co.jp12/03/201712336.1722
Professional
Richardo AldrenSenior Sales Associate
raldren7@mtv.com11/05/201619230.1355
Rejected
Allyson MoaklerSafety Technician
amoakler8@shareasale.com12/29/201811677.3239
Applied
Items per page:
1-10 of 100

Expandable Rows

The show-expand prop will render an expand icon on each row. You can customize this with the item.data-table-expand slot. The position of this slot can be changed by adding a column with key: 'data-table-expand' to the headers array.

Just like selection, row items require a unique property on each item for expansion to work. The default is id, but you can use the item-value prop to specify a different item property.

NAME
EMAIL
DATE
SALARY
AGE
STATUS
Edwina EbsworthHuman Resources Assistant
eebsworth2m@sbwire.com09/27/201819586.2327
Current
Korrie O'CrevyNuclear Power Engineer
kocrevy0@thetimes.co.uk09/23/201623896.3561
Professional
ED
Eileen DiehnEnvironmental Specialist
ediehn6@163.com10/15/201718991.6759
Rejected
DF
De FalloonSales Representative
dfalloona@ifeng.com06/12/201819252.1230
Resigned
Stella GandertonOperator
sganderton2@tuttocitta.it03/24/201813076.2866
Applied
Items per page:
1-5 of 100

Grouping Rows

When using the group-by prop, you can customize the group header with the group-header slot.

Group by status
NAME
EMAIL
DATE
SALARY
AGE
STATUS
Professional(3)
Applied(6)
Current(3)
Rejected(2)
Resigned(6)
Items per page:
1-5 of 5

Row Editing via Dialog

The following are a collection of examples that demonstrate more advanced and real world use of the v-data-table component.

NAME
EMAIL
DATE
SALARY
AGE
STATUS
ACTIONS
Edwina EbsworthHuman Resources Assistant
eebsworth2m@sbwire.com09/27/201819586.2327
Current
Korrie O'CrevyNuclear Power Engineer
kocrevy0@thetimes.co.uk09/23/201623896.3561
Professional
ED
Eileen DiehnEnvironmental Specialist
ediehn6@163.com10/15/201718991.6759
Rejected
DF
De FalloonSales Representative
dfalloona@ifeng.com06/12/201819252.1230
Resigned
Stella GandertonOperator
sganderton2@tuttocitta.it03/24/201813076.2866
Applied
Items per page:
1-5 of 100

External Pagination

NAME
EMAIL
DATE
SALARY
AGE
STATUS
Edwina EbsworthHuman Resources Assistant
eebsworth2m@sbwire.com09/27/201819586.2327
Current
Korrie O'CrevyNuclear Power Engineer
kocrevy0@thetimes.co.uk09/23/201623896.3561
Professional
ED
Eileen DiehnEnvironmental Specialist
ediehn6@163.com10/15/201718991.6759
Rejected
DF
De FalloonSales Representative
dfalloona@ifeng.com06/12/201819252.1230
Resigned
Stella GandertonOperator
sganderton2@tuttocitta.it03/24/201813076.2866
Applied

Kitchen Sink

PRODUCT
DATE
CATEGORY
BUYERS
PAYMENT
STATUS
DELETE
OnePlus 7 Pro Philips
30 Apr 2020
Smart Phone
Ana Smith
Rs.984
Fully Paid
Completed
Google - Google HomeGoogle
11 Jul 2020
Google Home
Lindsay Green
Rs.1101
Fully Paid
Completed
Nike Air MaxNike
06 Jan 2021
Shoes
Ethan Lee
Rs.126/726
Partially Paid
Confirmed
Bose Frames TenorBose
21 Aug 2020
Glass
Scott Miller
Rs.345/646
Partially Paid
Confirmed
Apple iMac 27-inchApple
21 Aug 2020
IMac
Brandon Brooks
Rs.21/1005
Partially Paid
Confirmed
Items per page:
1-5 of 51
CONTENTS

  • Introduction

  • Basic

  • Dense

  • Cell Slot

  • Row Selection

  • Fixed Header

  • Expandable Rows

  • Grouping Rows

  • Row Editing via Dialog

  • External Pagination

  • Kitchen Sink