refactor: update examples
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,995 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<DocsCallout name="Table" href="components/table" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Basic example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Using the most basic table CoreUI, here's how
|
||||
<code><CTable></code>-based tables look in CoreUI.
|
||||
</p>
|
||||
<Example href="components/table">
|
||||
<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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Variants</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Use contextual classes to color tables, table rows or individual
|
||||
cells.
|
||||
</p>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Striped rows</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Use <code>striped</code> property to add zebra-striping to any table
|
||||
row within the <code><CTableBody></code>.
|
||||
</p>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
These classes can also be added to table variants:
|
||||
</p>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Hoverable rows</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Use <code>hover</code> property to enable a hover state on table
|
||||
rows within a <code><CTableBody></code>.
|
||||
</p>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Active tables</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Bordered tables</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add <code>bordered</code> property for borders on all sides of the
|
||||
table and cells.
|
||||
</p>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
|
||||
Border color utilities </a
|
||||
> can be added to change colors:
|
||||
</p>
|
||||
<Example href="components/table#bordered-tables">
|
||||
<CTable bordered borderColor="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>
|
||||
</Example>
|
||||
</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-medium-emphasis small">
|
||||
Add <code>borderless</code> property for a table without borders.
|
||||
</p>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Small tables</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add <code>small</code> property to make any
|
||||
<code><CTable></code> more compact by cutting all cell
|
||||
<code>padding</code> in half.
|
||||
</p>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Vertical alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis 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>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Nesting</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Border styles, active styles, and table variants are not inherited
|
||||
by nested tables.
|
||||
</p>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Table head</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis 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>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Table foot</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Captions</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis 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>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
You can also put the <code><CTableCaption></code> on the top
|
||||
of the table with <code>caption="top"</code>.
|
||||
</p>
|
||||
<Example href="components/table#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Tables",
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user