Documentation and examples for opt-in styling of tables.
Available in Other JavaScript Frameworks
CoreUI Vue Table Component is also available for Angular, Bootstrap, and React. Explore framework-specific implementations below:
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>