Menu
Documentation

Table

Tables are a quick way to display lists and collections using the native HTML5 table element.

Rounded examples

Rounded:none

Tables can have different radius factors. Use the rounded prop to change the table's radius.

 Collaborator Expertise Rate Status
Anna VrinkofUX Design$49/hourAvailable
John CambellManagement$74/hourHired
Beth DelanoeProduct$43/hourAvailable
Andrew HiggsProject$69/hourNew
Show code
vue
<script setup lang="ts">
const team = [
  {
    id: 0,
    src: '/img/avatars/22.svg',
    name: 'Anna Vrinkof',
    role: 'UI/UX designer',
    expertise: 'UX Design',
    rate: 49,
    status: 'Available',
  },
  {
    id: 1,
    src: '/img/avatars/3.svg',
    name: 'John Cambell',
    role: 'Sales manager',
    expertise: 'Management',
    rate: 74,
    status: 'Hired',
  },
  {
    id: 2,
    src: '/img/avatars/9.svg',
    name: 'Beth Delanoe',
    role: 'Product designer',
    expertise: 'Product',
    rate: 43,
    status: 'Available',
  },
  {
    id: 3,
    src: '/img/avatars/14.svg',
    name: 'Andrew Higgs',
    role: 'Project manager',
    expertise: 'Project',
    rate: 69,
    status: 'New',
  },
]
</script>

<template>
  <TairoTable rounded="none">
    <template #header>
      <TairoTableHeading uppercase class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            rounded="none"
            color="primary"
          />
        </div>
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Collaborator
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Expertise
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Rate
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Status
      </TairoTableHeading>
    </template>

    <TairoTableRow v-for="member in team" :key="member.id">
      <TairoTableCell class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`table-1-${member.id}`"
            rounded="none"
            color="primary"
          />
        </div>
      </TairoTableCell>

      <TairoTableCell>
        {{ member.name }}
      </TairoTableCell>

      <TairoTableCell light>
        {{ member.expertise }}
      </TairoTableCell>

      <TairoTableCell>${{ member.rate }}/hour</TairoTableCell>

      <TairoTableCell>
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoTableCell>
    </TairoTableRow>
  </TairoTable>
</template>

Rounded:sm

Tables can have different radius factors. Use the rounded prop to change the table's radius.

 Collaborator Expertise Rate Status
Anna VrinkofUX Design$49/hourAvailable
John CambellManagement$74/hourHired
Beth DelanoeProduct$43/hourAvailable
Andrew HiggsProject$69/hourNew
Show code
vue
<script setup lang="ts">
const team = [
  {
    id: 0,
    src: '/img/avatars/22.svg',
    name: 'Anna Vrinkof',
    role: 'UI/UX designer',
    expertise: 'UX Design',
    rate: 49,
    status: 'Available',
  },
  {
    id: 1,
    src: '/img/avatars/3.svg',
    name: 'John Cambell',
    role: 'Sales manager',
    expertise: 'Management',
    rate: 74,
    status: 'Hired',
  },
  {
    id: 2,
    src: '/img/avatars/9.svg',
    name: 'Beth Delanoe',
    role: 'Product designer',
    expertise: 'Product',
    rate: 43,
    status: 'Available',
  },
  {
    id: 3,
    src: '/img/avatars/14.svg',
    name: 'Andrew Higgs',
    role: 'Project manager',
    expertise: 'Project',
    rate: 69,
    status: 'New',
  },
]
</script>

<template>
  <TairoTable rounded="sm">
    <template #header>
      <TairoTableHeading uppercase class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            rounded="sm"
            color="primary"
          />
        </div>
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Collaborator
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Expertise
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Rate
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Status
      </TairoTableHeading>
    </template>

    <TairoTableRow v-for="member in team" :key="member.id">
      <TairoTableCell class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`table-2-${member.id}`"
            rounded="sm"
            color="primary"
          />
        </div>
      </TairoTableCell>

      <TairoTableCell>
        {{ member.name }}
      </TairoTableCell>

      <TairoTableCell light>
        {{ member.expertise }}
      </TairoTableCell>

      <TairoTableCell>${{ member.rate }}/hour</TairoTableCell>

      <TairoTableCell>
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoTableCell>
    </TairoTableRow>
  </TairoTable>
</template>

Rounded:md

Tables can have different radius factors. Use the rounded prop to change the table's radius.

 Collaborator Expertise Rate Status
Anna VrinkofUX Design$49/hourAvailable
John CambellManagement$74/hourHired
Beth DelanoeProduct$43/hourAvailable
Andrew HiggsProject$69/hourNew
Show code
vue
<script setup lang="ts">
const team = [
  {
    id: 0,
    src: '/img/avatars/22.svg',
    name: 'Anna Vrinkof',
    role: 'UI/UX designer',
    expertise: 'UX Design',
    rate: 49,
    status: 'Available',
  },
  {
    id: 1,
    src: '/img/avatars/3.svg',
    name: 'John Cambell',
    role: 'Sales manager',
    expertise: 'Management',
    rate: 74,
    status: 'Hired',
  },
  {
    id: 2,
    src: '/img/avatars/9.svg',
    name: 'Beth Delanoe',
    role: 'Product designer',
    expertise: 'Product',
    rate: 43,
    status: 'Available',
  },
  {
    id: 3,
    src: '/img/avatars/14.svg',
    name: 'Andrew Higgs',
    role: 'Project manager',
    expertise: 'Project',
    rate: 69,
    status: 'New',
  },
]
</script>

<template>
  <TairoTable rounded="md">
    <template #header>
      <TairoTableHeading uppercase class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            rounded="md"
            color="primary"
          />
        </div>
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Collaborator
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Expertise
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Rate
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Status
      </TairoTableHeading>
    </template>

    <TairoTableRow v-for="member in team" :key="member.id">
      <TairoTableCell class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`table-2-${member.id}`"
            rounded="md"
            color="primary"
          />
        </div>
      </TairoTableCell>

      <TairoTableCell>
        {{ member.name }}
      </TairoTableCell>

      <TairoTableCell light>
        {{ member.expertise }}
      </TairoTableCell>

      <TairoTableCell>${{ member.rate }}/hour</TairoTableCell>

      <TairoTableCell>
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoTableCell>
    </TairoTableRow>
  </TairoTable>
</template>

Rounded:lg

Tables can have different radius factors. Use the rounded prop to change the table's radius.

 Collaborator Expertise Rate Status
Anna VrinkofUX Design$49/hourAvailable
John CambellManagement$74/hourHired
Beth DelanoeProduct$43/hourAvailable
Andrew HiggsProject$69/hourNew
Show code
vue
<script setup lang="ts">
const team = [
  {
    id: 0,
    src: '/img/avatars/22.svg',
    name: 'Anna Vrinkof',
    role: 'UI/UX designer',
    expertise: 'UX Design',
    rate: 49,
    status: 'Available',
  },
  {
    id: 1,
    src: '/img/avatars/3.svg',
    name: 'John Cambell',
    role: 'Sales manager',
    expertise: 'Management',
    rate: 74,
    status: 'Hired',
  },
  {
    id: 2,
    src: '/img/avatars/9.svg',
    name: 'Beth Delanoe',
    role: 'Product designer',
    expertise: 'Product',
    rate: 43,
    status: 'Available',
  },
  {
    id: 3,
    src: '/img/avatars/14.svg',
    name: 'Andrew Higgs',
    role: 'Project manager',
    expertise: 'Project',
    rate: 69,
    status: 'New',
  },
]
</script>

<template>
  <TairoTable rounded="lg">
    <template #header>
      <TairoTableHeading uppercase class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            rounded="lg"
            color="primary"
          />
        </div>
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Collaborator
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Expertise
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Rate
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Status
      </TairoTableHeading>
    </template>

    <TairoTableRow v-for="member in team" :key="member.id">
      <TairoTableCell class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`table-6-${member.id}`"
            rounded="lg"
            color="primary"
          />
        </div>
      </TairoTableCell>

      <TairoTableCell>
        {{ member.name }}
      </TairoTableCell>

      <TairoTableCell light>
        {{ member.expertise }}
      </TairoTableCell>

      <TairoTableCell>${{ member.rate }}/hour</TairoTableCell>

      <TairoTableCell>
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoTableCell>
    </TairoTableRow>
  </TairoTable>
</template>

Media examples

Media:none

Tables can have different radius factors. Use the rounded prop to change the table's radius.

 Collaborator Expertise Rate Status View
?

Anna Vrinkof

UI/UX designer

UX Design$49/hourAvailable
?

John Cambell

Sales manager

Management$74/hourHired
?

Beth Delanoe

Product designer

Product$43/hourAvailable
?

Andrew Higgs

Project manager

Project$69/hourNew
Show code
vue
<script setup lang="ts">
const team = [
  {
    id: 0,
    src: '/img/avatars/22.svg',
    name: 'Anna Vrinkof',
    role: 'UI/UX designer',
    expertise: 'UX Design',
    rate: 49,
    status: 'Available',
  },
  {
    id: 1,
    src: '/img/avatars/3.svg',
    name: 'John Cambell',
    role: 'Sales manager',
    expertise: 'Management',
    rate: 74,
    status: 'Hired',
  },
  {
    id: 2,
    src: '/img/avatars/9.svg',
    name: 'Beth Delanoe',
    role: 'Product designer',
    expertise: 'Product',
    rate: 43,
    status: 'Available',
  },
  {
    id: 3,
    src: '/img/avatars/14.svg',
    name: 'Andrew Higgs',
    role: 'Project manager',
    expertise: 'Project',
    rate: 69,
    status: 'New',
  },
]
</script>

<template>
  <TairoTable rounded="none">
    <template #header>
      <TairoTableHeading uppercase class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            rounded="none"
            color="primary"
          />
        </div>
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Collaborator
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Expertise
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Rate
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Status
      </TairoTableHeading>

      <TairoTableHeading uppercase class="p-4">
        <span class="sr-only">View</span>
      </TairoTableHeading>
    </template>

    <TairoTableRow v-for="member in team" :key="member.id">
      <TairoTableCell class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`table-3-${member.id}`"
            rounded="none"
            color="primary"
          />
        </div>
      </TairoTableCell>

      <TairoTableCell>
        <div class="flex gap-2 items-center">
          <BaseAvatar :src="member.src" size="xs" />

          <div class="leading-none">
            <p class="font-sans text-sm font-medium leading-tight">
              {{ member.name }}
            </p>

            <p class="text-muted-600 dark:text-muted-400 font-sans text-xs font-normal">
              {{ member.role }}
            </p>
          </div>
        </div>
      </TairoTableCell>

      <TairoTableCell light>
        {{ member.expertise }}
      </TairoTableCell>

      <TairoTableCell>${{ member.rate }}/hour</TairoTableCell>

      <TairoTableCell>
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoTableCell>
    </TairoTableRow>
  </TairoTable>
</template>

Media:sm

Tables can have different radius factors. Use the rounded prop to change the table's radius.

 Collaborator Expertise Rate Status
?

Anna Vrinkof

UI/UX designer

UX Design$49/hourAvailable
?

John Cambell

Sales manager

Management$74/hourHired
?

Beth Delanoe

Product designer

Product$43/hourAvailable
?

Andrew Higgs

Project manager

Project$69/hourNew
Show code
vue
<script setup lang="ts">
const selected = ref([])
const selectAll = ref(false)

const team = [
  {
    id: 0,
    src: '/img/avatars/22.svg',
    name: 'Anna Vrinkof',
    role: 'UI/UX designer',
    expertise: 'UX Design',
    rate: 49,
    status: 'Available',
  },
  {
    id: 1,
    src: '/img/avatars/3.svg',
    name: 'John Cambell',
    role: 'Sales manager',
    expertise: 'Management',
    rate: 74,
    status: 'Hired',
  },
  {
    id: 2,
    src: '/img/avatars/9.svg',
    name: 'Beth Delanoe',
    role: 'Product designer',
    expertise: 'Product',
    rate: 43,
    status: 'Available',
  },
  {
    id: 3,
    src: '/img/avatars/14.svg',
    name: 'Andrew Higgs',
    role: 'Project manager',
    expertise: 'Project',
    rate: 69,
    status: 'New',
  },
]
</script>

<template>
  <TairoTable rounded="sm">
    <template #header>
      <TairoTableHeading uppercase class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            v-model="selectAll"
            rounded="sm"
            color="primary"
          />
        </div>
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Collaborator
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Expertise
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Rate
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Status
      </TairoTableHeading>
    </template>

    <TairoTableRow v-for="member in team" :key="member.id">
      <TairoTableCell class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`table-4-${member.id}`"
            rounded="sm"
            color="primary"
          />
        </div>
      </TairoTableCell>

      <TairoTableCell>
        <div class="flex gap-2 items-center">
          <BaseAvatar :src="member.src" size="xs" />

          <div class="leading-none">
            <p class="font-sans text-sm font-medium leading-tight">
              {{ member.name }}
            </p>

            <p class="text-muted-600 dark:text-muted-400 font-sans text-xs font-normal">
              {{ member.role }}
            </p>
          </div>
        </div>
      </TairoTableCell>

      <TairoTableCell light>
        {{ member.expertise }}
      </TairoTableCell>

      <TairoTableCell>${{ member.rate }}/hour</TairoTableCell>

      <TairoTableCell>
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoTableCell>
    </TairoTableRow>
  </TairoTable>
</template>

Media:md

Tables can have different radius factors. Use the rounded prop to change the table's radius.

 Collaborator Expertise Rate Status
?

Anna Vrinkof

UI/UX designer

UX Design$49/hourAvailable
?

John Cambell

Sales manager

Management$74/hourHired
?

Beth Delanoe

Product designer

Product$43/hourAvailable
?

Andrew Higgs

Project manager

Project$69/hourNew
Show code
vue
<script setup lang="ts">
const team = [
  {
    id: 0,
    src: '/img/avatars/22.svg',
    name: 'Anna Vrinkof',
    role: 'UI/UX designer',
    expertise: 'UX Design',
    rate: 49,
    status: 'Available',
  },
  {
    id: 1,
    src: '/img/avatars/3.svg',
    name: 'John Cambell',
    role: 'Sales manager',
    expertise: 'Management',
    rate: 74,
    status: 'Hired',
  },
  {
    id: 2,
    src: '/img/avatars/9.svg',
    name: 'Beth Delanoe',
    role: 'Product designer',
    expertise: 'Product',
    rate: 43,
    status: 'Available',
  },
  {
    id: 3,
    src: '/img/avatars/14.svg',
    name: 'Andrew Higgs',
    role: 'Project manager',
    expertise: 'Project',
    rate: 69,
    status: 'New',
  },
]
</script>

<template>
  <TairoTable rounded="md">
    <template #header>
      <TairoTableHeading uppercase class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            rounded="md"
            color="primary"
          />
        </div>
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Collaborator
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Expertise
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Rate
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Status
      </TairoTableHeading>
    </template>

    <TairoTableRow v-for="member in team" :key="member.id">
      <TairoTableCell class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`table-4-${member.id}`"
            rounded="md"
            color="primary"
          />
        </div>
      </TairoTableCell>

      <TairoTableCell>
        <div class="flex gap-2 items-center">
          <BaseAvatar :src="member.src" size="xs" />

          <div class="leading-none">
            <p class="font-sans text-sm font-medium leading-tight">
              {{ member.name }}
            </p>

            <p class="text-muted-600 dark:text-muted-400 font-sans text-xs font-normal">
              {{ member.role }}
            </p>
          </div>
        </div>
      </TairoTableCell>

      <TairoTableCell light>
        {{ member.expertise }}
      </TairoTableCell>

      <TairoTableCell>${{ member.rate }}/hour</TairoTableCell>

      <TairoTableCell>
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoTableCell>
    </TairoTableRow>
  </TairoTable>
</template>

Media:lg

Tables can have different radius factors. Use the rounded prop to change the table's radius.

 Collaborator Expertise Rate Status
?

Anna Vrinkof

UI/UX designer

UX Design$49/hourAvailable
?

John Cambell

Sales manager

Management$74/hourHired
?

Beth Delanoe

Product designer

Product$43/hourAvailable
?

Andrew Higgs

Project manager

Project$69/hourNew
Show code
vue
<script setup lang="ts">
const team = [
  {
    id: 0,
    src: '/img/avatars/22.svg',
    name: 'Anna Vrinkof',
    role: 'UI/UX designer',
    expertise: 'UX Design',
    rate: 49,
    status: 'Available',
  },
  {
    id: 1,
    src: '/img/avatars/3.svg',
    name: 'John Cambell',
    role: 'Sales manager',
    expertise: 'Management',
    rate: 74,
    status: 'Hired',
  },
  {
    id: 2,
    src: '/img/avatars/9.svg',
    name: 'Beth Delanoe',
    role: 'Product designer',
    expertise: 'Product',
    rate: 43,
    status: 'Available',
  },
  {
    id: 3,
    src: '/img/avatars/14.svg',
    name: 'Andrew Higgs',
    role: 'Project manager',
    expertise: 'Project',
    rate: 69,
    status: 'New',
  },
]
</script>

<template>
  <TairoTable rounded="lg">
    <template #header>
      <TairoTableHeading uppercase class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            rounded="lg"
            color="primary"
          />
        </div>
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Collaborator
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Expertise
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Rate
      </TairoTableHeading>

      <TairoTableHeading uppercase>
        Status
      </TairoTableHeading>
    </template>

    <TairoTableRow v-for="member in team" :key="member.id">
      <TairoTableCell class="p-4">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`table-5-${member.id}`"
            rounded="lg"
            color="primary"
          />
        </div>
      </TairoTableCell>

      <TairoTableCell>
        <div class="flex gap-2 items-center">
          <BaseAvatar :src="member.src" size="xs" />

          <div class="leading-none">
            <p class="font-sans text-sm font-medium leading-tight">
              {{ member.name }}
            </p>

            <p class="text-muted-600 dark:text-muted-400 font-sans text-xs font-normal">
              {{ member.role }}
            </p>
          </div>
        </div>
      </TairoTableCell>

      <TairoTableCell light>
        {{ member.expertise }}
      </TairoTableCell>

      <TairoTableCell>${{ member.rate }}/hour</TairoTableCell>

      <TairoTableCell>
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoTableCell>
    </TairoTableRow>
  </TairoTable>
</template>

Components

TairoTable

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
rounded
default:"sm"
"sm" | "none" | "md" | "lg"
scrollable
default:true
boolean
style
default:-
unknown
Slot Type
#header
{}
#default
{}

TairoTableHeading

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
spaced
default:false
boolean
style
default:-
unknown
uppercase
default:false
boolean
Slot Type
#default
{}

TairoTableRow

Prop Type
class
default:-
unknown
hoverable
default:true
boolean
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
Slot Type
#default
{}

TairoTableCell

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
light
default:false
boolean
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
spaced
default:false
boolean
style
default:-
unknown
Slot Type
#default
{}