Skip to content

Table

Tabulated data are sometimes needed, it's even better when it's responsive

Examples

Base

Show code

Column prop

Show code

Customise

Show code

Selection

Show code

Checkable

Show code

Detailed

Show code

Pagination

Show code

Async Data

Show code

Sticky

Show code

Searchable

Show code

Draggable rows/columns

Show code

Class props

'Classes applied to the element'

Table component

Tabulated data are sometimes needed, it's even better when it's responsive

html
<o-table></o-table>

Props

Prop nameDescriptionTypeValuesDefault
ariaCurrentLabelAccessibility label for the pagination current page button.string-
From config:
table: {
  ariaCurrentLabel: undefined
}
ariaNextLabelAccessibility label for the pagination next page button.string-
From config:
table: {
  ariaNextLabel: undefined
}
ariaPageLabelAccessibility label for the pagination page button.string-
From config:
table: {
  ariaPageLabel: undefined
}
ariaPreviousLabelAccessibility label for the pagination previous page button.string-
From config:
table: {
  ariaPreviousLabel: undefined
}
backendFilteringColumns won't be filtered with Javascript, use with searchable prop to the columns to filter in your backendboolean-
From config:
table: {
  backendFiltering: false
}
backendPaginationRows won't be paginated with Javascript, use with page-change event to paginate in your backendboolean-false
backendSortingColumns won't be sorted with Javascript, use with sort event to sort in your backendboolean-
From config:
table: {
  backendSorting: false
}
borderedBorder to all cellsboolean-false
checkableRows can be checked (multiple)boolean-false
checkboxPositionPosition of the checkbox when checkablestringleft, right
From config:
table: {
  checkboxPosition: "left"
}
checkboxVariantColor of the checkbox when checkablestringprimary, info, success, warning, danger, and any other custom color
From config:
table: {
  checkboxVariant: undefined
}
checkedRowsSet which rows are checked, use v-model:checkedRows to make it two-way bindingarray-[]
columnsTable columnsColumn[]-Default function (see source code)
currentPageCurrent page of table data (if paginated), use v-model:currentPage to make it two-way bindingnumber-1
customDetailRowCustom style on detailsboolean-false
customIsCheckedCustom method to verify if row is checked, works when is checkable. Useful for backend pagination(row: unknown, data: unknown[]) => boolean-
customRowKeyUse a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended)string-
From config:
table: {
  customRowKey: undefined
}
dataTable dataunknown[]-Default function (see source code)
debounceSearchFiltering debounce time (in milliseconds)number-
defaultSortSets the default sort column and order — e.g. ['first_name', 'desc']string | string[]-
From config:
table: {
  defaultSort: undefined
}
defaultSortDirectionSets the default sort column direction on the first clickstringasc, desc
From config:
table: {
  defaultSortDirection: "asc"
}
detailIconIcon name of detail actionstring-
From config:
table: {
  detailIcon: "chevron-right"
}
detailKeyUse a unique key of your data Object when use detailed or opened detailed. (id recommended)string-
From config:
table: {
  detailKey: undefined
}
detailTransitionstring-
From config:
table: {
  detailTransition: "slide"
}
detailedAllow row detailsboolean-false
draggableAllows rows to be draggableboolean-false
draggableColumnAllows columns to be draggableboolean-false
filtersEventAdd a native event to filterstring-""
focusableTable can be focused and user can navigate with keyboard arrows (require selected) and rows are highlighted when hoveringboolean-false
hasDetailedVisibleControls the visibility of the trigger that toggles the detailed rows.(row: unknown) => boolean-
From config:
table: {
  hasDetailedVisible: (row) => true
}
headerCheckableShow check/uncheck all checkbox in table header when checkableboolean-true
heightTable fixed heightnumber|string-
hoverableRows are highlighted when hoveringboolean-false
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
table: {
  iconPack: undefined
}
isRowCheckableCustom method to verify if a row is checkable, works when is checkable(row: unknown) => boolean-
From config:
table: {
  isRowCheckable: (row) => true
}
isRowSelectableCustom method to verify if a row is selectable, works when is selected.func-Default function (see source code)
loadingEnable loading stateboolean-false
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
table: {
  mobileBreakpoint: undefined
}
mobileCardsRows appears as cards on mobile (collapse rows)boolean-
From config:
table: {
  mobileCards: true
}
mobileSortPlaceholderText when nothing is selectedstring-
From config:
table: {
  mobileSortPlaceholder: undefined
}
narrowedMakes the cells narrowerboolean-false
openedDetailedAllow pre-defined opened details. Ideal to open details via vue-router. (A unique key is required; check detail-key prop)array-[]
overrideOverride existing theme classes completelyboolean-
paginatedAdds pagination to the tableboolean-
From config:
table: {
  paginated: false
}
paginationOrderPagination buttons order if paginatedstringcentered, right, left
From config:
table: {
  paginationOrder: undefined
}
paginationPositionPagination position (if paginated)stringbottom, top, both
From config:
table: {
  paginationPosition: "bottom"
}
paginationRoundedRounded pagination if paginatedboolean-
From config:
table: {
  paginationRounded: false
}
paginationSimpleEnable simple style pagination if paginatedboolean-
From config:
table: {
  paginationSimple: false
}
paginationSizeSize of pagination if paginatedstring-
From config:
table: {
  paginationSize: "small"
}
perPageHow many rows per page (if paginated)number|string-
From config:
table: {
  perPage: 20
}
rowClassAdd a class to row based on the return(row: unknown, index: number) => string-
From config:
table: {
  rowClass: (row,index) => ""
}
scrollableAdd a horizontal scrollbar when table is too wideboolean-
selectedSet which row is selected, use v-model:selected to make it two-way bindingobject-
showDetailIconAllow chevron icon and column to be visibleboolean-
From config:
table: {
  showDetailIcon: true
}
showHeaderShow headerboolean-
From config:
table: {
  showHeader: true
}
sortIconSets the header sorting iconstring-
From config:
table: {
  sortIcon: "arrow-up"
}
sortIconSizeSets the size of the sorting iconstringsmall, medium, large
From config:
table: {
  sortIconSize: "small"
}
stickyCheckboxMake the checkbox column sticky when checkableboolean-false
stickyHeaderShow a sticky table headerboolean-
stripedWhether table is stripedboolean-false
totalTotal number of table data if backend-pagination is enablednumber-0

Events

Event namePropertiesDescription
page-changepage number - updated pageon pagination page change event
dblclickrow typeof data - row data
index number - index of clicked row
event Event - native click event
on row double click event
mouseenterrow typeof data - row data
index number - index of clicked row
event Event - native mouseenter event
on row mouseenter event
mouseleaverow typeof data - row data
index number - index of clicked row
event Event - native mouseleave event
on row mouseleave event
contextmenurow typeof data - row data
index number - index of clicked row
event Event - native contextmenu event
on row right click event
cell-clickrow typeof data - row data
column Column - column data
index number - row index
colindex number - column index
event Event - native click event
on cell click event
update:currentPagevalue number - updated currentPage propcurrentPage prop two-way binding
update:selectedvalue typeof data - updated select propselect prop two-way binding
selectnewRow typeof data - new select value
oldRow typeof data - old select value
on row select event
checkvalue Array&lt;typeof data&gt; - all checked rows
row typeof data - row data
on row checked event
check-allvalue Array&lt;typeof data&gt; - all checked rowson all rows checked event
update:checkedRowsvalue Array&lt;typeof data&gt; - updated checkedRows propcheckedRows prop two-way binding
sortcolumn Column - column data
direction string - 'asc' or 'desc'
event Event - native event
on column sort change event
filters-changefilters Record&lt;string, string&gt; - filter objecton filter change event
filters-eventfiltersEvent string - props filtersEvent value
filters Record&lt;string, string&gt; - filter object
event Event - native event
on natvie filter event based on props filtersEvent
update:openedDetailedvalue Array&lt;typeof data&gt; - updated openedDetailed propopenedDetailed prop two-way binding
details-openrow typeof data - row dataon details open event
details-closerow typeof data - row dataon details close event
clickrow typeof data - row data
index number - index of clicked row
event Event - native click event
on row click event
dragstartrow typeof data - row data
index number - index of draged row
event DragEvent - native dragstart event
on row dragstart event
dragendrow typeof data - row data
index number - index of draged row
event DragEvent - native dragend event
on row dragend event
droprow typeof data - row data
index number - index of draged row
event DragEvent - native drop event
on row drop event
dragleaverow typeof data - row data
index number - index of draged row
event DragEvent - native dragleave event
on row dragleave event
dragoverrow typeof data - row data
index number - index of draged row
event DragEvent - native dragover event
on row dragover event
columndragstartcolumn Column - column data
index number - index of draged column
event DragEvent - native columndragstart event
on column columndragstart event
columndragendcolumn Column - column data
index number - index of draged column
event DragEvent - native columndragend event
on column columndragend event
columndropcolumn Column - column data
index number - index of draged column
event DragEvent - native columndrop event
on column columndrop event
columndragleavecolumn Column - column data
index number - index of draged column
event DragEvent - native columndragleave event
on column columndragleave event
columndragovercolumn Column - column data
index number - index of draged column
event DragEvent - native columndragover event
on column columndragover event

Slots

NameDescriptionBindings
defaultPlace o-table-column here
paginationOverride pagination labelcurrent number - current page
per-page number - rows per page
total number - total rows count
change (page: number): void - on page change event
top-leftAdditional slot if table is paginated
captionDefine a table caption here
preheaderDefine preheader content here
check-allOverride check all checkboxis-all-checked boolean - if all rows are checked
is-all-uncheckable boolean - if check all is uncheckable
check-all (): void - check all function
detailPlace row detail content hererow unknown - row conent
index number - row index
emptyDefine content if table is empty
footerDefine a custom footercolumn-count number - counts of visible columns
row-count number - counts of visible rows
loadingOverride loading componentloading boolean - is loading enabled
bottom-leftAdditional slot if table is paginated

TableColumn component

html
<o-table-column></o-table-column>

Props

Prop nameDescriptionTypeValuesDefault
customSearchDefine a custom funtion for the filter search(row: unknown, filter: string) => boolean-
customSortDefine a custom sort function(a: Column, b: Column, isAsc: boolean) => number-
fieldDefine an object property key if data is an objectstring-
headerSelectableMake header selectableboolean-false
labelDefine the column labelstring-
metaAdd addtional meta information for the column for custom purposestring|number|boolean|func|object|array-
numericDefine column value as numberboolean-false
positionPosition of the column contentstringleft, centered, right
searchableEnable an additional searchbar below the column headerboolean-false
sortableEnable column sortabilityboolean-false
stickyWhether the column is sticky or notboolean-false
subheadingDefine a column sub headingstring-
tdAttrsAdds native attributes to td(row: unknown, column: Column) => object-Default function (see source code)
thAttrsAdds native attributes to th(column: Column) => object-Default function (see source code)
visibleDefine whether the column is visible or notboolean-true
widthColumn fixed widthnumber|string-

Slots

NameDescriptionBindings
defaultDefault Slotrow unknown - row data
column Column - column definition
index number - row index
colindex number - column index
toggle-details (row): void - toggle details function
headerOverride header labelcolumn Column - column definition
index number - column index
subheadingOverride subheading labelcolumn Column - column definition
index number - column index
searchableOverride searchable inputcolumn Column - column definition
index number - column index

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$table-background-color#fff
$table-background#f5f5f5
$table-boder1px solid transparent
$table-border-radius$base-border-radius
$table-card-box-shadow0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
$table-card-cell-font-weight600
$table-card-cell-padding0 0.5em 0 0
$table-card-cell-text-alignleft
$table-card-detail-margin-1rem 0 0 0
$table-card-margin0 0 1rem 0
$table-colorblack
$table-current-sort-border-color$grey
$table-current-sort-font-weight700
$table-current-sort-hover-border-color$grey
$table-detail-background#fafafa
$table-detail-box-shadowinset 0 1px 3px $grey
$table-detail-chevron-color$primary
$table-detail-chevron-width40px
$table-detail-padding1rem
$table-focus-border-color$primary
$table-focus-box-shadow0 0 0 0.125em rgba($primary, 0.25)
$table-hoverable-background-color#fafafa
$table-narrow-padding0.25em 0.5em
$table-row-active-background-color$primary
$table-row-active-color$primary-invert
$table-sticky-header-height300px
$table-sticky-zindex1
$table-striped-background-color#fafafa
$table-td-border1px solid $grey-lighter
$table-td-padding0.5em 0.75em
$table-th-border2px solid $grey-lighter
$table-th-checkbox-width40px
$table-th-color#363636
$table-th-detail-width14px
$table-th-font-weight600
$table-th-padding0.5em 0.75em

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$table-background-color#fff
$table-background#f5f5f5
$table-boder1px solid transparent
$table-border-radius$base-border-radius
$table-card-box-shadow0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
$table-card-cell-font-weight600
$table-card-cell-padding0 0.5em 0 0
$table-card-cell-text-alignleft
$table-card-detail-margin-1rem 0 0 0
$table-card-margin0 0 1rem 0
$table-colorblack
$table-current-sort-border-color$grey
$table-current-sort-font-weight700
$table-current-sort-hover-border-color$grey
$table-detail-background#fafafa
$table-detail-box-shadowinset 0 1px 3px $grey
$table-detail-chevron-color$primary
$table-detail-chevron-width40px
$table-detail-padding1rem
$table-focus-border-color$primary
$table-focus-box-shadow0 0 0 0.125em rgba($primary, 0.25)
$table-hoverable-background-color#fafafa
$table-narrow-padding0.25em 0.5em
$table-row-active-background-color$primary
$table-row-active-color$primary-invert
$table-sticky-header-height300px
$table-sticky-zindex1
$table-striped-background-color#fafafa
$table-td-border1px solid $grey-lighter
$table-td-padding0.5em 0.75em
$table-th-border2px solid $grey-lighter
$table-th-checkbox-width40px
$table-th-color#363636
$table-th-detail-width14px
$table-th-font-weight600
$table-th-padding0.5em 0.75em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault
$table-head-bginitial
$table-head-colorinitial
$table-head-border-widthvar(--#{$prefix}border-width)
$table-sticky-zindex1
$table-sticky-bginitial
$table-sticky-colorinitial
$table-detail-padding0.5rem 0.75rem
$table-detail-bgvar(--#{$prefix}gray-light)
$table-sortable-hover-border-colorvar(--#{$prefix}secondary)
$table-current-sort-bgvar(--#{$prefix}gray-light)
$table-focus-colorvar(--#{$prefix}-info-rgb)
$table-card-spacer$spacer

See ➜ 📄 Full scss file

Released under the MIT License.