مولفه جدول

جدول‌ها جزء بسیار رایج و معمولی هستند که اغلب به عنوان موثرترین روش برای نمایش داده‌های پیچیده باقی می‌مانند. با جدول‌های Vulk آشنا شوید.

جدول

سبک‌های مختلف جدول پایه

کارمندموقعیتمهارت‌هاوضعیتتجربیاتاقدامات
placeholder

اریک جی.

برنامه‌نویس وب

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

8 سال

مشاهده پروفایل
placeholder

لارا تی.

طراح UI

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
آفلاین

6 سال

مشاهده پروفایل
placeholder

اروین اس.

برنامه‌نویس موبایل

اردبیل

placeholder
placeholder
placeholder
placeholder
placeholder
مشغول

4 سال

مشاهده پروفایل
placeholder

آنیتا سی.

برنامه‌نویس وب

تبریز

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

15 سال

مشاهده پروفایل
placeholder

کریستین دی.

برنامه‌نویس موبایل

رشت

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

2 سال

مشاهده پروفایل
placeholder

آرمین الف.

برنامه‌نویس وب

تهران

placeholder
placeholder
placeholder
placeholder
placeholder
جلسه

3 سال

مشاهده پروفایل
placeholder

اران جی.

طراح UX

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
آفلاین

7 سال

مشاهده پروفایل

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

<template>
  <SimpleTable :bordered="false">
    <SimpleTableRow>
      <SimpleTableHeader>کارمند</SimpleTableHeader>
      <SimpleTableHeader>موقعیت</SimpleTableHeader>
      <SimpleTableHeader>مهارت‌ها</SimpleTableHeader>
      <SimpleTableHeader>وضعیت</SimpleTableHeader>
      <SimpleTableHeader>تجربیات</SimpleTableHeader>
      <SimpleTableHeader>اقدامات</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"
        >مشاهده پروفایل</RouterLink>
      </SimpleTableCell>
    </SimpleTableRow>
  </SimpleTable>
</template>

جدول راه راه

سبک‌های مختلف جدول راه راه

کارمندموقعیتمهارت‌هاوضعیتتجربیاتاقدامات
placeholder

اریک جی.

برنامه‌نویس وب

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

8 سال

مشاهده پروفایل
placeholder

لارا تی.

طراح UI

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
آفلاین

6 سال

مشاهده پروفایل
placeholder

اروین اس.

برنامه‌نویس موبایل

اردبیل

placeholder
placeholder
placeholder
placeholder
placeholder
مشغول

4 سال

مشاهده پروفایل
placeholder

آنیتا سی.

برنامه‌نویس وب

تبریز

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

15 سال

مشاهده پروفایل
placeholder

کریستین دی.

برنامه‌نویس موبایل

رشت

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

2 سال

مشاهده پروفایل
placeholder

آرمین الف.

برنامه‌نویس وب

تهران

placeholder
placeholder
placeholder
placeholder
placeholder
جلسه

3 سال

مشاهده پروفایل
placeholder

اران جی.

طراح UX

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
آفلاین

7 سال

مشاهده پروفایل

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

<template>
  <SimpleTable :bordered="false" striped>
    <SimpleTableRow>
      <SimpleTableHeader>کارمند</SimpleTableHeader>
      <SimpleTableHeader>موقعیت</SimpleTableHeader>
      <SimpleTableHeader>مهارت‌ها</SimpleTableHeader>
      <SimpleTableHeader>وضعیت</SimpleTableHeader>
      <SimpleTableHeader>تجربیات</SimpleTableHeader>
      <SimpleTableHeader>اقدامات</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"
        >مشاهده پروفایل</RouterLink>
      </SimpleTableCell>
    </SimpleTableRow>
  </SimpleTable>
</template>

جدول حاشیه‌دار

سبک‌های مختلف جدول حاشیه‌دار

کارمندموقعیتمهارت‌هاوضعیتتجربیاتاقدامات
placeholder

اریک جی.

برنامه‌نویس وب

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

8 سال

مشاهده پروفایل
placeholder

لارا تی.

طراح UI

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
آفلاین

6 سال

مشاهده پروفایل
placeholder

اروین اس.

برنامه‌نویس موبایل

اردبیل

placeholder
placeholder
placeholder
placeholder
placeholder
مشغول

4 سال

مشاهده پروفایل
placeholder

آنیتا سی.

برنامه‌نویس وب

تبریز

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

15 سال

مشاهده پروفایل
placeholder

کریستین دی.

برنامه‌نویس موبایل

رشت

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

2 سال

مشاهده پروفایل
placeholder

آرمین الف.

برنامه‌نویس وب

تهران

placeholder
placeholder
placeholder
placeholder
placeholder
جلسه

3 سال

مشاهده پروفایل
placeholder

اران جی.

طراح UX

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
آفلاین

7 سال

مشاهده پروفایل

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

<template>
  <SimpleTable :bordered="true">
    <SimpleTableRow>
      <SimpleTableHeader>کارمند</SimpleTableHeader>
      <SimpleTableHeader>موقعیت</SimpleTableHeader>
      <SimpleTableHeader>مهارت‌ها</SimpleTableHeader>
      <SimpleTableHeader>وضعیت</SimpleTableHeader>
      <SimpleTableHeader>تجربیات</SimpleTableHeader>
      <SimpleTableHeader>اقدامات</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"
        >مشاهده پروفایل</RouterLink>
      </SimpleTableCell>
    </SimpleTableRow>
  </SimpleTable>
</template>

راه راه حاشیه‌دار

سبک‌ای مختلف جدول راه راه حاشیه‌دار

کارمندموقعیتمهارت‌هاوضعیتتجربیاتاقدامات
placeholder

اریک جی.

برنامه‌نویس وب

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

8 سال

مشاهده پروفایل
placeholder

لارا تی.

طراح UI

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
آفلاین

6 سال

مشاهده پروفایل
placeholder

اروین اس.

برنامه‌نویس موبایل

اردبیل

placeholder
placeholder
placeholder
placeholder
placeholder
مشغول

4 سال

مشاهده پروفایل
placeholder

آنیتا سی.

برنامه‌نویس وب

تبریز

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

15 سال

مشاهده پروفایل
placeholder

کریستین دی.

برنامه‌نویس موبایل

رشت

placeholder
placeholder
placeholder
placeholder
placeholder
در دسترس

2 سال

مشاهده پروفایل
placeholder

آرمین الف.

برنامه‌نویس وب

تهران

placeholder
placeholder
placeholder
placeholder
placeholder
جلسه

3 سال

مشاهده پروفایل
placeholder

اران جی.

طراح UX

اصفهان

placeholder
placeholder
placeholder
placeholder
placeholder
آفلاین

7 سال

مشاهده پروفایل

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

<template>
  <SimpleTable :bordered="true" striped>
    <SimpleTableRow>
      <SimpleTableHeader>کارمند</SimpleTableHeader>
      <SimpleTableHeader>موقعیت</SimpleTableHeader>
      <SimpleTableHeader>مهارت‌ها</SimpleTableHeader>
      <SimpleTableHeader>وضعیت</SimpleTableHeader>
      <SimpleTableHeader>تجربیات</SimpleTableHeader>
      <SimpleTableHeader>اقدامات</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"
        >مشاهده پروفایل</RouterLink>
      </SimpleTableCell>
    </SimpleTableRow>
  </SimpleTable>
</template>