Table

Display a table using table elements.

Usage

Utilise our compositional table components TableContainer, Table, TableData & TableHeader to construct a styled table.

Name Email Location
Ryan Ederyan.ede@cudoventures.comEngland
Ryan Ede 2ryan.ede+2@cudoventures.comScotland
Ryan Ede 3ryan.ede+3@cudoventures.comIreland
Ryan Ede 4ryan.ede+4@cudoventures.comWales
<template>
  <CTableContainer class="w-full">
    <CTable>
      <template #headers>
        <CTableHeader>
          Name
        </CTableHeader>
        <CTableHeader>
          Email
        </CTableHeader>
        <CTableHeader>
          Location
        </CTableHeader>
      </template>
      <template #rows>
        <tr
          v-for="item in [
            {
              name: 'Ryan Ede',
              email: 'ryan.ede@cudoventures.com',
              location: 'England',
            },
            {
              name: 'Ryan Ede 2',
              email: 'ryan.ede+2@cudoventures.com',
              location: 'Scotland',
            },
            {
              name: 'Ryan Ede 3',
              email: 'ryan.ede+3@cudoventures.com',
              location: 'Ireland',
            },
            {
              name: 'Ryan Ede 4',
              email: 'ryan.ede+4@cudoventures.com',
              location: 'Wales',
            },
          ]"
          :key="item.name"
        >
          <CTableData>{{ item.name }}</CTableData>
          <CTableData>{{ item.email }}</CTableData>
          <CTableData>{{ item.location }}</CTableData>
        </tr>
      </template>
    </CTable>
  </CTableContainer>
</template>

Bordered

For a bordered table, the CTableContainer component accepts a border prop.

Name Email Location
Ryan Ederyan.ede@cudoventures.comEngland
Ryan Ede 2ryan.ede+2@cudoventures.comScotland
Ryan Ede 3ryan.ede+3@cudoventures.comIreland
Ryan Ede 4ryan.ede+4@cudoventures.comWales
<template>
  <CTableContainer
    class="w-full"
    border
  >
    <CTable>
      <template #headers>
        <CTableHeader>
          Name
        </CTableHeader>
        <CTableHeader>
          Email
        </CTableHeader>
        <CTableHeader>
          Location
        </CTableHeader>
      </template>
      <template #rows>
        <tr
          v-for="item in [
            {
              name: 'Ryan Ede',
              email: 'ryan.ede@cudoventures.com',
              location: 'England',
            },
            {
              name: 'Ryan Ede 2',
              email: 'ryan.ede+2@cudoventures.com',
              location: 'Scotland',
            },
            {
              name: 'Ryan Ede 3',
              email: 'ryan.ede+3@cudoventures.com',
              location: 'Ireland',
            },
            {
              name: 'Ryan Ede 4',
              email: 'ryan.ede+4@cudoventures.com',
              location: 'Wales',
            },
          ]"
          :key="item.name"
        >
          <CTableData>{{ item.name }}</CTableData>
          <CTableData>{{ item.email }}</CTableData>
          <CTableData>{{ item.location }}</CTableData>
        </tr>
      </template>
    </CTable>
  </CTableContainer>
</template>

Props

TableContainer

border
boolean