# Table

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


edit on github

# Examples

# Base

# Sandbox

# Selection

# Pagination

# Async Data

# Checkable

# Sticky

# Detailed

# Searchable

# Draggable rows/columns

# Class props

📄 Full scss file


ID First Name Last Name Date Gender Column A Column B Column C Column D Column E Column F Column G Column H Column I Column L Column M Column N Column O
1JesseSimmons2016-10-15 13:43:27Male1111111111111
2JohnJacobs2016-12-15 06:00:53Male2222222222222
3TinaGilbert2016-04-26 06:26:28Female3333333333333
4ClarenceFlores2016-04-10 10:28:46Male4444444444444
5BrandonLee2016-12-06 14:38:38Female5555555555555
6AnneStraus2017-12-06 14:38:38Female6666666666666
7MarkKnopfler2018-12-06 14:38:38Male7777777777777
8CraigDavid2019-12-06 14:38:38Male8888888888888
9DaveCopperfield2020-12-06 14:38:38Male9999999999999
10HilaryNelson2021-12-06 14:38:38Female10101010101010101010101010
How does Class props inspector work?
Class prop Description Props Suffixes
borderedClass Class of the Table when is bordered. bordered
detailedClass Class of the Table row detail.
👉 Expand details to see it in action!
detailed
emptyClass Class of the Table when is empty.
footerClass Class of the Table footer.
hoverableClass Class of the Table when is hoverable. hoverable or focusable
mobileClass Class of the Table component when on mobile.
👉 Switch to mobile view to see it in action!
mobileSortClass Class of the sortable form wrapper on mobile.
👉 Switch to mobile view to see it in action!
narrowedClass Class of the Table when rows are narrowed. narrowed
paginationWrapperClass Class of the Table pagination wrapper. paginated
rootClass Class of Table root element.
scrollableClass Class of the Table wrapper when its content is scrollable. scrollable
stickyHeaderClass Class of the Table wrapper when header is sticky. sticky-header
stripedClass Class of the Table when rows are striped. striped
tableClass Class of the Table.
tdCheckboxClass Class of the Table `td` element when is checkable. checkable
tdClass Class of the Table `td` element.
tdDetailedChevronClass Class of the Table `td` element that contains the chevron to trigger details. detailed
tdPositionClass Class of the Table `td` element when component is positioned. position left
centered
right
tdStickyClass Class of the Table `td` element when component is sticky. sticky
thCheckboxClass Class of the Table `th` element when is checkable. checkable
thClass Class of the Table `th` element.
thCurrentSortClass Class of the Table `th` element currently sorted.
👉 Click on 'First Name' header to sort elements and see it in action!
thDetailedClass Class of the Table `th` element of the detail column of triggers. detailed
thPositionClass Class of the Table `th` element when component is positioned. position left
centered
right
thSortIconClass Class of the Table sort icon in the header.
👉 Click on 'First Name' header to sort elements and see it in action!
thSortableClass Class of the sortable Table `th` element. sortable
thStickyClass Class of the Table `th` element when component is sticky. sticky
thUnselectableClass Class of the Table `th` element that is unsortable. !headerSelectable and sortable
trSelectedClass Class of the Table row when selected.
👉 Select a row of the table to see it in action!
wrapperClass Class of the Table wrapper.


# Props

Prop name Description Type Values Default
ariaCurrentLabel string -
ariaNextLabel string -
ariaPageLabel string -
ariaPreviousLabel string -
backendFiltering Columns won't be filtered with Javascript, use with searchable prop to the columns to filter in your backend boolean -
backendPagination Rows won't be paginated with Javascript, use with page-change event to paginate in your backend boolean -
backendSorting Columns won't be sorted with Javascript, use with sort event to sort in your backend boolean -
bordered Border to all cells boolean -
checkable Rows can be checked (multiple), checked rows will have a .is-checked class if you want to style boolean -
checkboxPosition Position of the checkbox (if checkable is true) string left, right 'left'
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 - []
columns Table columns array - []
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
customDetailRow Custom style on details boolean - false
customIsChecked Custom method to verify if row is checked, works when is checkable. Useful for backend pagination func -
customRowKey Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended) string -
data Table data array - []
debounceSearch Filtering debounce time (in milliseconds) number -
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'
detailIcon Icon name of detail action string - 'chevron-right'
detailKey Use a unique key of your data Object when use detailed or opened detailed. (id recommended) string - ''
detailTransition string - ''
detailed Allow row details boolean -
draggable Allows rows to be draggable boolean - false
draggableColumn Allows columns to be draggable boolean - false
filtersEvent Add a native event to filter string - ''
focusable Table can be focused and user can navigate with keyboard arrows (require selected) and rows are highlighted when hovering boolean -
hasDetailedVisible Controls the visibility of the trigger that toggles the detailed rows. func - Default function (see source code)
headerCheckable Show check/uncheck all checkbox in table header when checkable boolean - true
height Table fixed height number|string -
hoverable Rows are highlighted when hovering boolean -
iconPack Icon pack to use string -
isRowCheckable Custom method to verify if a row is checkable, works when is checkable func - Default function (see source code)
isRowSelectable Custom method to verify if a row is selectable, works when is selected. func - Default function (see source code)
loading Loading state boolean -
mobileBreakpoint Mobile breakpoint as max-width value string -
mobileCards Rows appears as cards on mobile (collapse rows) boolean -
From config

table: {
  mobileCards: true
}
mobileSortPlaceholder Text when nothing is selected string -
narrowed Makes the cells narrower boolean -
openedDetailed Allow pre-defined opened details. Ideal to open details via vue-router. (A unique key is required; check detail-key prop) array - []
override Override classes boolean - false
paginated Adds pagination to the table boolean -
paginationPosition Pagination position (if paginated) string bottom, top, bot
From config

table: {
  paginationPosition: 'bottom'
}
paginationRounded Rounded pagination if paginated boolean -
perPage How many rows per page (if paginated) number|string -
From config

table: {
  perPage: 20
}
scrollable Add a horizontal scrollbar when table is too wide boolean -
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 -
showDetailIcon Allow icon and column to be visible boolean - true
showHeader Show header boolean -
From config

table: {
  showHeader: true
}
sortIcon Sets the header sorting icon string -
From config

table: {
  sortIcon: 'arrow-up'
}
sortIconSize Sets the size of the sorting icon string small, medium, large
From config

table: {
  sortIconSize: 'small'
}
stickyCheckbox Make the checkbox column sticky when checkable boolean - false
stickyHeader Show a sticky table header boolean -
striped Whether table is striped boolean -
total Total number of table data if backend-pagination is enabled number|string - 0

# Events

Event name Properties Description
page-change
dblclick
contextmenu
cell-click
update:currentPage
filters-change
sort field string - column field
direction boolean - 'asc' or 'desc'
event Event - native event
check newCheckedRows Array<Object> - checked rows
check-all
update:checkedRows
click row Object - clicked row
index number - index of clicked row
select row Object - selected row
selected Array<Object> - selected rows
update:selected
details-close
details-open
update:openedDetailed
dragstart
dragend
drop
dragover
dragleave
columndragstart
columndragend
columndrop
columndragover
columndragleave

# Slots

Name Description Bindings
default
pagination
top-left
caption
detail
empty
footer
loading
bottom-left
preheader A slot inside <thead> above the normal header row.

# Table Column

# Props

Prop name Description Type Values Default
customKey string|number -
customSearch func -
customSort func -
field string -
headerSelectable boolean -
label string -
meta string|number|boolean|func|object|array -
numeric boolean -
position Optional, position of column content string centered, right
searchable boolean -
sortable boolean -
sticky boolean -
subheading string -
tdAttrs Adds native attributes to td :td-attrs="(row, column)" => ({})" func - Default function (see source code)
thAttrs Adds native attributes to th :th-attrs="(column)" => ({})" func - Default function (see source code)
visible boolean - true
width number|string -

# 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-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 #fafafa
--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-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 $table-td-border 1px solid $grey-lighter
--oruga-table-td-padding $table-td-padding .5em .75em
--oruga-table-th-border $table-th-border 2px solid $grey-lighter
--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