Skip to content

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.