Menu
Documentation

Flex Table

Flex tables are an alternative way to display tabular data. They behave responsively on smaller screens.

Rounded examples

Rounded:none

Flex tables can have different radius factors. Use the rounded prop to change the radius of the table. This example uses the none radius.

?

Anna Vrinkof

UI/UX designer

UX Design
$49/hour
Available
?

John Cambell

Sales manager

Management
$74/hour
Hired
?

Beth Delanoe

Product designer

Product
$43/hour
Available
?

Andrew Higgs

Project manager

Project
$69/hour
New
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>
  <TairoFlexTable>
    <template #header>
      <TairoFlexTableHeading type="shrink">
        <div class="flex items-center">
          <BaseCheckbox
            rounded="none"
            color="primary"
          />
        </div>
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="grow">
        Member
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Expertise
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Rate
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Status
      </TairoFlexTableHeading>
    </template>

    <TairoFlexTableRow
      v-for="member in team"
      :key="member.id"
      rounded="none"
    >
      <TairoFlexTableCell type="shrink" data-content="Selection">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`checkbox-${member.id}`"
            rounded="none"
            color="primary"
          />
        </div>
      </TairoFlexTableCell>

      <TairoFlexTableCell type="grow" data-content="Member">
        <div class="flex items-center gap-2">
          <BaseAvatar :src="member.src" size="xs" />

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

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

      <TairoFlexTableCell
        type="stable"
        data-content="Expertise"
        light
      >
        {{ member.expertise }}
      </TairoFlexTableCell>

      <TairoFlexTableCell type="stable" data-content="Rate">
        <span class="font-medium">${{ member.rate }}/hour</span>
      </TairoFlexTableCell>

      <TairoFlexTableCell type="stable" data-content="Status">
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoFlexTableCell>
    </TairoFlexTableRow>
  </TairoFlexTable>
</template>

Rounded:sm

Flex tables can have different radius factors. Use the rounded prop to change the radius of the table. This example uses the sm radius.

?

Anna Vrinkof

UI/UX designer

UX Design
$49/hour
Available
?

John Cambell

Sales manager

Management
$74/hour
Hired
?

Beth Delanoe

Product designer

Product
$43/hour
Available
?

Andrew Higgs

Project manager

Project
$69/hour
New
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>
  <TairoFlexTable>
    <template #header>
      <TairoFlexTableHeading type="shrink">
        <div class="flex items-center">
          <BaseCheckbox
            rounded="sm"
            color="primary"
          />
        </div>
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="grow">
        Member
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Expertise
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Rate
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Status
      </TairoFlexTableHeading>
    </template>

    <TairoFlexTableRow
      v-for="member in team"
      :key="member.id"
      rounded="sm"
    >
      <TairoFlexTableCell type="shrink" data-content="Selection">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`checkbox-${member.id}`"
            rounded="sm"
            color="primary"
          />
        </div>
      </TairoFlexTableCell>

      <TairoFlexTableCell type="grow" data-content="Member">
        <div class="flex items-center gap-2">
          <BaseAvatar :src="member.src" size="xs" />

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

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

      <TairoFlexTableCell
        type="stable"
        data-content="Expertise"
        light
      >
        {{ member.expertise }}
      </TairoFlexTableCell>

      <TairoFlexTableCell type="stable" data-content="Rate">
        <span class="font-medium">${{ member.rate }}/hour</span>
      </TairoFlexTableCell>

      <TairoFlexTableCell type="stable" data-content="Status">
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoFlexTableCell>
    </TairoFlexTableRow>
  </TairoFlexTable>
</template>

Rounded:md

Flex tables can have different radius factors. Use the rounded prop to change the radius of the table. This example uses the md radius.

?

Anna Vrinkof

UI/UX designer

UX Design
$49/hour
Available
?

John Cambell

Sales manager

Management
$74/hour
Hired
?

Beth Delanoe

Product designer

Product
$43/hour
Available
?

Andrew Higgs

Project manager

Project
$69/hour
New
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>
  <TairoFlexTable>
    <template #header>
      <TairoFlexTableHeading type="shrink">
        <div class="flex items-center">
          <BaseCheckbox
            rounded="md"
            color="primary"
          />
        </div>
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="grow">
        Member
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Expertise
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Rate
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Status
      </TairoFlexTableHeading>
    </template>

    <TairoFlexTableRow
      v-for="member in team"
      :key="member.id"
      rounded="md"
    >
      <TairoFlexTableCell type="shrink" data-content="Selection">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`checkbox-${member.id}`"
            rounded="md"
            color="primary"
          />
        </div>
      </TairoFlexTableCell>

      <TairoFlexTableCell type="grow" data-content="Member">
        <div class="flex items-center gap-2">
          <BaseAvatar :src="member.src" size="xs" />

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

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

      <TairoFlexTableCell
        type="stable"
        data-content="Expertise"
        light
      >
        {{ member.expertise }}
      </TairoFlexTableCell>

      <TairoFlexTableCell type="stable" data-content="Rate">
        <span class="font-medium">${{ member.rate }}/hour</span>
      </TairoFlexTableCell>

      <TairoFlexTableCell type="stable" data-content="Status">
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoFlexTableCell>
    </TairoFlexTableRow>
  </TairoFlexTable>
</template>

Rounded:lg

Flex tables can have different radius factors. Use the rounded prop to change the radius of the table. This example uses the lg radius.

?

Anna Vrinkof

UI/UX designer

UX Design
$49/hour
Available
?

John Cambell

Sales manager

Management
$74/hour
Hired
?

Beth Delanoe

Product designer

Product
$43/hour
Available
?

Andrew Higgs

Project manager

Project
$69/hour
New
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>
  <TairoFlexTable>
    <template #header>
      <TairoFlexTableHeading type="shrink">
        <div class="flex items-center">
          <BaseCheckbox
            rounded="lg"
            color="primary"
          />
        </div>
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="grow">
        Member
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Expertise
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Rate
      </TairoFlexTableHeading>

      <TairoFlexTableHeading type="stable">
        Status
      </TairoFlexTableHeading>
    </template>

    <TairoFlexTableRow
      v-for="member in team"
      :key="member.id"
      rounded="lg"
    >
      <TairoFlexTableCell type="shrink" data-content="Selection">
        <div class="flex items-center">
          <BaseCheckbox
            :value="`checkbox-${member.id}`"
            rounded="lg"
            class="text-primary-500"
          />
        </div>
      </TairoFlexTableCell>

      <TairoFlexTableCell type="grow" data-content="Member">
        <div class="flex items-center gap-2">
          <BaseAvatar :src="member.src" size="xs" />

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

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

      <TairoFlexTableCell
        type="stable"
        data-content="Expertise"
        light
      >
        {{ member.expertise }}
      </TairoFlexTableCell>

      <TairoFlexTableCell type="stable" data-content="Rate">
        <span class="font-medium">${{ member.rate }}/hour</span>
      </TairoFlexTableCell>

      <TairoFlexTableCell type="stable" data-content="Status">
        <BaseTag
          rounded="full"
          class="font-medium"
        >
          {{ member.status }}
        </BaseTag>
      </TairoFlexTableCell>
    </TairoFlexTableRow>
  </TairoFlexTable>
</template>

Components

TairoFlexTable

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

TairoFlexTableHeading

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
type
default:"stable"
"stable" | "grow" | "shrink"

The type of the heading.

Slot Type
#default
{}

TairoFlexTableRow

Prop Type
class
default:-
unknown
key
default:-
PropertyKey
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
rounded
default:-
"md" | "sm" | "lg" | "none"

The radius of the row.

style
default:-
unknown
Slot Type
#default
{}

TairoFlexTableCell

Prop Type
clamp
default:1
false | 1 | 2 | 3 | 4 | 5 | 6
class
default:-
unknown
key
default:-
PropertyKey
light
default:-
boolean
ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
style
default:-
unknown
type
default:"stable"
FlexTableCellType
Slot Type
#default
{}