mrholek
988 lines
43 KiB
Vue
988 lines
43 KiB
Vue
<template>
|
|
<CRow>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Basic example</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p class="text-body-secondary small">
|
|
Using the most basic table CoreUI, here's how
|
|
<code><CTable></code>-based tables look in CoreUI.
|
|
</p>
|
|
<DocsExample href="components/table.html">
|
|
<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>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Variants</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p class="text-body-secondary small">
|
|
Use contextual classes to color tables, table rows or individual
|
|
cells.
|
|
</p>
|
|
<DocsExample href="components/table.html#variants">
|
|
<CTable>
|
|
<CTableHead>
|
|
<CTableRow>
|
|
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
|
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
|
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
|
</CTableRow>
|
|
</CTableHead>
|
|
<CTableBody>
|
|
<CTableRow>
|
|
<CTableHeaderCell scope="row">Default</CTableHeaderCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
</CTableRow>
|
|
<CTableRow color="primary">
|
|
<CTableHeaderCell scope="row">Primary</CTableHeaderCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
</CTableRow>
|
|
<CTableRow color="secondary">
|
|
<CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
</CTableRow>
|
|
<CTableRow color="success">
|
|
<CTableHeaderCell scope="row">Success</CTableHeaderCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
</CTableRow>
|
|
<CTableRow color="danger">
|
|
<CTableHeaderCell scope="row">Danger</CTableHeaderCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
</CTableRow>
|
|
<CTableRow color="warning">
|
|
<CTableHeaderCell scope="row">Warning</CTableHeaderCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
</CTableRow>
|
|
<CTableRow color="info">
|
|
<CTableHeaderCell scope="row">Info</CTableHeaderCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
</CTableRow>
|
|
<CTableRow color="light">
|
|
<CTableHeaderCell scope="row">Light</CTableHeaderCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
</CTableRow>
|
|
<CTableRow color="dark">
|
|
<CTableHeaderCell scope="row">Dark</CTableHeaderCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
<CTableDataCell>Cell</CTableDataCell>
|
|
</CTableRow>
|
|
</CTableBody>
|
|
</CTable>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Striped rows</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p class="text-body-secondary small">
|
|
Use <code>striped</code> property to add zebra-striping to any table
|
|
row within the <code><CTableBody></code>.
|
|
</p>
|
|
<DocsExample href="components/table.html#striped-rows">
|
|
<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>
|
|
</DocsExample>
|
|
<p class="text-body-secondary small">
|
|
These classes can also be added to table variants:
|
|
</p>
|
|
<DocsExample href="components/table.html#striped-rows">
|
|
<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>
|
|
</DocsExample>
|
|
<DocsExample href="components/table.html#striped-rows">
|
|
<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>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Hoverable rows</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p class="text-body-secondary small">
|
|
Use <code>hover</code> property to enable a hover state on table
|
|
rows within a <code><CTableBody></code>.
|
|
</p>
|
|
<DocsExample href="components/table.html#hoverable-rows">
|
|
<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>
|
|
</DocsExample>
|
|
<DocsExample href="components/table.html#hoverable-rows">
|
|
<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>
|
|
</DocsExample>
|
|
<DocsExample href="components/table.html#hoverable-rows">
|
|
<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>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Active tables</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<DocsExample href="components/table.html#active-tables">
|
|
<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>
|
|
</DocsExample>
|
|
<DocsExample href="components/table.html#active-tables">
|
|
<CTable color="dark">
|
|
<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>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Bordered tables</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p class="text-body-secondary small">
|
|
Add <code>bordered</code> property for borders on all sides of the
|
|
table and cells.
|
|
</p>
|
|
<DocsExample href="components/table.html#bordered-tables">
|
|
<CTable bordered>
|
|
<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>
|
|
</DocsExample>
|
|
<p class="text-body-secondary small">
|
|
<a href="https://coreui.io/docs/utilities/borders#border-color">
|
|
Border color utilities
|
|
</a>
|
|
can be added to change colors:
|
|
</p>
|
|
<DocsExample href="components/table.html#bordered-tables">
|
|
<CTable bordered border-color="primary">
|
|
<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>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Tables without borders</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p class="text-body-secondary small">
|
|
Add <code>borderless</code> property for a table without borders.
|
|
</p>
|
|
<DocsExample href="components/table.html#tables-without-borders">
|
|
<CTable borderless>
|
|
<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>
|
|
</DocsExample>
|
|
<DocsExample href="components/table.html#tables-without-borders">
|
|
<CTable color="dark" borderless>
|
|
<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>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Small tables</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p class="text-body-secondary small">
|
|
Add <code>small</code> property to make any
|
|
<code><CTable></code> more compact by cutting all cell
|
|
<code>padding</code> in half.
|
|
</p>
|
|
<DocsExample href="components/table.html#small-tables">
|
|
<CTable small>
|
|
<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>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Vertical alignment</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p class="text-body-secondary small">
|
|
Table cells of <code><CTableHead></code> are always vertical
|
|
aligned to the bottom. Table cells in
|
|
<code><CTableBody></code> inherit their alignment from
|
|
<code><CTable></code> and are aligned to the the top by
|
|
default. Use the align property to re-align where needed.
|
|
</p>
|
|
<DocsExample href="components/table.html#vertical-alignment">
|
|
<CTable align="middle" responsive>
|
|
<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>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Nesting</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p class="text-body-secondary small">
|
|
Border styles, active styles, and table variants are not inherited
|
|
by nested tables.
|
|
</p>
|
|
<DocsExample href="components/table.html#nesting">
|
|
<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>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Table head</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p class="text-body-secondary small">
|
|
Similar to tables and dark tables, use the modifier prop
|
|
<code>color="light"</code> or
|
|
<code>color="dark"</code> to make
|
|
<code><CTableHead></code>s appear light or dark gray.
|
|
</p>
|
|
<DocsExample href="components/table.html#table-head">
|
|
<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>
|
|
</DocsExample>
|
|
<DocsExample href="components/table.html#table-head">
|
|
<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>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Table foot</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<DocsExample href="components/table.html#table-foot">
|
|
<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>
|
|
<CTableHead>
|
|
<CTableRow>
|
|
<CTableDataCell>Footer</CTableDataCell>
|
|
<CTableDataCell>Footer</CTableDataCell>
|
|
<CTableDataCell>Footer</CTableDataCell>
|
|
<CTableDataCell>Footer</CTableDataCell>
|
|
</CTableRow>
|
|
</CTableHead>
|
|
</CTable>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol :xs="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader>
|
|
<strong>Vue Table</strong> <small>Captions</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p class="text-body-secondary small">
|
|
A <code><CTableCaption></code> 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.
|
|
</p>
|
|
<DocsExample href="components/table.html#captions">
|
|
<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>
|
|
</DocsExample>
|
|
<p class="text-body-secondary small">
|
|
You can also put the <code><CTableCaption></code> on the top
|
|
of the table with <code>caption="top"</code>.
|
|
</p>
|
|
<DocsExample href="components/table.html#captions">
|
|
<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>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
</template>
|