VFlexTable
Vuero provides a custom table component called <VFlexTable />. It looks like a table but is not an Html5 table. Instead, it uses the flexbox technology and is fully responsive. Check the markup for more details about usage.
emojicolornamecategory
🚴♂️
yellow
Biking
Sports
🏃♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
🚴♂️
yellow
Biking
Sports
🏃♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
emojicolornamecategory
🚴♂️
yellow
Biking
Sports
🏃♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
emojicolornamecategory
🚴♂️
yellow
Biking
Sports
🏃♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
emojicolornamecategory
🚴♂️
yellow
Biking
Sports
🏃♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
🚴♂️
yellow
Biking
Sports
🏃♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
emojicolornamecategory
🚴♂️
yellow
Biking
Sports
🏃♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
Debugging objects
By default objects are not rendered. If you need to display they content for debugging purpose, you can add print-objects attribute to the <VFlexTable />.
idcompanytypeindustrystatuscontacts
0
Grubspot
New Lead
Software
Active
[
{
"id": 0,
"picture": "https://media.cssninja.io/content/avatars/25.jpg",
"initials": "AC",
"color": "info"
},
{
"id": 1,
"initials": "JP",
"color": "info"
},
{
"id": 2,
"picture": "/images/avatars/svg/vuero-1.svg",
"initials": "EK",
"color": "h-purple"
},
{
"id": 3,
"picture": "https://media.cssninja.io/content/avatars/5.jpg",
"initials": "ML",
"color": "danger"
},
{
"id": 4,
"initials": "SC",
"color": "success"
}
]1
PhaseBit
Confirmed
Cryptocurrency
New
[
{
"id": 4,
"initials": "SC",
"color": "h-purple"
}
]2
Kokolint
New Lead
Software
Active
[
{
"id": 12,
"initials": "BT",
"color": "success"
},
{
"id": 9,
"picture": "https://media.cssninja.io/content/avatars/7.jpg",
"initials": "AC",
"color": "h-purple"
}
]3
VScope X
Canceled
Software
Disabled
[
{
"id": 7,
"picture": "https://media.cssninja.io/content/avatars/13.jpg",
"initials": "TS",
"color": "info"
}
]4
MediHelp
Confirmed
Software
Suspended
[
{
"id": 0,
"picture": "https://media.cssninja.io/content/avatars/25.jpg",
"initials": "AC",
"color": "info"
},
{
"id": 14,
"picture": "https://media.cssninja.io/content/avatars/11.jpg",
"initials": "KL",
"color": "danger"
},
{
"id": 17,
"picture": "https://media.cssninja.io/content/avatars/5.jpg",
"initials": "ML",
"color": "warning"
}
]idcompanytypeindustrystatuscontacts
0
Grubspot
New Lead
Software
Active
1
PhaseBit
Confirmed
Cryptocurrency
New
2
Kokolint
New Lead
Software
Active
3
VScope X
Canceled
Software
Disabled
4
MediHelp
Confirmed
Software
Suspended