Table
Tabulated data are sometimes needed, it's even better when it's responsive
Examples
Base
Show code
Customise
Show code
Selection
Selection: { "id": 2, "first_name": "John", "last_name": "Jacobs", "date": "2016-12-15 06:00:53", "gender": "Male" }
Show code
Checkable
Total checked: 2
Show code
Detailed
Monopoly | 57 | 100 | 57% | |
Scrabble | 23 | 84 | 27% | |
Chess | 37 | 61 | 61% | |
Battleships | 14 | 56 | 25% | |
Show code
Pagination
Page: 1
Show code
Async Data
Show code
Sticky
Show code
Searchable
You can debounce search filter to avoid multiple filtering when typing.
You can also customize the search input using a scoped slot.
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
Show code
Class props
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 | ||
trCheckedClass | Class of the Table row when checkable and checked. 👉 Select a row of the table to see it in action! | checkable | ||
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. |
Table component
html
<o-table></o-table>
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) | boolean | - | |
checkboxPosition | Position of the checkbox (if checkable is true) | string | left , right | 'left' |
checkboxVariant | Color of the checkbox when checkable, optional | string | primary , info , success , warning , danger , and any other custom color | undefined |
checkedRows | Set which rows are checked, use v-model:checkedRows to make it two-way binding | array | - | [] |
columns | Table columns | array | - | [] |
currentPage | Current page of table data (if paginated), use v-model:currentPage 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 | boolean | - | ||
paginated | Adds pagination to the table | boolean | - | |
paginationOrder | Pagination buttons order if paginated | string | - | |
paginationPosition | Pagination position (if paginated) | string | bottom , top , bot | From config: table: { |
paginationRounded | Rounded pagination if paginated | boolean | - | |
paginationSize | Size of pagination if paginated | string | - | From config: table: { |
perPage | How many rows per page (if paginated) | number|string | - | From config: table: { |
rowClass | Add a class to row based on the return | func | - | Default function (see source code) |
scrollable | Add a horizontal scrollbar when table is too wide | boolean | - | |
selected | Set which row is selected, use v-model:selected to make it two-way binding | object | - | |
showDetailIcon | Allow chevron 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 | ||
click | row Object - clicked rowindex number - index of clicked row | |
check | newCheckedRows Array<Object> - checked rows | |
check-all | ||
update:checkedRows | ||
select | row Object - selected rowselected Array<Object> - selected rows | |
update:selected | ||
filters-change | ||
details-open | ||
details-close | ||
update:openedDetailed | ||
mouseenter | ||
mouseleave | ||
sort | field string - column fielddirection boolean - 'asc' or 'desc'event Event - native event | |
sorting-priority-removed | ||
dragstart | ||
dragend | ||
drop | ||
dragleave | ||
dragover | ||
columndragstart | ||
columndragend | ||
columndrop | ||
columndragleave | ||
columndragover | ||
update:currentPage |
Slots
Name | Description | Bindings |
---|---|---|
default | ||
pagination | ||
top-left | ||
caption | ||
preheader | ||
detail | ||
empty | ||
footer | ||
loading | ||
bottom-left |
TableColumn component
html
<o-table-column></o-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 | left , 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 | - |
Sass variables
Current theme ➜ Oruga Base
SASS Variable | Default |
---|---|
$table-background-color | #fff |
$table-background | #f5f5f5 |
$table-boder | 1px solid transparent |
$table-border-radius | $base-border-radius |
$table-card-box-shadow | 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) |
$table-card-cell-font-weight | 600 |
$table-card-cell-padding | 0 0.5em 0 0 |
$table-card-cell-text-align | left |
$table-card-detail-margin | -1rem 0 0 0 |
$table-card-margin | 0 0 1rem 0 |
$table-color | black |
$table-current-sort-border-color | $grey |
$table-current-sort-font-weight | 700 |
$table-current-sort-hover-border-color | $grey |
$table-detail-background | #fafafa |
$table-detail-box-shadow | inset 0 1px 3px $grey |
$table-detail-chevron-color | $primary |
$table-detail-chevron-width | 40px |
$table-detail-padding | 1rem |
$table-focus-border-color | $primary |
$table-focus-box-shadow | 0 0 0 0.125em rgba($primary, 0.25) |
$table-hoverable-background-color | #fafafa |
$table-narrow-padding | 0.25em 0.5em |
$table-row-active-background-color | $primary |
$table-row-active-color | $primary-invert |
$table-sticky-header-height | 300px |
$table-sticky-zindex | 1 |
$table-striped-background-color | #fafafa |
$table-td-border | 1px solid $grey-lighter |
$table-td-padding | 0.5em 0.75em |
$table-th-border | 2px solid $grey-lighter |
$table-th-checkbox-width | 40px |
$table-th-color | #363636 |
$table-th-detail-width | 14px |
$table-th-font-weight | 600 |
$table-th-padding | 0.5em 0.75em |
See ➜ 📄 Full scss file
Current theme ➜ Oruga Full
SASS Variable | Default |
---|---|
$table-background-color | #fff |
$table-background | #f5f5f5 |
$table-boder | 1px solid transparent |
$table-border-radius | $base-border-radius |
$table-card-box-shadow | 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) |
$table-card-cell-font-weight | 600 |
$table-card-cell-padding | 0 0.5em 0 0 |
$table-card-cell-text-align | left |
$table-card-detail-margin | -1rem 0 0 0 |
$table-card-margin | 0 0 1rem 0 |
$table-color | black |
$table-current-sort-border-color | $grey |
$table-current-sort-font-weight | 700 |
$table-current-sort-hover-border-color | $grey |
$table-detail-background | #fafafa |
$table-detail-box-shadow | inset 0 1px 3px $grey |
$table-detail-chevron-color | $primary |
$table-detail-chevron-width | 40px |
$table-detail-padding | 1rem |
$table-focus-border-color | $primary |
$table-focus-box-shadow | 0 0 0 0.125em rgba($primary, 0.25) |
$table-hoverable-background-color | #fafafa |
$table-narrow-padding | 0.25em 0.5em |
$table-row-active-background-color | $primary |
$table-row-active-color | $primary-invert |
$table-sticky-header-height | 300px |
$table-sticky-zindex | 1 |
$table-striped-background-color | #fafafa |
$table-td-border | 1px solid $grey-lighter |
$table-td-padding | 0.5em 0.75em |
$table-th-border | 2px solid $grey-lighter |
$table-th-checkbox-width | 40px |
$table-th-color | #363636 |
$table-th-detail-width | 14px |
$table-th-font-weight | 600 |
$table-th-padding | 0.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 Variable | Default |
---|---|
$table-head-bg | initial |
$table-head-color | initial |
$table-head-border-width | var(--#{$prefix}border-width) |
$table-sticky-zindex | 1 |
$table-sticky-bg | initial |
$table-sticky-color | initial |
$table-detail-padding | 0.5rem 0.75rem |
$table-detail-bg | var(--#{$prefix}gray-light) |
$table-sortable-hover-border-color | var(--#{$prefix}secondary) |
$table-current-sort-bg | var(--#{$prefix}gray-light) |
$table-focus-color | var(--#{$prefix}-info-rgb) |
$table-card-spacer | $spacer |
See ➜ 📄 Full scss file