# Table
Tabulated data are sometimes needed, it's even better when it's responsive
# Examples
# Base
# Sandbox
# Selection
# Pagination
# Async Data
# Checkable
# Sticky
# Detailed
# Searchable
# Draggable rows/columns
# Class props
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 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Jesse | Simmons | 2016-10-15 13:43:27 | Male | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |
2 | John | Jacobs | 2016-12-15 06:00:53 | Male | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | |
3 | Tina | Gilbert | 2016-04-26 06:26:28 | Female | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | |
4 | Clarence | Flores | 2016-04-10 10:28:46 | Male | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | |
5 | Brandon | Lee | 2016-12-06 14:38:38 | Female | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | |
6 | Anne | Straus | 2017-12-06 14:38:38 | Female | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | |
7 | Mark | Knopfler | 2018-12-06 14:38:38 | Male | 7 | 7 | 7 | 7 | 7 | 7 | 7 | 7 | 7 | 7 | 7 | 7 | 7 | |
8 | Craig | David | 2019-12-06 14:38:38 | Male | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | |
9 | Dave | Copperfield | 2020-12-06 14:38:38 | Male | 9 | 9 | 9 | 9 | 9 | 9 | 9 | 9 | 9 | 9 | 9 | 9 | 9 | |
10 | Hilary | Nelson | 2021-12-06 14:38:38 | Female | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | |
This is the footer |
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 | |
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 | |
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: { |
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: { |
paginationRounded | Rounded pagination if paginated | boolean | - | |
perPage | How many rows per page (if paginated) | number|string | - | From config table: { |
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: { |
sortIcon | Sets the header sorting icon | string | - | From config table: { |
sortIconSize | Sets the size of the sorting icon | string | small , medium , large | From config table: { |
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 fielddirection boolean - 'asc' or 'desc'event Event - native event | |
check | newCheckedRows Array<Object> - checked rows | |
check-all | ||
update:checkedRows | ||
click | row Object - clicked rowindex number - index of clicked row | |
select | row Object - selected rowselected 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 |