# Table
Tabulated data are sometimes needed, it's even better when it's responsive
# 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 |