Bootstrap 5 components designed for Vue.js
This component is part of the CoreUI for Vue.js UI components library, which offers all Bootstrap components designed to work seamlessly with Vue.js.
If you want to use Bootstrap 5 in a Vue.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use CoreUI’s Vue Table component with Bootstrap styles for flexible, framework-consistent UI.
On this page
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.
<template>
<CTable :columns="columns" :items="items" />
</template>
<script setup>
import { CTable } from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>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>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.
<template>
<CTable :columns="columnsVariantExample" :items="itemsVariantExample" />
</template>
<script setup>
import { CTable } from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Since version 4.5.0 also this way.
<template>
<CTable :columns="columnsVariantExample" :items="itemsVariantExample" />
</template>Accented tables
Striped rows
Use striped property to add zebra-striping to any table row within the <CTableBody>.
<template>
<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 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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Striped columns
Use stripedColumns boolean property to add zebra-striping to any table column.
<template>
<CTable stripedColumns>
<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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>These classes can also be added to table variants:
<template>
<CTable color="dark" 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 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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script><template>
<CTable color="dark" stripedColumns>
<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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script><template>
<CTable color="success" 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 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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script><template>
<CTable color="success" stripedColumns>
<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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Hoverable rows
Use hover property to enable a hover state on table rows within a <CTableBody>.
<template>
<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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script><template>
<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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>These hoverable rows can also be combined with the striped variant:
<template>
<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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Active tables
Highlight a table row or cell by adding a active property.
<template>
<CTable :columns="columnsActiveTableExample" :items="itemsActiveTableExample" />
</template>
<script setup>
import { CTable } from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>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><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><template>
<CTable color="dark" :columns="columnsActiveTableExample" :items="itemsActiveTableExample" />
</template>
<script setup>
import { CTable } from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Table borders
Bordered tables
Add bordered property for borders on all sides of the table and cells.
<template>
<CTable bordered :columns="columns" :items="items" />
</template>
<script setup>
import { CTable } from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Border color utilities can be added to change colors:
<template>
<CTable bordered border-color="primary" :columns="columns" :items="items" />
</template>
<script setup>
import { CTable } from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Tables without borders
Add borderless property for a table without borders.
<template>
<CTable borderless :columns="columns" :items="items" />
</template>
<script setup>
import { CTable } from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script><template>
<CTable color="dark" borderless :columns="columns" :items="items" />
</template>
<script setup>
import { CTable } from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Small tables
Add small property to make any <CTable> more compact by cutting all cell padding in half.
<template>
<CTable small :columns="columns" :items="items" />
</template>
<script setup>
import { CTable } from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>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.
<template>
<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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
<template>
<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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>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.
<template>
<CTable>
<CTableHead color="light">
<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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>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><template>
<CTable>
<CTableHead color="dark">
<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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Starting from version 4.5.0 also this way.
<template>
<CTable :columns="columns" :items="items" :tableHeadProps="{ color: 'dark' }" />
</template>Table foot
<template>
<CTable>
<CTableHead color="light">
<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>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Starting from version 4.5.0 also this way.
<template>
<CTable :columns="columns" :footer="footer" :items="items" :tableHeadProps="{ color: 'dark' }" />
</template>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.
<template>
<CTable>
<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>
</template>
<script setup>
import {
CTable,
CTableCaption,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Starting from version 4.5.0 also this way.
<template>
<CTable caption="List of users" :columns="columns" :items="items" />
</template>You can also put the <CTableCaption> on the top of the table with caption="top".
<template>
<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>
</template>
<script setup>
import {
CTable,
CTableCaption,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>Since version 4.5.0 also this way.
<template>
<CTable captionTop="List of users" :columns="columns" :items="items" />
</template>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}".
<template>
<CTable responsive>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script><template>
<CTable responsive="sm">
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script><template>
<CTable responsive="md">
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script><template>
<CTable responsive="lg">
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script><template>
<CTable responsive="xl">
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script><template>
<CTable responsive="xxl">
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</template>
<script setup>
import {
CTable,
CTableHead,
CTableRow,
CTableHeaderCell,
CTableBody,
CTableDataCell,
} from '@coreui/vue'
const 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' },
},
]
const 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 } },
},
]
const columnsVariantExample = [
{ key: 'class', _props: { scope: 'col' } },
{ key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
{ key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
]
const 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' },
},
]
const 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' },
},
]
const 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 } },
},
]
const footer = ['Footer', 'Footer', 'Footer', 'Footer']
</script>