Oruga

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 ​

'Classes applied to the element'

Table component ​

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

html
<o-table></o-table>

Props ​

Prop nameDescriptionTypeValuesDefault
ariaCurrentLabelAccessibility label for the pagination current page button.string-
From config:
table: {
  ariaCurrentLabel: undefined
}
ariaNextLabelAccessibility label for the pagination next page button.string-
From config:
table: {
  ariaNextLabel: undefined
}
ariaPageLabelAccessibility label for the pagination page button.string-
From config:
table: {
  ariaPageLabel: undefined
}
ariaPreviousLabelAccessibility label for the pagination previous page button.string-
From config:
table: {
  ariaPreviousLabel: undefined
}
backendFilteringColumns won't be filtered with Javascript, use with searchable prop to the columns to filter in your backendboolean-
From config:
table: {
  backendFiltering: false
}
backendPaginationRows won't be paginated with Javascript, use with page-change event to paginate in your backendboolean-false
backendSortingColumns won't be sorted with Javascript, use with sort event to sort in your backendboolean-
From config:
table: {
  backendSorting: false
}
borderedBorder to all cellsboolean-
From config:
table: {
  bordered: false
}
checkableRows can be checked (multiple)boolean-false
checkboxPositionPosition of the checkbox when checkable (if checkable)"left" | "right"left, right
From config:
table: {
  checkboxPosition: "left"
}
checkboxVariantColor of the checkbox when checkable (if checkable)stringprimary, info, success, warning, danger, and any other custom color
From config:
table: {
  checkboxVariant: undefined
}
checkedRowsSet which rows are checked, use v-model:checkedRows to make it two-way binding (if checkable)unknown[]-[]
columnsTable columnsTableColumn<unknown>[]-
currentPageCurrent page of table data (if paginated), use v-model:currentPage to make it two-way bindingnumber-1
customCompareDefine 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)-
customDetailRowEnable custom style on details (if detailed)boolean-false
dataTable dataunknown[]-
debounceSearchFiltering debounce time (in milliseconds)number-
From config:
table: {
  debounceSearch: undefined
}
defaultSortSets the default sort column and order — e.g. 'first_name' or ['first_name', 'desc']'desc'] | [string, 'asc' | string-
From config:
table: {
  defaultSort: undefined
}
defaultSortDirectionSets the default sort column direction on the first click'asc'|'desc'asc, desc
From config:
table: {
  defaultSortDirection: "asc"
}
detailIconIcon name of detail action (if detailed)string-
From config:
table: {
  detailIcon: "chevron-right"
}
detailTransitionstring-
From config:
table: {
  detailTransition: "slide"
}
detailedAllow row detailsboolean-false
detailedRowsSet 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[]-[]
draggableAllows rows to be draggableboolean-false
draggableColumnAllows columns to be draggableboolean-false
emptyIconIcon to be shown when the table is emptystring-
From config:
table: {
  emptyIcon: undefined
}
emptyIconSizeSize of empty iconstringsmall, medium, large
From config:
table: {
  emptyIconSize: "large"
}
emptyLabelLabel to be shown when the table is emptystring-
From config:
table: {
  emptyLabel: undefined
}
filtersEventAdd a native event to filterstring-""
filtersIconIcon of the column search inputstring-
From config:
table: {
  filterIcon: undefined
}
filtersPlaceholderPlaceholder of the column search inputstring-
From config:
table: {
  filterPlaceholder: undefined
}
headerCheckableShow check/uncheck all checkbox in table header when checkable (if checkable)boolean-true
heightTable fixed heightnumber | string-
hoverableRows are highlighted when hoveringboolean-
From config:
table: {
  hoverable: false
}
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
table: {
  iconPack: undefined
}
isDetailedVisibleControls the visibility of the trigger that toggles the detailed rows (if detailed)((row: unknown) => boolean)-
From config:
table: {
  isDetailedVisible:
}
isRowCheckableCustom method to verify if a row is checkable (if checkable)((row: unknown) => boolean)-
From config:
table: {
  isRowCheckable:
}
isRowCheckedCustom method to verify if a row is checked (if checkable)((row: unknown) => boolean)-
isRowSelectableCustom method to verify if a row is selectable, works when is selectable((row: unknown) => boolean)-true
loadingEnable loading stateboolean-false
loadingIconIcon for the loading statestring-
From config:
table: {
  loadingIcon: "loading"
}
loadingLabelLabel for the loading statestring-
From config:
table: {
  loadingLabel: undefined
}
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
table: {
  mobileBreakpoint: undefined
}
mobileCardsRows appears as cards on mobile (collapse rows)boolean-
From config:
table: {
  mobileCards: true
}
mobileSortPlaceholderSelect placeholder text when nothing is selected (if mobileCards)string-
From config:
table: {
  mobileSortPlaceholder: undefined
}
narrowedMakes the cells narrowerboolean-
From config:
table: {
  narrowed: false
}
overrideOverride existing theme classes completelyboolean-
paginatedAdds pagination to the tableboolean-
From config:
table: {
  paginated: false
}
paginationOrderPagination buttons order (if paginated)"centered" | "left" | "right"centered, right, left
From config:
table: {
  paginationOrder: undefined
}
paginationPositionPagination position (if paginated)"both" | "bottom" | "top"bottom, top, both
From config:
table: {
  paginationPosition: "bottom"
}
paginationRoundedEnable rounded pagination buttons (if paginated)boolean-
From config:
table: {
  paginationRounded: false
}
paginationSimpleEnable simple style pagination (if paginated)boolean-
From config:
table: {
  paginationSimple: false
}
paginationSizeSize of pagination (if paginated)stringsmall, medium, large
From config:
table: {
  paginationSize: "small"
}
perPageHow many rows per page (if paginated)number | string-
From config:
table: {
  perPage: 20
}
rowKeyUse a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended)string-
From config:
table: {
  rowKey: undefined
}
scrollableAdd a horizontal scrollbar when table is too wideboolean-
selectableTable can be focused and user can select rows. Rows can be navigate with keyboard arrows and are highlighted when hovering.boolean-
From config:
table: {
  selectable: false
}
selectedSet which row is selected, use v-model:selected to make it two-way binding (if selectable)unknown-
showDetailIconAllow detail icon and column to be visible (if detailed)boolean-
From config:
table: {
  showDetailIcon: true
}
showHeaderShow headerboolean-
From config:
table: {
  showHeader: true
}
sortIconSets the header sorting iconstring-
From config:
table: {
  sortIcon: "arrow-up"
}
sortIconSizeSets the size of the sorting iconstringsmall, medium, large
From config:
table: {
  sortIconSize: "small"
}
stickyCheckboxMake the checkbox column sticky (if checkable)boolean-false
stickyHeaderShow a sticky table headerboolean-false
stripedWhether table is stripedboolean-
From config:
table: {
  striped: false
}
tdAttrsAdds native attributes to column td element of a row((row: unknown, column: TableColumn<unknown>) => object)-
thAttrsAdds native attributes to a column th element((column: TableColumn<unknown>) => object)-
totalTotal number of table data if backend-pagination is enablednumber-0

Events ​

Event namePropertiesDescription
page-changepage number - updated pageon pagination page change event
dblclickrow T - row data
index number - index of clicked row
event Event - native click event		on row double click event
mouseenterrow T - row data
index number - index of clicked row
event Event - native mouseenter event		on row mouseenter event
mouseleaverow T - row data
index number - index of clicked row
event Event - native mouseleave event		on row mouseleave event
contextmenurow T - row data
index number - index of clicked row
event Event - native contextmenu event		on row right click event
cell-clickrow T - row data
column TableColumn - column data
index number - row index
colindex number - column index
event Event - native click event		on cell click event
update:currentPagevalue number - updated currentPage propcurrentPage prop two-way binding
processedvalue TableRow[] - computed table rowsis emitted each time the table data is processed into rows
update:selectedvalue T - updated select propselect prop two-way binding
selectnewRow T - new select value
oldRow T - old select value		on row select event
checkvalue T[] - all checked rows
row T - row data		on row checked event
check-allvalue T[] - all checked rowson all rows checked event
update:checkedRowsvalue T[] - updated checkedRows propcheckedRows prop two-way binding
sortcolumn TableColumn - column data
direction string - 'asc' or 'desc'
event Event - native event		on column sort change event
filters-changefilters object - filter objecton filter change event
filters-eventfiltersEvent string - props filtersEvent value
filters object - filter object
event Event - native event		on native filter event based on props filtersEvent
update:detailedRowsvalue T[] - updated detailedRows propdetailedRows prop two-way binding
details-openrow T - row dataon details open event
details-closerow T - row dataon details close event
clickrow T - row data
index number - index of clicked row
event Event - native click event		on row click event
dragstartrow T - row data
index number - index of draged row
event DragEvent - native dragstart event		on row dragstart event
dragendrow T - row data
index number - index of draged row
event DragEvent - native dragend event		on row dragend event
droprow T - row data
index number - index of draged row
event DragEvent - native drop event		on row drop event
dragleaverow T - row data
index number - index of draged row
event DragEvent - native dragleave event		on row dragleave event
dragoverrow T - row data
index number - index of draged row
event DragEvent - native dragover event		on row dragover event
columndragstartcolumn TableColumn - column data
index number - index of draged column
event DragEvent - native columndragstart event		on column columndragstart event
columndragendcolumn TableColumn - column data
index number - index of draged column
event DragEvent - native columndragend event		on column columndragend event
columndropcolumn TableColumn - column data
index number - index of draged column
event DragEvent - native columndrop event		on column columndrop event
columndragleavecolumn TableColumn - column data
index number - index of draged column
event DragEvent - native columndragleave event		on column columndragleave event
columndragovercolumn TableColumn - column data
index number - index of draged column
event DragEvent - native columndragover event		on column columndragover event

Slots ​

NameDescriptionBindings
defaultPlace o-table-column here
beforePlace extra o-table-column components here, even if you have some columns defined by prop
afterPlace extra o-table-column components here, even if you have some columns defined by prop
paginationOverride pagination labelcurrent number - current page
per-page number - rows per page
total number - total rows count
change (page: number): void - on page change event
top-leftAdditional slot if table is paginated
captionDefine a table caption here
preheaderDefine preheader content here
check-allOverride check all checkboxis-all-checked boolean - if all rows are checked
is-all-uncheckable boolean - if check all is uncheckable
check-all (): void - check all function
detailPlace row detail content hererow T - row content
index number - row index
emptyDefine content if table is empty
footerDefine a custom footercolumn-count number - counts of visible columns
row-count number - counts of visible rows
loadingOverride loading componentloading boolean - is loading state enabled
bottom-leftAdditional slot if table is paginated

TableColumn component ​

html
<o-table-column></o-table-column>

Props ​

Prop nameDescriptionTypeValuesDefault
customSearchDefine a custom filter funtion for the search((row: unknown, filter: string) => boolean)-
customSortDefine a custom sort function((a: unknown, b: unknown, isAsc: boolean) => number)-
fieldDefine an object property key if data is an objectstring-
formatterProvide a formatter function to edit the output((value: unknown, row: unknown) => string)-
headerSelectableMake header selectableboolean-false
labelDefine the column labelstring-
numericDefine column value as numberboolean-false
positionPosition of the column content"centered" | "left" | "right"left, centered, right
searchableEnable an additional searchbar below the column headerboolean-false
sortableEnable column sortabilityboolean-false
stickyWhether the column is sticky or notboolean-false
subheadingDefine a column sub headingstring-
tdAttrsAdds native attributes to tdobject-
thAttrsAdds native attributes to thobject-
visibleDefine whether the column is visible or notboolean-true
widthColumn fixed widthnumber | string-

Slots ​

NameDescriptionBindings
defaultDefault Slotrow T - row data
column TableColumn - column definition
index number - row index
colindex number - column index
toggle-details (): void - toggle details function
headerOverride header labelcolumn TableColumn - column definition
index number - column index
subheadingOverride subheading labelcolumn TableColumn - column definition
index number - column index
searchableOverride searchable inputcolumn TableColumn - column definition
index number - column index
filters object - active filters object

Sass variables ​

Current theme ➜ Oruga

SASS VariableDefault
$table-background-color#fff
$table-background#f5f5f5
$table-boder1px solid transparent
$table-border-radiusvar(--#{$prefix}base-border-radius)
$table-card-box-shadow0 2px 3px rgba(var(--#{$prefix}black), 0.1), 0 0 0 1px rgba(var(--#{$prefix}black), 0.1)
$table-card-cell-font-weight600
$table-card-cell-padding0 0.5em 0 0
$table-card-cell-text-alignleft
$table-card-detail-margin-1rem 0 0 0
$table-card-margin0 0 1rem 0
$table-colorblack
$table-current-sort-border-colorvar(--#{$prefix}grey)
$table-current-sort-font-weight700
$table-current-sort-hover-border-colorvar(--#{$prefix}grey)
$table-detail-background#fafafa
$table-detail-box-shadowinset 0 1px 3px var(--#{$prefix}grey)
$table-detail-chevron-colorvar(--#{$prefix}primary)
$table-detail-chevron-width40px
$table-detail-padding1rem
$table-focus-border-colorvar(--#{$prefix}primary)
$table-focus-box-shadow0 0 0 0.125em rgba(var(--#{$prefix}primary), 0.25)
$table-hoverable-background-color#fafafa
$table-narrow-padding0.25em 0.5em
$table-row-active-background-colorvar(--#{$prefix}primary)
$table-row-active-colorvar(--#{$prefix}primary-invert)
$table-sticky-header-height300px
$table-sticky-zindex1
$table-striped-background-color#fafafa
$table-td-border1px solid var(--#{$prefix}grey-lighter)
$table-td-padding0.5em 0.75em
$table-th-border2px solid var(--#{$prefix}grey-lighter)
$table-th-checkbox-width40px
$table-th-color#363636
$table-th-detail-width14px
$table-th-font-weight600
$table-th-padding0.5em 0.75em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$table-sticky-header-height300px

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault
$table-head-bginitial
$table-head-colorinitial
$table-head-border-widthvar(--#{$prefix}border-width)
$table-sticky-zindex1
$table-sticky-bginitial
$table-sticky-colorinitial
$table-sticky-header-height350px
$table-detail-padding0.5rem 0.75rem
$table-detail-bgvar(--#{$prefix}gray-light)
$table-sortable-hover-border-colorvar(--#{$prefix}secondary)
$table-current-sort-bgvar(--#{$prefix}gray-light)
$table-card-spacer$spacer

See ➜ 📄 Full scss file

Released under the MIT License.

Copyright © 2020-2024 Walter Tommasi