# Table

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


edit on github

# Examples

# Base

# Sandbox

# Selection

# Pagination

# Checkable

# Sticky

# Detailed

# Searchable

# Props

Prop name Description Type Values Default
data Table data array - []
columns Table columns array - []
bordered Border to all cells boolean -
striped Whether table is striped boolean -
narrowed Makes the cells narrower boolean -
hoverable Rows are highlighted when hovering boolean -
loading Loading state boolean -
detailed Allow row details boolean -
checkable Rows can be checked (multiple), checked rows will have a .is-checked class if you want to style boolean -
headerCheckable Show check/uncheck all checkbox in table header when checkable boolean - true
checkboxPosition Position of the checkbox (if checkable is true) string left, right 'left'
selected Set which row is selected, use the .sync modifier (Vue 2.x) or v-model:selected (Vue 3.x) to make it two-way binding object -
isRowSelectable Custom method to verify if a row is selectable, works when is selected. func - () => true
focusable Table can be focused and user can navigate with keyboard arrows (require selected) and rows are highlighted when hovering boolean -
customIsChecked Custom method to verify if row is checked, works when is checkable. Useful for backend pagination func -
isRowCheckable Custom method to verify if a row is checkable, works when is checkable func - () => true
checkedRows Set which rows are checked, use the .sync modifier (Vue 2.x) or v-model:checkedRows (Vue 3.x) to make it two-way binding array - []
mobileCards Rows appears as cards on mobile (collapse rows) boolean - true
defaultSort Sets the default sort column and order — e.g. ['first_name', 'desc'] string|array -
defaultSortDirection Sets the default sort column direction on the first click string asc, desc 'asc'
sortIcon Sets the header sorting icon string - Config -> 'table.sortIcon': 'arrow-up'
sortIconSize Sets the size of the sorting icon string small, medium, large Config -> 'table.sortIconSize': 'small'
sortMultiple Adds multiple column sorting boolean - false
sortMultipleData Used in combination with backend-sorting array - []
sortMultipleKey Adds a key which will be required for multi column sorting to work. Will always be enabled if null is selected (default). Requires sort-multiple string null, shiftKey, altKey, ctrlKey null
paginated Adds pagination to the table boolean -
currentPage Current page of table data (if paginated), use the .sync modifier (Vue 2.x) or v-model:currentPage (Vue 3.x) to make it two-way binding number - 1
perPage How many rows per page (if paginated) number|string - Config -> 'table.perPage': 20
showDetailIcon Allow chevron icon and column to be visible boolean - true
paginationPosition Pagination position (if paginated) string bottom, top, bot Config -> 'table.paginationPosition': 'bottom'
backendSorting Columns won't be sorted with Javascript, use with sort event to sort in your backend boolean -
backendFiltering Columns won't be filtered with Javascript, use with searchable prop to the columns to filter in your backend boolean -
rowClass Add a class to row based on the return func - () => ''
openedDetailed Allow pre-defined opened details. Ideal to open details via vue-router. (A unique key is required; check detail-key prop) array - []
hasDetailedVisible Controls the visibility of the trigger that toggles the detailed rows. func - () => true
detailKey Use a unique key of your data Object when use detailed or opened detailed. (id recommended) string - ''
customDetailRow Custom style on details boolean - false
backendPagination Rows won't be paginated with Javascript, use with page-change event to paginate in your backend boolean -
total Total number of table data if backend-pagination is enabled number|string - 0
iconPack Icon pack to use string -
mobileSortPlaceholder Text when nothing is selected string -
customRowKey Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended) string -
draggable Allows rows to be draggable boolean - false
scrollable Add a horizontal scrollbar when table is too wide boolean -
ariaNextLabel string -
ariaPreviousLabel string -
ariaPageLabel string -
ariaCurrentLabel string -
stickyHeader Show a sticky table header boolean -
height Table fixed height number|string -
filtersEvent Add a native event to filter string - ''
cardLayout Force to show table with cards layout boolean -
debounceSearch Filtering debounce time (in milliseconds) number -
showHeader Show header boolean - Config -> 'table.showHeader': true
rootClass string -
wrapperClass string -
footerClass string -
emptyClass string -
detailedClass string -
detailedChevronClass string -
detailedIconExpandedClass string -
borderedClass string -
stripedClass string -
narrowClass string -
hoverableClass string -
thWrapClass string -
thContentClass string -
thRightClass string -
thCenteredClass string -
thStickyClass string -
thCheckboxClass string -
thCurrentSortClass string -
thSortableClass string -
thUnselectableClass string -
thDetailedClass string -
tdRightClass string -
tdCenteredClass string -
tdStickyClass string -
tdCheckboxCellClass string -
tdSelectedClass string -
subheadingClass string -
stickyHeaderClass string -
mobileCardsClass string -
cardsClass string -
scrollableClass string -
mobileSortClass string -
iconSortDescClass string -
iconSortClass string -
iconSortInvisibleClass string -
paginationWrapperClass string -

# Events

Event name Type Description
page-change
dblclick
mouseenter
mouseleave
contextmenu
filters-change undefined
sorting-priority-removed undefined
sort undefined
check undefined
check-all undefined
update:checkedRows undefined
click undefined
select undefined
update:selected undefined
details-close undefined
details-open undefined
update:openedDetailed undefined
dragstart undefined
dragend undefined
drop undefined
dragover undefined
dragleave undefined

# Slots

Name Description Bindings
default
pagination
top-left
detail [
{
"name": "row"
},
{
"name": "index"
}
]
empty
footer
loading
bottom-left

# Style

CSS Variable SASS Variable Default
--oruga-table-background-color $table-background-color #fff
--oruga-table-background $table-background #f5f5f5
--oruga-table-boder $table-boder 1px solid transparent
--oruga-table-border-radius $table-border-radius $base-border-radius
--oruga-table-bordered-border-width $table-bordered-border-width 1px
--oruga-table-bordered-bottom-color $table-bordered-bottom-color $grey
--oruga-table-card-box-shadow $table-card-box-shadow 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
--oruga-table-card-cell-font-weight $table-card-cell-font-weight 600
--oruga-table-card-cell-padding $table-card-cell-padding 0 0.5em 0 0
--oruga-table-card-cell-text-align $table-card-cell-text-align left
--oruga-table-card-detail-margin $table-card-detail-margin -1rem 0 0 0
--oruga-table-card-margin $table-card-margin 0 0 1rem 0
--oruga-table-color $table-color black
--oruga-table-current-sort-border-color $table-current-sort-border-color $grey
--oruga-table-current-sort-font-weight $table-current-sort-font-weight 700
--oruga-table-current-sort-hover-border-color $table-current-sort-hover-border-color $grey
--oruga-table-detail-background $table-detail-background black
--oruga-table-detail-box-shadow $table-detail-box-shadow inset 0 1px 3px $grey
--oruga-table-detail-chevron-color $table-detail-chevron-color $primary
--oruga-table-detail-chevron-width $table-detail-chevron-width 40px
--oruga-table-detail-padding $table-detail-padding 1rem
--oruga-table-focus-border-color $table-focus-border-color $primary
--oruga-table-focus-box-shadow $table-focus-box-shadow 0 0 0 0.125em rgba($primary, 0.25)
--oruga-table-hoverable-background-color $table-hoverable-background-color #fafafa
--oruga-table-mobile-breakpoint $table-mobile-breakpoint 1024px
--oruga-table-multi-column-reset-icon-margin $table-multi-column-reset-icon-margin 0 0 0 10px
--oruga-table-narrow-padding $table-narrow-padding .25em .5em
--oruga-table-row-active-background-color $table-row-active-background-color $primary
--oruga-table-row-active-color $table-row-active-color $primary-invert
--oruga-table-sticky-header-height $table-sticky-header-height 300px
--oruga-table-sticky-zindex $table-sticky-zindex 1
--oruga-table-striped-background-color $table-striped-background-color #fafafa
--oruga-table-td-border-color $table-td-border-color #dbdbdb
--oruga-table-td-border-style $table-td-border-style solid
--oruga-table-td-border-width $table-td-border-width 0 0 1px
--oruga-table-td-padding $table-td-padding .5em .75em
--oruga-table-th-border-color $table-th-border-color #dbdbdb
--oruga-table-th-border-style $table-th-border-style solid
--oruga-table-th-border-width $table-th-border-width 0 0 2px 0
--oruga-table-th-checkbox-width $table-th-checkbox-width 40px
--oruga-table-th-color $table-th-color #363636
--oruga-table-th-detail-width $table-th-detail-width 14px
--oruga-table-th-font-weight $table-th-font-weight 600
--oruga-table-th-padding $table-th-padding 0.5em 0.75em
--oruga-table-th-wrap-icon-margin $table-th-wrap-icon-margin 0.5rem