Table Component

Tables are a very common component that often remains as the most efficient way to display complex data. Explore Vulk tables.

Table

Table base variation

EmployeeLocationSkillsStatusExperienceAction
placeholder

Eric G.

Web developer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Available

8 years

View Profile
placeholder

Laura T.

UI designer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Offline

6 years

View Profile
placeholder

Erwin S.

Mobile developer

New York, NY

placeholder
placeholder
placeholder
placeholder
placeholder
Busy

4 years

View Profile
placeholder

Anita C.

Web developer

Las Vegas, NV

placeholder
placeholder
placeholder
placeholder
placeholder
Available

15 years

View Profile
placeholder

Christina D.

Mobile developer

Miami, FL

placeholder
placeholder
placeholder
placeholder
placeholder
Available

2 years

View Profile
placeholder

Armin A.

Web developer

San Francisco, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Meeting

3 years

View Profile
placeholder

Eren J.

UX designer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Offline

7 years

View Profile

<script setup lang="ts">
import { table } from '/@src/data/blocks/table/index'
</script>

<template>
  <SimpleTable :bordered="false">
    <SimpleTableRow>
      <SimpleTableHeader>Employee</SimpleTableHeader>
      <SimpleTableHeader>Location</SimpleTableHeader>
      <SimpleTableHeader>Skills</SimpleTableHeader>
      <SimpleTableHeader>Status</SimpleTableHeader>
      <SimpleTableHeader>Experience</SimpleTableHeader>
      <SimpleTableHeader>Action</SimpleTableHeader>
    </SimpleTableRow>
    <SimpleTableRow v-for="(item, index) in table" :key="index">
      <SimpleTableCell>
        <SimpleTableCellFlex>
          <template #media>
            <AvatarSimple :picture="item.employee.picture" />
          </template>
          <template #content>
            <Title tag="h3" :size="7" weight="semi" narrow>{ item.employee.name }</Title>
            <p class="paragraph rem-75">{ item.employee.position }</p>
          </template>
        </SimpleTableCellFlex>
      </SimpleTableCell>
      <SimpleTableCell>
        <SimpleTableCellFlex>
          <template #media>
            <Icon icon="feather:map-pin"></Icon>
          </template>
          <template #content>
            <p class="paragraph rem-85">{ item.location }</p>
          </template>
        </SimpleTableCellFlex>
      </SimpleTableCell>
      <SimpleTableCell>
        <AvatarGroup size="small" :avatars="item.skills" :limit="5" compact />
      </SimpleTableCell>
      <SimpleTableCell>
        <Tag :label="item.status.label" :color="item.status.color" outlined />
      </SimpleTableCell>
      <SimpleTableCell color="default">
        <p class="paragraph rem-85">{ item.experience }</p>
      </SimpleTableCell>
      <SimpleTableCell>
        <RouterLink
          :to="{ name: item.url }"
          class="link has-underline is-reversed rem-90"
        >View Profile</RouterLink>
      </SimpleTableCell>
    </SimpleTableRow>
  </SimpleTable>
</template>

Striped Table

Striped Table variation

EmployeeLocationSkillsStatusExperienceAction
placeholder

Eric G.

Web developer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Available

8 years

View Profile
placeholder

Laura T.

UI designer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Offline

6 years

View Profile
placeholder

Erwin S.

Mobile developer

New York, NY

placeholder
placeholder
placeholder
placeholder
placeholder
Busy

4 years

View Profile
placeholder

Anita C.

Web developer

Las Vegas, NV

placeholder
placeholder
placeholder
placeholder
placeholder
Available

15 years

View Profile
placeholder

Christina D.

Mobile developer

Miami, FL

placeholder
placeholder
placeholder
placeholder
placeholder
Available

2 years

View Profile
placeholder

Armin A.

Web developer

San Francisco, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Meeting

3 years

View Profile
placeholder

Eren J.

UX designer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Offline

7 years

View Profile

<script setup lang="ts">
import { table } from '/@src/data/blocks/table/index'
</script>

<template>
  <SimpleTable :bordered="false" striped>
    <SimpleTableRow>
      <SimpleTableHeader>Employee</SimpleTableHeader>
      <SimpleTableHeader>Location</SimpleTableHeader>
      <SimpleTableHeader>Skills</SimpleTableHeader>
      <SimpleTableHeader>Status</SimpleTableHeader>
      <SimpleTableHeader>Experience</SimpleTableHeader>
      <SimpleTableHeader>Action</SimpleTableHeader>
    </SimpleTableRow>
    <SimpleTableRow v-for="(item, index) in table" :key="index">
      <SimpleTableCell>
        <SimpleTableCellFlex>
          <template #media>
            <AvatarSimple :picture="item.employee.picture" />
          </template>
          <template #content>
            <Title tag="h3" :size="7" weight="semi" narrow>{ item.employee.name }</Title>
            <p class="paragraph rem-75">{ item.employee.position }</p>
          </template>
        </SimpleTableCellFlex>
      </SimpleTableCell>
      <SimpleTableCell>
        <SimpleTableCellFlex>
          <template #media>
            <Icon icon="feather:map-pin"></Icon>
          </template>
          <template #content>
            <p class="paragraph rem-85">{ item.location }</p>
          </template>
        </SimpleTableCellFlex>
      </SimpleTableCell>
      <SimpleTableCell>
        <AvatarGroup size="small" :avatars="item.skills" :limit="5" compact />
      </SimpleTableCell>
      <SimpleTableCell>
        <Tag :label="item.status.label" :color="item.status.color" outlined />
      </SimpleTableCell>
      <SimpleTableCell color="default">
        <p class="paragraph rem-85">{ item.experience }</p>
      </SimpleTableCell>
      <SimpleTableCell>
        <RouterLink
          :to="{ name: item.url }"
          class="link has-underline is-reversed rem-90"
        >View Profile</RouterLink>
      </SimpleTableCell>
    </SimpleTableRow>
  </SimpleTable>
</template>

Table Border

Table border variation

EmployeeLocationSkillsStatusExperienceAction
placeholder

Eric G.

Web developer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Available

8 years

View Profile
placeholder

Laura T.

UI designer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Offline

6 years

View Profile
placeholder

Erwin S.

Mobile developer

New York, NY

placeholder
placeholder
placeholder
placeholder
placeholder
Busy

4 years

View Profile
placeholder

Anita C.

Web developer

Las Vegas, NV

placeholder
placeholder
placeholder
placeholder
placeholder
Available

15 years

View Profile
placeholder

Christina D.

Mobile developer

Miami, FL

placeholder
placeholder
placeholder
placeholder
placeholder
Available

2 years

View Profile
placeholder

Armin A.

Web developer

San Francisco, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Meeting

3 years

View Profile
placeholder

Eren J.

UX designer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Offline

7 years

View Profile

<script setup lang="ts">
import { table } from '/@src/data/blocks/table/index'
</script>

<template>
  <SimpleTable :bordered="true">
    <SimpleTableRow>
      <SimpleTableHeader>Employee</SimpleTableHeader>
      <SimpleTableHeader>Location</SimpleTableHeader>
      <SimpleTableHeader>Skills</SimpleTableHeader>
      <SimpleTableHeader>Status</SimpleTableHeader>
      <SimpleTableHeader>Experience</SimpleTableHeader>
      <SimpleTableHeader>Action</SimpleTableHeader>
    </SimpleTableRow>
    <SimpleTableRow v-for="(item, index) in table" :key="index">
      <SimpleTableCell>
        <SimpleTableCellFlex>
          <template #media>
            <AvatarSimple :picture="item.employee.picture" />
          </template>
          <template #content>
            <Title tag="h3" :size="7" weight="semi" narrow>{ item.employee.name }</Title>
            <p class="paragraph rem-75">{ item.employee.position }</p>
          </template>
        </SimpleTableCellFlex>
      </SimpleTableCell>
      <SimpleTableCell>
        <SimpleTableCellFlex>
          <template #media>
            <Icon icon="feather:map-pin"></Icon>
          </template>
          <template #content>
            <p class="paragraph rem-85">{ item.location }</p>
          </template>
        </SimpleTableCellFlex>
      </SimpleTableCell>
      <SimpleTableCell>
        <AvatarGroup size="small" :avatars="item.skills" :limit="5" compact />
      </SimpleTableCell>
      <SimpleTableCell>
        <Tag :label="item.status.label" :color="item.status.color" outlined />
      </SimpleTableCell>
      <SimpleTableCell color="default">
        <p class="paragraph rem-85">{ item.experience }</p>
      </SimpleTableCell>
      <SimpleTableCell>
        <RouterLink
          :to="{ name: item.url }"
          class="link has-underline is-reversed rem-90"
        >View Profile</RouterLink>
      </SimpleTableCell>
    </SimpleTableRow>
  </SimpleTable>
</template>

Striped Bordered

Striped bordered variation

EmployeeLocationSkillsStatusExperienceAction
placeholder

Eric G.

Web developer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Available

8 years

View Profile
placeholder

Laura T.

UI designer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Offline

6 years

View Profile
placeholder

Erwin S.

Mobile developer

New York, NY

placeholder
placeholder
placeholder
placeholder
placeholder
Busy

4 years

View Profile
placeholder

Anita C.

Web developer

Las Vegas, NV

placeholder
placeholder
placeholder
placeholder
placeholder
Available

15 years

View Profile
placeholder

Christina D.

Mobile developer

Miami, FL

placeholder
placeholder
placeholder
placeholder
placeholder
Available

2 years

View Profile
placeholder

Armin A.

Web developer

San Francisco, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Meeting

3 years

View Profile
placeholder

Eren J.

UX designer

Los Angeles, CA

placeholder
placeholder
placeholder
placeholder
placeholder
Offline

7 years

View Profile

<script setup lang="ts">
import { table } from '/@src/data/blocks/table/index'
</script>

<template>
  <SimpleTable :bordered="true" striped>
    <SimpleTableRow>
      <SimpleTableHeader>Employee</SimpleTableHeader>
      <SimpleTableHeader>Location</SimpleTableHeader>
      <SimpleTableHeader>Skills</SimpleTableHeader>
      <SimpleTableHeader>Status</SimpleTableHeader>
      <SimpleTableHeader>Experience</SimpleTableHeader>
      <SimpleTableHeader>Action</SimpleTableHeader>
    </SimpleTableRow>
    <SimpleTableRow v-for="(item, index) in table" :key="index">
      <SimpleTableCell>
        <SimpleTableCellFlex>
          <template #media>
            <AvatarSimple :picture="item.employee.picture" />
          </template>
          <template #content>
            <Title tag="h3" :size="7" weight="semi" narrow>{ item.employee.name }</Title>
            <p class="paragraph rem-75">{ item.employee.position }</p>
          </template>
        </SimpleTableCellFlex>
      </SimpleTableCell>
      <SimpleTableCell>
        <SimpleTableCellFlex>
          <template #media>
            <Icon icon="feather:map-pin"></Icon>
          </template>
          <template #content>
            <p class="paragraph rem-85">{ item.location }</p>
          </template>
        </SimpleTableCellFlex>
      </SimpleTableCell>
      <SimpleTableCell>
        <AvatarGroup size="small" :avatars="item.skills" :limit="5" compact />
      </SimpleTableCell>
      <SimpleTableCell>
        <Tag :label="item.status.label" :color="item.status.color" outlined />
      </SimpleTableCell>
      <SimpleTableCell color="default">
        <p class="paragraph rem-85">{ item.experience }</p>
      </SimpleTableCell>
      <SimpleTableCell>
        <RouterLink
          :to="{ name: item.url }"
          class="link has-underline is-reversed rem-90"
        >View Profile</RouterLink>
      </SimpleTableCell>
    </SimpleTableRow>
  </SimpleTable>
</template>