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": "/demo/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": "/demo/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": "/demo/avatars/7.jpg",
"initials": "AC",
"color": "h-purple"
}
]3
VScope X
Canceled
Software
Disabled
[
{
"id": 7,
"picture": "/demo/avatars/13.jpg",
"initials": "TS",
"color": "info"
}
]4
MediHelp
Confirmed
Software
Suspended
[
{
"id": 0,
"picture": "/demo/avatars/25.jpg",
"initials": "AC",
"color": "info"
},
{
"id": 14,
"picture": "/demo/avatars/11.jpg",
"initials": "KL",
"color": "danger"
},
{
"id": 17,
"picture": "/demo/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
VFlexTable Props
Here is the full props available for <VFlexTable /> component:
| Props | Default | Type |
|---|---|---|
| data | [] | Array<any> |
| columns | undefined | Record<string, { label?: string align?: 'start' | 'center' | 'end' bold?: boolean inverted?: boolean scrollX?: boolean scrollY?: boolean grow?: boolean | 'lg' | 'xl' media?: boolean cellClass?: string format?: (value: any, row: any, index: number) => any renderHeader?: () => VNode renderRow?: (row: any, column: VFlexTableColumn, index: number) => VNode}> |
| compact | false | boolean |
| rounded | false | boolean |
| subtable | false | boolean |
| separators | false | boolean |
| noHeader | false | boolean |
| reactive | false | boolean |
| clickable | false | boolean |
| printObjects | false | boolean |
VFlexTable Events
Here is the full events available for <VFlexTable /> component:
| Event | Callback | Description |
|---|---|---|
| @rowClick | (row: any) => void | Raised when a row is clicked Requires clickable props |
VFlexTable Slots
Here is the full slots available for <VFlexTable /> component:
| Slot | Properties | Description |
|---|---|---|
| #header | null | All header area |
| #header-column | <{ column: VFlexTableColumn }> | The header cell content |
| #body | null | All body area |
| #body-row-pre | <{ row: any, columns: Record<string, VFlexTableColumn>, index: number,}> | Display content before the row |
| #body-row | <{ row: any, columns: Record<string, VFlexTableColumn>, index: number,}> | The row content |
| #body-row-post | <{ row: any, columns: Record<string, VFlexTableColumn>, index: number,}> | Display content after the row |
| #body-cell | <{ row: any, column: VFlexTableColumn, index: number, value: any,}> | The cell content |