Table

GITHUB

This is table component with many features.


Code:

  
HTML
<fvTable :fields="fields" :rows="rows" />
  
Javascript
export default { data () { return { fields: ['name', 'family'], rows: [ { name: 'Reza', family: 'Nouri', customField: 'x' }, { name: 'Amir', family: 'Momenian', customField: 'z' }, { name: 'Saeed', family: 'Kamyabi', customField: 'y' }, ] } } }

Examples:

namefamilygender
Amir
Beckham
m
Susan
Heydarkhani
f
Heshmat
Najafi
m

namefamilygender
name
Amir
family
Beckham
gender
m
name
Susan
family
Heydarkhani
gender
f
name
Heshmat
family
Najafi
gender
m

User Car Brand Birthday
JR
Jeanne Rodriguez
Mercedes Benz
1991/4/22
RP
Russell Peterson
Tesla
1992/2/12
MW
Monica Woods
Audi
1996/8/10
WH
Willard Harvey
Jeep
1987/1/2

Notes:

  • You can use .fv-no-border and .fv-no-shadow helper classes to remove borders if you want to show table in full viewport size.

API:

NameTypeDefaultDescription
fields
Array
[]
List of table fields.
titleKey
String
''
title key in each field object. only works when fields prop is list of objects.
valueKey
String
''
value key in each field object. only works when fields prop is list of objects.
rows
Array
[]
List of table rows.
showTitle
Boolean
true
Show fields title.
breaked
true or false or null
null
Is fvTable breaked? if it's null, it will calcutate automatic by parent size.