Skip to content
On this page

Table

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

Examples

Base

IDFirst NameLast NameDateGender
Show code

Customise

IDFirst NameLast NameDateGender
Show code

Selection

Selection: { "id": 2, "first_name": "John", "last_name": "Jacobs", "date": "2016-12-15 06:00:53", "gender": "Male" }

IDFirst NameLast NameDateGender
Show code

Checkable

IDFirst NameLast NameDateGender
Total checked: 2
Show code

Detailed

NameStock SoldStock AvailableStock Cleared
    Monopoly5710057%
    Scrabble238427%
    Chess376161%
    Battleships145625%
Show code

Pagination

Page: 1

IDFirst NameLast NameDateGender
Show code

Async Data

TitleVote AverageVote CountRelease DateOverview
Show code

Sticky

IDFirst NameLast NameDateGenderColumn AColumn BColumn CColumn DColumn EColumn FColumn GColumn HColumn IColumn LColumn MColumn NColumn O
Show code

Searchable

IDFirst NameLast NameDateGender

You can debounce search filter to avoid multiple filtering when typing.

IDFirst NameLast NameDateGender

You can also customize the search input using a scoped slot.

IDFirst NameLast NameDateGender
Show code

Draggable rows/columns

Use draggable/draggable-column prop to allow rows and columns to be draggable. Manage dragging using dragstart/columndragstart,dragover/ columndragover and drop/columndrop events

IDFirst NameLast NameDateGender
Show code

Class props

'Classes applied to the element'
IDFirst NameLast NameDateGenderColumn AColumn BColumn CColumn DColumn EColumn F
How does the Class props inspector work?
Class propDescriptionPropsSuffixes
borderedClassClass of the Table when is bordered.bordered
detailedClassClass of the Table row detail.
👉 Expand details to see it in action!
detailed
emptyClassClass of the Table when is empty.
footerClassClass of the Table footer.
hoverableClassClass of the Table when is hoverable.hoverable or focusable
mobileClassClass of the Table component when on mobile.
👉 Switch to mobile view to see it in action!
mobileSortClassClass of the sortable form wrapper on mobile.
👉 Switch to mobile view to see it in action!
narrowedClassClass of the Table when rows are narrowed.narrowed
paginationWrapperClassClass of the Table pagination wrapper.paginated
rootClassClass of Table root element.
scrollableClassClass of the Table wrapper when its content is scrollable.scrollable
stickyHeaderClassClass of the Table wrapper when header is sticky.sticky-header
stripedClassClass of the Table when rows are striped.striped
tableClassClass of the Table.
tdCheckboxClassClass of the Table `td` element when is checkable.checkable
tdClassClass of the Table `td` element.
tdDetailedChevronClassClass of the Table `td` element that contains the chevron to trigger details.detailed
tdPositionClassClass of the Table `td` element when component is positioned.positionleft
centered
right
tdStickyClassClass of the Table `td` element when component is sticky.sticky
thCheckboxClassClass of the Table `th` element when is checkable.checkable
thClassClass of the Table `th` element.
thCurrentSortClassClass of the Table `th` element currently sorted.
👉 Click on 'First Name' header to sort elements and see it in action!
thDetailedClassClass of the Table `th` element of the detail column of triggers.detailed
thPositionClassClass of the Table `th` element when component is positioned.positionleft
centered
right
thSortIconClassClass of the Table sort icon in the header.
👉 Click on 'First Name' header to sort elements and see it in action!
thSortableClassClass of the sortable Table `th` element.sortable
thStickyClassClass of the Table `th` element when component is sticky.sticky
thUnselectableClassClass of the Table `th` element that is unsortable.!headerSelectable and sortable
trCheckedClassClass of the Table row when checkable and checked.
👉 Select a row of the table to see it in action!
checkable
trSelectedClassClass of the Table row when selected.
👉 Select a row of the table to see it in action!
wrapperClassClass of the Table wrapper.

Table component

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

Props

Prop nameDescriptionTypeValuesDefault
ariaCurrentLabelstring-
ariaNextLabelstring-
ariaPageLabelstring-
ariaPreviousLabelstring-
backendFilteringColumns won't be filtered with Javascript, use with searchable prop to the columns to filter in your backendboolean-
backendPaginationRows won't be paginated with Javascript, use with page-change event to paginate in your backendboolean-
backendSortingColumns won't be sorted with Javascript, use with sort event to sort in your backendboolean-
borderedBorder to all cellsboolean-
checkableRows can be checked (multiple)boolean-
checkboxPositionPosition of the checkbox (if checkable is true)stringleft, right'left'
checkboxVariantColor of the checkbox when checkable, optionalstringprimary, info, success, warning, danger, and any other custom colorundefined
checkedRowsSet which rows are checked, use v-model:checkedRows to make it two-way bindingarray-[]
columnsTable columnsarray-[]
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 paginationfunc-
customRowKeyUse a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended)string-
dataTable dataarray-[]
debounceSearchFiltering debounce time (in milliseconds)number-
defaultSortSets the default sort column and order — e.g. ['first_name', 'desc']string|array-
defaultSortDirectionSets the default sort column direction on the first clickstringasc, desc'asc'
detailIconIcon name of detail actionstring-'chevron-right'
detailKeyUse a unique key of your data Object when use detailed or opened detailed. (id recommended)string-''
detailTransitionstring-''
detailedAllow row detailsboolean-
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-
hasDetailedVisibleControls the visibility of the trigger that toggles the detailed rows.func-Default function (see source code)
headerCheckableShow check/uncheck all checkbox in table header when checkableboolean-true
heightTable fixed heightnumber|string-
hoverableRows are highlighted when hoveringboolean-
iconPackIcon pack to usestring-
isRowCheckableCustom method to verify if a row is checkable, works when is checkablefunc-Default function (see source code)
isRowSelectableCustom method to verify if a row is selectable, works when is selected.func-Default function (see source code)
loadingLoading stateboolean-
mobileBreakpointMobile breakpoint as max-width valuestring-
mobileCardsRows appears as cards on mobile (collapse rows)boolean-
From config:
table: {
  mobileCards: true
}
mobileSortPlaceholderText when nothing is selectedstring-
narrowedMakes the cells narrowerboolean-
openedDetailedAllow pre-defined opened details. Ideal to open details via vue-router. (A unique key is required; check detail-key prop)array-[]
overrideboolean-
paginatedAdds pagination to the tableboolean-
paginationOrderPagination buttons order if paginatedstring-
paginationPositionPagination position (if paginated)stringbottom, top, bot
From config:
table: {
  paginationPosition: 'bottom'
}
paginationRoundedRounded pagination if paginatedboolean-
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 returnfunc-Default function (see source code)
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-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-
totalTotal number of table data if backend-pagination is enablednumber|string-0

Events

Event namePropertiesDescription
page-change
dblclick
contextmenu
cell-click
clickrow Object - clicked row
index number - index of clicked row
checknewCheckedRows Array&lt;Object&gt; - checked rows
check-all
update:checkedRows
selectrow Object - selected row
selected Array&lt;Object&gt; - selected rows
update:selected
filters-change
details-open
details-close
update:openedDetailed
mouseenter
mouseleave
sortfield string - column field
direction boolean - 'asc' or 'desc'
event Event - native event
sorting-priority-removed
dragstart
dragend
drop
dragleave
dragover
columndragstart
columndragend
columndrop
columndragleave
columndragover
update:currentPage

Slots

NameDescriptionBindings
default
pagination
top-left
caption
preheader
detail
empty
footer
loading
bottom-left

TableColumn component

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

Props

Prop nameDescriptionTypeValuesDefault
customKeystring|number-
customSearchfunc-
customSortfunc-
fieldstring-
headerSelectableboolean-
labelstring-
metastring|number|boolean|func|object|array-
numericboolean-
positionOptional, position of column contentstringleft, centered, right
searchableboolean-
sortableboolean-
stickyboolean-
subheadingstring-
tdAttrsAdds native attributes to td :td-attrs="(row, column)" => ({})"func-Default function (see source code)
thAttrsAdds native attributes to th :th-attrs="(column)" => ({})"func-Default function (see source code)
visibleboolean-true
widthnumber|string-

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.