Table
Tabulated data are sometimes needed, it's even better when it's responsive
## Examples
Base
Show code
Customise
Show code
Selection
Show code
Checkable
Show code
Detailed
Show code
Pagination
Show code
Async Data
Show code
Sticky
Show code
Searchable
Show code
Draggable rows/columns
Show code
## Class props
## Table component
Tabulated data are sometimes needed, it's even better when it's responsive
html
<o-table></o-table>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
ariaCurrentLabel | Accessibility label for the pagination current page button. | string | - | From config: table: { |
ariaNextLabel | Accessibility label for the pagination next page button. | string | - | From config: table: { |
ariaPageLabel | Accessibility label for the pagination page button. | string | - | From config: table: { |
ariaPreviousLabel | Accessibility label for the pagination previous page button. | string | - | From config: table: { |
backendFiltering | Columns won't be filtered with Javascript, use with searchable prop to the columns to filter in your backend | boolean | - | From config: table: { |
backendPagination | Rows won't be paginated with Javascript, use with page-change event to paginate in your backend | boolean | - | false |
backendSorting | Columns won't be sorted with Javascript, use with sort event to sort in your backend | boolean | - | From config: table: { |
bordered | Border to all cells | boolean | - | From config: table: { |
checkable | Rows can be checked (multiple) | boolean | - | false |
checkboxPosition | Position of the checkbox when checkable (if checkable) | "left" | "right" | left , right | From config: table: { |
checkboxVariant | Color of the checkbox when checkable (if checkable) | string | primary , info , success , warning , danger , and any other custom color | From config: table: { |
checkedRows | Set which rows are checked, use v-model:checkedRows to make it two-way binding (if checkable) | unknown[] | - | [] |
columns | Table columns | TableColumn<unknown>[] | - | |
currentPage | Current page of table data (if paginated), use v-model:currentPage to make it two-way binding | number | - | 1 |
customCompare | Define a custom comparison function to check whether two row elements are equal. By default a rowKey comparison is performed if given. Otherwise a simple object comparison is done. | ((a: unknown, b: unknown) => boolean) | - | |
customDetailRow | Enable custom style on details (if detailed) | boolean | - | false |
data | Table data | unknown[] | - | |
debounceSearch | Filtering debounce time (in milliseconds) | number | - | From config: table: { |
defaultSort | Sets the default sort column and order — e.g. 'first_name' or ['first_name', 'desc'] | 'desc'] | [string, 'asc' | string | - | From config: table: { |
defaultSortDirection | Sets the default sort column direction on the first click | 'asc'|'desc' | asc , desc | From config: table: { |
detailIcon | Icon name of detail action (if detailed) | string | - | From config: table: { |
detailTransition | string | - | From config: table: { | |
detailed | Allow row details | boolean | - | false |
detailedRows | Set which rows have opened details, use v-model:detailedRows to make it two-way binding (if detailed).Ideal to open details via vue-router. (A unique key is required; check rowKey prop) | unknown[] | - | [] |
draggable | Allows rows to be draggable | boolean | - | false |
draggableColumn | Allows columns to be draggable | boolean | - | false |
emptyIcon | Icon to be shown when the table is empty | string | - | From config: table: { |
emptyIconSize | Size of empty icon | string | small , medium , large | From config: table: { |
emptyLabel | Label to be shown when the table is empty | string | - | From config: table: { |
filtersEvent | Add a native event to filter | string | - | "" |
filtersIcon | Icon of the column search input | string | - | From config: table: { |
filtersPlaceholder | Placeholder of the column search input | string | - | From config: table: { |
headerCheckable | Show check/uncheck all checkbox in table header when checkable (if checkable) | boolean | - | true |
height | Table fixed height | number | string | - | |
hoverable | Rows are highlighted when hovering | boolean | - | From config: table: { |
iconPack | Icon pack to use | string | mdi , fa , fas and any other custom icon pack | From config: table: { |
isDetailedVisible | Controls the visibility of the trigger that toggles the detailed rows (if detailed) | ((row: unknown) => boolean) | - | From config: table: { |
isRowCheckable | Custom method to verify if a row is checkable (if checkable) | ((row: unknown) => boolean) | - | From config: table: { |
isRowChecked | Custom method to verify if a row is checked (if checkable) | ((row: unknown) => boolean) | - | |
isRowSelectable | Custom method to verify if a row is selectable, works when is selectable | ((row: unknown) => boolean) | - | true |
loading | Enable loading state | boolean | - | false |
loadingIcon | Icon for the loading state | string | - | From config: table: { |
loadingLabel | Label for the loading state | string | - | From config: table: { |
mobileBreakpoint | Mobile breakpoint as max-width value | string | - | From config: table: { |
mobileCards | Rows appears as cards on mobile (collapse rows) | boolean | - | From config: table: { |
mobileSortPlaceholder | Select placeholder text when nothing is selected (if mobileCards) | string | - | From config: table: { |
narrowed | Makes the cells narrower | boolean | - | From config: table: { |
override | Override existing theme classes completely | boolean | - | |
paginated | Adds pagination to the table | boolean | - | From config: table: { |
paginationOrder | Pagination buttons order (if paginated) | "centered" | "left" | "right" | centered , right , left | From config: table: { |
paginationPosition | Pagination position (if paginated) | "both" | "bottom" | "top" | bottom , top , both | From config: table: { |
paginationRounded | Enable rounded pagination buttons (if paginated) | boolean | - | From config: table: { |
paginationSimple | Enable simple style pagination (if paginated) | boolean | - | From config: table: { |
paginationSize | Size of pagination (if paginated) | string | small , medium , large | From config: table: { |
perPage | How many rows per page (if paginated) | number | string | - | From config: table: { |
rowKey | Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended) | string | - | From config: table: { |
scrollable | Add a horizontal scrollbar when table is too wide | boolean | - | |
selectable | Table can be focused and user can select rows. Rows can be navigate with keyboard arrows and are highlighted when hovering. | boolean | - | From config: table: { |
selected | Set which row is selected, use v-model:selected to make it two-way binding (if selectable) | unknown | - | |
showDetailIcon | Allow detail icon and column to be visible (if detailed) | boolean | - | From config: table: { |
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 (if checkable) | boolean | - | false |
stickyHeader | Show a sticky table header | boolean | - | false |
striped | Whether table is striped | boolean | - | From config: table: { |
tdAttrs | Adds native attributes to column td element of a row | ((row: unknown, column: TableColumn<unknown>) => object) | - | |
thAttrs | Adds native attributes to a column th element | ((column: TableColumn<unknown>) => object) | - | |
total | Total number of table data if backend-pagination is enabled | number | - | 0 |
Events
Event name | Properties | Description |
---|---|---|
page-change | page number - updated page | on pagination page change event |
dblclick | row T - row dataindex number - index of clicked rowevent Event - native click event | on row double click event |
mouseenter | row T - row dataindex number - index of clicked rowevent Event - native mouseenter event | on row mouseenter event |
mouseleave | row T - row dataindex number - index of clicked rowevent Event - native mouseleave event | on row mouseleave event |
contextmenu | row T - row dataindex number - index of clicked rowevent Event - native contextmenu event | on row right click event |
cell-click | row T - row datacolumn TableColumn - column dataindex number - row indexcolindex number - column indexevent Event - native click event | on cell click event |
update:currentPage | value number - updated currentPage prop | currentPage prop two-way binding |
processed | value TableRow[] - computed table rows | is emitted each time the table data is processed into rows |
update:selected | value T - updated select prop | select prop two-way binding |
select | newRow T - new select valueoldRow T - old select value | on row select event |
check | value T[] - all checked rowsrow T - row data | on row checked event |
check-all | value T[] - all checked rows | on all rows checked event |
update:checkedRows | value T[] - updated checkedRows prop | checkedRows prop two-way binding |
sort | column TableColumn - column datadirection string - 'asc' or 'desc'event Event - native event | on column sort change event |
filters-change | filters object - filter object | on filter change event |
filters-event | filtersEvent string - props filtersEvent valuefilters object - filter objectevent Event - native event | on native filter event based on props filtersEvent |
update:detailedRows | value T[] - updated detailedRows prop | detailedRows prop two-way binding |
details-open | row T - row data | on details open event |
details-close | row T - row data | on details close event |
click | row T - row dataindex number - index of clicked rowevent Event - native click event | on row click event |
dragstart | row T - row dataindex number - index of draged rowevent DragEvent - native dragstart event | on row dragstart event |
dragend | row T - row dataindex number - index of draged rowevent DragEvent - native dragend event | on row dragend event |
drop | row T - row dataindex number - index of draged rowevent DragEvent - native drop event | on row drop event |
dragleave | row T - row dataindex number - index of draged rowevent DragEvent - native dragleave event | on row dragleave event |
dragover | row T - row dataindex number - index of draged rowevent DragEvent - native dragover event | on row dragover event |
columndragstart | column TableColumn - column dataindex number - index of draged columnevent DragEvent - native columndragstart event | on column columndragstart event |
columndragend | column TableColumn - column dataindex number - index of draged columnevent DragEvent - native columndragend event | on column columndragend event |
columndrop | column TableColumn - column dataindex number - index of draged columnevent DragEvent - native columndrop event | on column columndrop event |
columndragleave | column TableColumn - column dataindex number - index of draged columnevent DragEvent - native columndragleave event | on column columndragleave event |
columndragover | column TableColumn - column dataindex number - index of draged columnevent DragEvent - native columndragover event | on column columndragover event |
Slots
Name | Description | Bindings |
---|---|---|
default | Place o-table-column here | |
before | Place extra o-table-column components here, even if you have some columns defined by prop | |
after | Place extra o-table-column components here, even if you have some columns defined by prop | |
pagination | Override pagination label | current number - current pageper-page number - rows per pagetotal number - total rows countchange (page: number): void - on page change event |
top-left | Additional slot if table is paginated | |
caption | Define a table caption here | |
preheader | Define preheader content here | |
check-all | Override check all checkbox | is-all-checked boolean - if all rows are checkedis-all-uncheckable boolean - if check all is uncheckablecheck-all (): void - check all function |
detail | Place row detail content here | row T - row contentindex number - row index |
empty | Define content if table is empty | |
footer | Define a custom footer | column-count number - counts of visible columnsrow-count number - counts of visible rows |
loading | Override loading component | loading boolean - is loading state enabled |
bottom-left | Additional slot if table is paginated |
## TableColumn component
html
<o-table-column></o-table-column>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
customSearch | Define a custom filter funtion for the search | ((row: unknown, filter: string) => boolean) | - | |
customSort | Define a custom sort function | ((a: unknown, b: unknown, isAsc: boolean) => number) | - | |
field | Define an object property key if data is an object | string | - | |
formatter | Provide a formatter function to edit the output | ((value: unknown, row: unknown) => string) | - | |
headerSelectable | Make header selectable | boolean | - | false |
label | Define the column label | string | - | |
numeric | Define column value as number | boolean | - | false |
position | Position of the column content | "centered" | "left" | "right" | left , centered , right | |
searchable | Enable an additional searchbar below the column header | boolean | - | false |
sortable | Enable column sortability | boolean | - | false |
sticky | Whether the column is sticky or not | boolean | - | false |
subheading | Define a column sub heading | string | - | |
tdAttrs | Adds native attributes to td | object | - | |
thAttrs | Adds native attributes to th | object | - | |
visible | Define whether the column is visible or not | boolean | - | true |
width | Column fixed width | number | string | - |
Slots
Name | Description | Bindings |
---|---|---|
default | Default Slot | row T - row datacolumn TableColumn - column definitionindex number - row indexcolindex number - column indextoggle-details (): void - toggle details function |
header | Override header label | column TableColumn - column definitionindex number - column index |
subheading | Override subheading label | column TableColumn - column definitionindex number - column index |
searchable | Override searchable input | column TableColumn - column definitionindex number - column indexfilters object - active filters object |
## Sass variables
Current theme ➜ Oruga
SASS Variable | Default |
---|---|
$table-background-color | #fff |
$table-background | #f5f5f5 |
$table-boder | 1px solid transparent |
$table-border-radius | var(--#{$prefix}base-border-radius) |
$table-card-box-shadow | 0 2px 3px rgba(var(--#{$prefix}black), 0.1), 0 0 0 1px rgba(var(--#{$prefix}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 | var(--#{$prefix}grey) |
$table-current-sort-font-weight | 700 |
$table-current-sort-hover-border-color | var(--#{$prefix}grey) |
$table-detail-background | #fafafa |
$table-detail-box-shadow | inset 0 1px 3px var(--#{$prefix}grey) |
$table-detail-chevron-color | var(--#{$prefix}primary) |
$table-detail-chevron-width | 40px |
$table-detail-padding | 1rem |
$table-focus-border-color | var(--#{$prefix}primary) |
$table-focus-box-shadow | 0 0 0 0.125em rgba(var(--#{$prefix}primary), 0.25) |
$table-hoverable-background-color | #fafafa |
$table-narrow-padding | 0.25em 0.5em |
$table-row-active-background-color | var(--#{$prefix}primary) |
$table-row-active-color | var(--#{$prefix}primary-invert) |
$table-sticky-header-height | 300px |
$table-sticky-zindex | 1 |
$table-striped-background-color | #fafafa |
$table-td-border | 1px solid var(--#{$prefix}grey-lighter) |
$table-td-padding | 0.5em 0.75em |
$table-th-border | 2px solid var(--#{$prefix}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 ➜ 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-sticky-header-height | 350px |
$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-card-spacer | $spacer |
See ➜ 📄 Full scss file