Table Component

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

Components Open Docs

Table Striped Bordered Both

Table

Table base variation

Employee	Location	Status	Experience	Action
Eric G. Web developer	Los Angeles, CA	Available	8 years	View Profile
Laura T. UI designer	Los Angeles, CA	Offline	6 years	View Profile
Erwin S. Mobile developer	New York, NY	Busy	4 years	View Profile
Anita C. Web developer	Las Vegas, NV	Available	15 years	View Profile
Christina D. Mobile developer	Miami, FL	Available	2 years	View Profile
Armin A. Web developer	San Francisco, CA	Meeting	3 years	View Profile
Eren J. UX designer	Los Angeles, CA	Offline	7 years	View Profile


<script setup lang="ts">
import { table } from '/@src/data/blocks/table'
</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

Employee	Location	Status	Experience	Action
Eric G. Web developer	Los Angeles, CA	Available	8 years	View Profile
Laura T. UI designer	Los Angeles, CA	Offline	6 years	View Profile
Erwin S. Mobile developer	New York, NY	Busy	4 years	View Profile
Anita C. Web developer	Las Vegas, NV	Available	15 years	View Profile
Christina D. Mobile developer	Miami, FL	Available	2 years	View Profile
Armin A. Web developer	San Francisco, CA	Meeting	3 years	View Profile
Eren J. UX designer	Los Angeles, CA	Offline	7 years	View Profile


<script setup lang="ts">
import { table } from '/@src/data/blocks/table'
</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

Employee	Location	Status	Experience	Action
Eric G. Web developer	Los Angeles, CA	Available	8 years	View Profile
Laura T. UI designer	Los Angeles, CA	Offline	6 years	View Profile
Erwin S. Mobile developer	New York, NY	Busy	4 years	View Profile
Anita C. Web developer	Las Vegas, NV	Available	15 years	View Profile
Christina D. Mobile developer	Miami, FL	Available	2 years	View Profile
Armin A. Web developer	San Francisco, CA	Meeting	3 years	View Profile
Eren J. UX designer	Los Angeles, CA	Offline	7 years	View Profile


<script setup lang="ts">
import { table } from '/@src/data/blocks/table'
</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

Employee	Location	Status	Experience	Action
Eric G. Web developer	Los Angeles, CA	Available	8 years	View Profile
Laura T. UI designer	Los Angeles, CA	Offline	6 years	View Profile
Erwin S. Mobile developer	New York, NY	Busy	4 years	View Profile
Anita C. Web developer	Las Vegas, NV	Available	15 years	View Profile
Christina D. Mobile developer	Miami, FL	Available	2 years	View Profile
Armin A. Web developer	San Francisco, CA	Meeting	3 years	View Profile
Eren J. UX designer	Los Angeles, CA	Offline	7 years	View Profile


<script setup lang="ts">
import { table } from '/@src/data/blocks/table'
</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>

Awesome Features

DEMOS

DEMOS

Vulk documentation

We build the future

WHO WE ARE

REACH US

Resources

Learn

Blocks

Table Component

Table

Eric G.

Laura T.

Erwin S.

Anita C.

Christina D.

Armin A.

Eren J.

Striped Table

Eric G.

Laura T.

Erwin S.

Anita C.

Christina D.

Armin A.

Eren J.

Table Border

Eric G.

Laura T.

Erwin S.

Anita C.

Christina D.

Armin A.

Eren J.

Striped Bordered

Eric G.

Laura T.

Erwin S.

Anita C.

Christina D.

Armin A.

Eren J.