Vue Table Component
Documentation and examples for opt-in styling of tables.
Other frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.
How to use Vue Table Component
Due to the widespread use of <CTable>
elements across third-party widgets like calendars and date pickers, CoreUI's tables are opt-in. All table styles are not inherited in CoreUI, meaning any nested tables can be styled independent from the parent.
Using the most basic table CoreUI, here's how <CTable>
-based tables look in CoreUI.
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
In version 4.5.0 we introduced a new way to create a table, similarly to our Smart Table component.
<template>
<CTable :columns="columns" :items="items" />
</template>
<script>
export default {
data: () => {
return {
columns: [
{
key: 'id',
label: '#',
_props: { scope: 'col' },
},
{
key: 'class',
_props: { scope: 'col' },
},
{
key: 'heading_1',
label: 'Heading',
_props: { scope: 'col' },
},
{
key: 'heading_2',
label: 'Heading',
_props: { scope: 'col' },
},
],
items: [
{
id: 1,
class: 'Mark',
heading_1: 'Otto',
heading_2: '@mdo',
_cellProps: { id: { scope: 'row' } },
},
{
id: 2,
class: 'Jacob',
heading_1: 'Thornton',
heading_2: '@fat',
_cellProps: { id: { scope: 'row' } },
},
{
id: 3,
class: 'Larry the Bird',
heading_2: '@twitter',
_cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
},
]
}
},
}
</script>
You can also put all table components together manually as hitherto.
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
Variants
Use contextual classes to color tables, table rows or individual cells.
Class | Heading | Heading |
---|---|---|
Default | Cell | Cell |
Primary | Cell | Cell |
Secondary | Cell | Cell |
Success | Cell | Cell |
Danger | Cell | Cell |
Warning | Cell | Cell |
Info | Cell | Cell |
Light | Cell | Cell |
Dark | Cell | Cell |
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">Default</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="primary">
<CTableHeaderCell scope="row">Primary</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="secondary">
<CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="success">
<CTableHeaderCell scope="row">Success</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="danger">
<CTableHeaderCell scope="row">Danger</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="warning">
<CTableHeaderCell scope="row">Warning</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="info">
<CTableHeaderCell scope="row">Info</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="light">
<CTableHeaderCell scope="row">Light</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="dark">
<CTableHeaderCell scope="row">Dark</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
Since version 4.5.0 also this way.
<template>
<CTable :columns="columnsVariantExample" :items="itemsVariantExample" />
</template>
<script>
export default {
data: () => {
return {
columnsVariantExample: [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
],
itemsVariantExample: [
{
class: 'Default',
heading_1: 'Cell',
heading_2: 'Cell',
_cellProps: { class: { scope: 'row' } },
},
{
class: 'Primary',
heading_1: 'Cell',
heading_2: 'Cell',
_cellProps: { class: { scope: 'row' } },
_props: { color: 'primary' },
},
{
class: 'Secondary',
heading_1: 'Cell',
heading_2: 'Cell',
_cellProps: { class: { scope: 'row' } },
_props: { color: 'secondary' },
},
{
class: 'Success',
heading_1: 'Cell',
heading_2: 'Cell',
_cellProps: { class: { scope: 'row' } },
_props: { color: 'success' },
},
{
class: 'Danger',
heading_1: 'Cell',
heading_2: 'Cell',
_cellProps: { class: { scope: 'row' } },
_props: { color: 'danger' },
},
{
class: 'Warning',
heading_1: 'Cell',
heading_2: 'Cell',
_cellProps: { class: { scope: 'row' } },
_props: { color: 'warning' },
},
{
class: 'Info',
heading_1: 'Cell',
heading_2: 'Cell',
_cellProps: { class: { scope: 'row' } },
_props: { color: 'info' },
},
{
class: 'Light',
heading_1: 'Cell',
heading_2: 'Cell',
_cellProps: { class: { scope: 'row' } },
_props: { color: 'light' },
},
{
class: 'Dark',
heading_1: 'Cell',
heading_2: 'Cell',
_cellProps: { class: { scope: 'row' } },
_props: { color: 'dark' },
},
]
}
},
}
</script>
Accented tables
Striped rows
Use striped
property to add zebra-striping to any table row within the <CTableBody>
.
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable striped>
...
</CTable>
Striped columns
Use stripedColumns
boolean property to add zebra-striping to any table column.
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable stripedColumns>
...
</CTable>
These classes can also be added to table variants:
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable color="dark" striped>
...
</CTable>
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable color="dark" stripedColumns>
...
</CTable>
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable color="success" striped>
...
</CTable>
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable color="success" striped>
...
</CTable>
Hoverable rows
Use hover
property to enable a hover state on table rows within a <CTableBody>
.
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable hover>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable color="dark" hover>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
These hoverable rows can also be combined with the striped variant:
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable striped hover>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
Active tables
Highlight a table row or cell by adding a active
property.
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
As mentioned before since version 4.5.0 we have two ways to generate tables, also with custom properties for rows, and cells.
<template>
<CTable :columns="columnsActiveTableExample" :items="itemsActiveTableExample" />
</template>
<script>
export default {
data: () => {
return {
columnsActiveTableExample: [
{
key: 'id',
label: '#',
_props: { scope: 'col' },
},
{
key: 'class',
_props: { scope: 'col' },
},
{
key: 'heading_1',
label: 'Heading',
_props: { scope: 'col' },
},
{
key: 'heading_2',
label: 'Heading',
_props: { scope: 'col' },
},
],
itemsActiveTableExample: [
{
id: 1,
class: 'Mark',
heading_1: 'Otto',
heading_2: '@mdo',
_props: { active: true },
_cellProps: { id: { scope: 'row' } },
},
{
id: 2,
class: 'Jacob',
heading_1: 'Thornton',
heading_2: '@fat',
_cellProps: { id: { scope: 'row' } },
},
{
id: 3,
class: 'Larry the Bird',
heading_2: '@twitter',
_cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
},
],
}
},
}
</script>
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow active>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2" active>Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<template>
<CTable color="dark" :columns="columnsActiveTableExample" :items="itemsActiveTableExample" />
</template>
<script>
export default {
data: () => {
return {
columnsActiveTableExample: [
{
key: 'id',
label: '#',
_props: { scope: 'col' },
},
{
key: 'class',
_props: { scope: 'col' },
},
{
key: 'heading_1',
label: 'Heading',
_props: { scope: 'col' },
},
{
key: 'heading_2',
label: 'Heading',
_props: { scope: 'col' },
},
],
itemsActiveTableExample: [
{
id: 1,
class: 'Mark',
heading_1: 'Otto',
heading_2: '@mdo',
_props: { active: true },
_cellProps: { id: { scope: 'row' } },
},
{
id: 2,
class: 'Jacob',
heading_1: 'Thornton',
heading_2: '@fat',
_cellProps: { id: { scope: 'row' } },
},
{
id: 3,
class: 'Larry the Bird',
heading_2: '@twitter',
_cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
},
],
}
},
}
</script>
Table borders
Bordered tables
Add bordered
property for borders on all sides of the table and cells.
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable bordered>
...
</CTable>
Border color utilities can be added to change colors:
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable bordered border-color="primary">
...
</CTable>
Tables without borders
Add borderless
property for a table without borders.
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable borderless>
...
</CTable>
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable color="dark" borderless>
...
</CTable>
Small tables
Add small
property to make any <CTable>
more compact by cutting all cell padding
in half.
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable small>
...
</CTable>
Vertical alignment
Table cells of <CTableHead>
are always vertical aligned to the bottom. Table cells in <CTableBody>
inherit their alignment from <CTable>
and are aligned to the the top by default. Use the align property to re-align where needed.
Heading 1 | Heading 2 | Heading 3 | Heading 4 |
---|---|---|---|
This cell inherits vertical-align: middle; from the table | This cell inherits vertical-align: middle; from the table | This cell inherits vertical-align: middle; from the table | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells. |
This cell inherits vertical-align: bottom; from the table row | This cell inherits vertical-align: bottom; from the table row | This cell inherits vertical-align: bottom; from the table row | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells. |
This cell inherits vertical-align: middle; from the table | This cell inherits vertical-align: middle; from the table | This cell is aligned to the top. | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells. |
<CTable align="middle" reponsive>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col" class="w-25">Heading 1</CTableHeaderCell>
<CTableHeaderCell scope="col" class="w-25">Heading 2</CTableHeaderCell>
<CTableHeaderCell scope="col" class="w-25">Heading 3</CTableHeaderCell>
<CTableHeaderCell scope="col" class="w-25">Heading 4</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>This cell inherits <code>vertical-align: middle;</code> from the table</CTableDataCell>
<CTableDataCell>This cell inherits <code>vertical-align: middle;</code> from the table</CTableDataCell>
<CTableDataCell>This cell inherits <code>vertical-align: middle;</code> from the table</CTableDataCell>
<CTableDataCell>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.</CTableDataCell>
</CTableRow>
<CTableRow align="bottom">
<CTableDataCell>This cell inherits <code>vertical-align: bottom;</code> from the table row</CTableDataCell>
<CTableDataCell>This cell inherits <code>vertical-align: bottom;</code> from the table row</CTableDataCell>
<CTableDataCell>This cell inherits <code>vertical-align: bottom;</code> from the table row</CTableDataCell>
<CTableDataCell>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>This cell inherits <code>vertical-align: middle;</code> from the table</CTableDataCell>
<CTableDataCell>This cell inherits <code>vertical-align: middle;</code> from the table</CTableDataCell>
<CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell>
<CTableDataCell>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonsCTableRowate how the vertical alignment works in the preceding cells.</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
# | Class | Heading | Heading | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Mark | Otto | @mdo | ||||||||||||
| |||||||||||||||
3 | Larry the Bird |
<CTable striped>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell colspan="4">
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">Header</CTableHeaderCell>
<CTableHeaderCell scope="col">Header</CTableHeaderCell>
<CTableHeaderCell scope="col">Header</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">A</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">B</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">C</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CTableHeaderCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
Anatomy
Table head
Similar to tables and dark tables, use the modifier prop color="light"
or color="dark"
to make <CTableHead>
s appear light or dark gray.
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<CTable>
<CTableHead color="light">
...
</CTableHead>
<CTableBody>
...
</CTableBody>
</CTable>
If you generate a table using the new method incorporated in version 4.5.0, you have to use tableHeadProps property to pass properties to the table header component.
<template>
<CTable :columns="columns" :items="items" :tableHeadProps="{ color: 'light' }" />
</template>
<script>
export default {
data: () => {
return {
columns: [ ... ],
items: [ ... ]
}
},
}
</script>
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable>
<CTableHead color="dark">
...
</CTableHead>
<CTableBody>
...
</CTableBody>
</CTable>
Starting from version 4.5.0 also this way.
<template>
<CTable :columns="columns" :items="items" :tableHeadProps="{ color: 'dark' }" />
</template>
<script>
export default {
data: () => {
return {
columns: [ ... ],
items: [ ... ]
}
},
}
</script>
Table foot
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<CTable>
<CTableHead color="light">
...
</CTableHead>
<CTableBody>
...
</CTableBody>
<CTableHead>
<CTableRow>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
</CTableRow>
</CTableHead>
</CTable>
Starting from version 4.5.0 also this way.
<template>
<CTable :columns="columns" :footer="footer" :items="items" :tableHeadProps="{ color: 'dark' }" />
</template>
<script>
export default {
data: () => {
return {
columns: [ ... ],
footer: [
'Footer',
'Footer',
'Footer',
'Footer',
],
items: [ ... ]
}
},
}
</script>
Captions
A <CTableCaption>
functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<CTable>
<CTableCaption>List of users</CTableCaption>
<CTableHead>
...
</CTableHead>
<CTableBody>
...
</CTableBody>
</CTable>
Starting from version 4.5.0 also this way.
<template>
<CTable caption="List of users" :columns="columns" :items="items" />
</template>
<script>
export default {
data: () => {
return {
columns: [ ... ],
items: [ ... ]
}
},
}
</script>
You can also put the <CTableCaption>
on the top of the table with caption="top"
.
# | Class | Heading | Heading |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<CTable caption="top">
<CTableCaption>List of users</CTableCaption>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Larry</CTableDataCell>
<CTableDataCell>the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
Since version 4.5.0 also this way.
<template>
<CTable captionTop="List of users" :columns="columns" :items="items" />
</template>
<script>
export default {
data: () => {
return {
columns: [ ... ],
items: [ ... ]
}
},
}
</script>
Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a responsive
property. Or, pick a maximum breakpoint with which to have a responsive table up to by using responsive="{-sm|-md|-lg|-xl|-xxl}"
.
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<CTable responsive>
...
</CTable>
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<CTable responsive="sm">
...
</CTable>
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<CTable responsive="md">
...
</CTable>
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<CTable responsive="lg">
...
</CTable>
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<CTable responsive="xl">
...
</CTable>
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<CTable responsive="xxl">
...
</CTable>
API
CTable
import { CTable } from '@coreui/vue'
// or
import CTable from '@coreui/vue/src/components/table/CTable'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
align | Set the vertical aligment. | string | 'bottom' , 'middle' , 'top' | - |
border-color | Sets the border color of the component to one of CoreUI’s themed colors. | string | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' | - |
bordered | Add borders on all sides of the table and cells. | boolean | - | - |
borderless | Remove borders on all sides of the table and cells. | boolean | - | - |
caption | Put the <caption> on the top of the table. | string | 'top' | string | - |
caption-top 4.5.0+ | Set the text of the table caption and the caption on the top of the table. | string | - | - |
columns 4.5.0+ | Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props') In columns prop each array item represents one column. Item might be specified in two ways: String: each item define column name equal to item value. Object: item is object with following keys available as column configuration: - key (required)(String) - define column name equal to item key. - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word. - _props (Object) - adds classes to all cels in column, ex. _props: { scope: 'col', className: 'custom-class' }, - _style (Object) - adds styles to the column header (useful for defining widths) | (Column | string)[] | - | - |
color | Sets the color context of the component to one of CoreUI’s themed colors. | string | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string | - |
footer 4.5.0+ | Array of objects or strings, where each element represents one cell in the table footer. Example items: ['FooterCell', 'FooterCell', 'FooterCell'] or [{ label: 'FooterCell', _props: { color: 'success' }, ...] | (FooterItem | string)[] | - | - |
hover | Enable a hover state on table rows within a <CTableBody> . | boolean | - | - |
items 4.5.0+ | Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'. Example item: { name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}} | Item[] | - | - |
small | Make table more compact by cutting all cell padding in half. | boolean | - | - |
striped | Add zebra-striping to any table row within the <CTableBody> . | boolean | - | - |
striped-columns 4.4.0+ | Add zebra-striping to any table column. | boolean | - | - |
table-foot-props 4.5.0+ | Properties that will be passed to the table footer component. Properties to CTableFoot component. | object | - | - |
table-head-props 4.5.0+ | Properties that will be passed to the table head component. Properties to CTableHead component. | object | - | - |
CTableBody
import { CTableBody } from '@coreui/vue'
// or
import CTableBody from '@coreui/vue/src/components/table/CTableBody'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
color | Sets the color context of the component to one of CoreUI’s themed colors. | string | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string | - |
CTableDataCell
import { CTableDataCell } from '@coreui/vue'
// or
import CTableDataCell from '@coreui/vue/src/components/table/CTableDataCell'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
active | Highlight a table row or cell. | boolean | - | - |
align | Set the vertical aligment. | string | 'bottom' , 'middle' , 'top' | - |
color | Sets the color context of the component to one of CoreUI’s themed colors. | string | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string | - |
CTableFoot
import { CTableFoot } from '@coreui/vue'
// or
import CTableFoot from '@coreui/vue/src/components/table/CTableFoot'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
color | Sets the color context of the component to one of CoreUI’s themed colors. | string | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string | - |
CTableHead
import { CTableHead } from '@coreui/vue'
// or
import CTableHead from '@coreui/vue/src/components/table/CTableHead'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
color | Sets the color context of the component to one of CoreUI’s themed colors. | string | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string | - |
CTableHeaderCell
import { CTableHeaderCell } from '@coreui/vue'
// or
import CTableHeaderCell from '@coreui/vue/src/components/table/CTableHeaderCell'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
color | Sets the color context of the component to one of CoreUI’s themed colors. | string | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string | - |
CTableRow
import { CTableRow } from '@coreui/vue'
// or
import CTableRow from '@coreui/vue/src/components/table/CTableRow'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
active | Highlight a table row or cell.. | boolean | - | - |
align | Set the vertical aligment. | string | 'bottom' , 'middle' , 'top' | - |
color | Sets the color context of the component to one of CoreUI’s themed colors. | string | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' , string | - |