Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

Erik KovalskyProduct Manager
ProfileView your profile

ProjectsAll my projects
TeamManage your team

SettingsAccount settings

  • Erik KovalskyProduct Manager
    ProfileView your profile

    ProjectsAll my projects
    TeamManage your team

    SettingsAccount settings

Components

  • Components Hub
  • Content
  • Table
  • Display
  • VAvatar
  • VAvatarStack
  • VBlock
  • VIconBox
  • VIconWrap v1.1
  • VSnack v1.1
  • VTag
  • Layout
  • VFlex & VFlexItemv2.0
  • VGrid & VGridItemv2.0
  • VBreadcrumb
  • VTabs v1.1
  • VFlexPagination
  • VMarkdownPreview v2.6
  • VMarkdownEditor v2.6
  • VFlexTable v2.2
  • Accordions
  • Cards
  • Placeholders
  • Plugins

Select Language

Activity

  • Team
  • Projects
  • Schedule
Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer projectgetslicer.io
31%
5 / 24
Metamovies reworkedmetamovies.co
84%
28 / 31
Fast Pizza redesignfastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

Recently viewed

Browser SupportBlog post
Twitch APIBlog post
Browser SupportBlog post

Recent Members

Alice C.San Diego, CASoftware EngineerThis is a nice user description that we can use as demo content.
Alice C.Software Engineer
Tara S.New York, NYUI/UX DesignerThis is a nice user description that we can use as demo content.
Tara S.UI/UX Designer
Dwayne H.Los Angeles, CAProduct ManagerThis is a nice user description that we can use as demo content.
Jimmy H.Project Manager

Task Details

Overview

Build a desktop and mobile landing page wireframe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Videmus igitur ut conquiescere ne infantes quidem possint. Duo Reges: constructio interrete... See More

Participants

Statistics

5 days
3 files
54
Add Checklist

Files

Preliminary Sketches3MB 5 days ago
DownloadDownload this file
View TaskView related task

UpdateUpload a new version
DeleteDelete this file
Project Budget0.6MB 8 days ago
DownloadDownload this file
View TaskView related task

UpdateUpload a new version
DeleteDelete this file
POC Demo8.75MB 8 days ago
DownloadDownload this file
View TaskView related task

UpdateUpload a new version
DeleteDelete this file

Messages

Send

Welcome

Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

  • Components
  • VFlexTable

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
Without header
🚴‍♂️
yellow
Biking
Sports
🏃‍♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
With separators
emojicolornamecategory
🚴‍♂️
yellow
Biking
Sports
🏃‍♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
Rounded
emojicolornamecategory
🚴‍♂️
yellow
Biking
Sports
🏃‍♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
Compact
emojicolornamecategory
🚴‍♂️
yellow
Biking
Sports
🏃‍♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
All options together
🚴‍♂️
yellow
Biking
Sports
🏃‍♀️
orange
Running
Sports
🎿
green
Skiing
Sports
🏊
info
Swimming
Sports
🤸
purple
Cartwheeling
Sports
SubTable
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"
  }
]
Without print-objects
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:

PropsDefaultType
data[]Array<any>
columnsundefinedRecord<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
}>
compactfalseboolean
roundedfalseboolean
subtablefalseboolean
separatorsfalseboolean
noHeaderfalseboolean
reactivefalseboolean
clickablefalseboolean
printObjectsfalseboolean

VFlexTable Events

Here is the full events available for <VFlexTable /> component:

EventCallbackDescription
@rowClick(row: any) => voidRaised when a row is clicked
Requires clickable props

VFlexTable Slots

Here is the full slots available for <VFlexTable /> component:

SlotPropertiesDescription
#headernullAll header area
#header-column<{ column: VFlexTableColumn }>The header cell content
#bodynullAll 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