Table Flex

Table but using Flexbox.

Usage

Simple Usage

Id

1

Name

Tarjono

Status

true

Id

2

Name

Renatta

Status

false

Id

3

Name

Jonathan Smith

Status

true

Id

4

Name

Arch Brown

Status

true

preview

<template class="flex-col space-y-2">
  <p-table-flex :fields="fields" :items="items" />
</template>

<script setup>
import { defineTable } from '@privyid/persona/core'

const fields = defineTable([
  'id',
  'name',
  'status',
])

const items = ref([
  {
    id    : 1,
    name  : 'Tarjono',
    status: true,
  },
  {
    id    : 2,
    name  : 'Tarjono',
    status: false,
  },
  {
    id    : 3,
    name  : 'Tarjono',
    status: true,
  },
  {
    id    : 4,
    name  : 'Tarjono',
    status: true,
  },
])
</script>

Custom Label + Formatter

PrivyID

1

Name

Tarjono

Is Active

Active

PrivyID

2

Name

Renatta

Is Active

Deactive

PrivyID

3

Name

Jonathan Smith

Is Active

Active

PrivyID

4

Name

Arch Brown

Is Active

Active

preview

<template class="flex-col space-y-2">
  <p-table-flex :fields="fields" :items="items" />
</template>

<script setup>
import { defineTable } from '@privyid/persona'

const fields = defineTable([
  {
    key  : 'id',
    label: 'PrivyID',
    width: '15%',
  },
  {
    key  : 'name',
    label: 'Name',
  },
  {
    key      : 'status',
    label    : 'Is Active',
    formatter: (value) => value ? 'Active': 'Deactive',
  },
])

const items = ref([
  {
    id    : 1,
    name  : 'Tarjono',
    status: true,
  },
  {
    id    : 2,
    name  : 'Tarjono',
    status: false,
  },
  {
    id    : 3,
    name  : 'Tarjono',
    status: true,
  },
  {
    id    : 4,
    name  : 'Tarjono',
    status: true,
  },
])
</script>

Apperance

There are 2 variants: table and card, default is card

Id

1

Name

Tarjono

Status

true

Id

2

Name

Renatta

Status

false

Id

3

Name

Jonathan Smith

Status

true

Id

4

Name

Arch Brown

Status

true

preview

<template>
  <p-table-flex :fields="fields" :items="items" apperance="table" />
</template>

Hide Label Header

Id

1

Name

Tarjono

Status

true

Id

2

Name

Renatta

Status

false

Id

3

Name

Jonathan Smith

Status

true

Id

4

Name

Arch Brown

Status

true

preview

<template>
  <p-table-flex :fields="fields" :items="items" no-label />
</template>

Selectable

Add prop selectable to enable checkbox inside table

Id

1

Name

Tarjono

Status

true

Id

2

Name

Renatta

Status

false

Id

3

Name

Jonathan Smith

Status

true

Id

4

Name

Arch Brown

Status

true

preview

<template>
  <p-table-flex selectable :fields="fields" :items="items" />
</template>

Binding v-model

The result of selected item is bind inside v-model

Id

1

Name

Tarjono

Status

true

Id

2

Name

Renatta

Status

false

Id

3

Name

Jonathan Smith

Status

true

Id

4

Name

Arch Brown

Status

true

preview

<template>
  <p-table-flex v-model="selected" selectable :fields="fields" :items="items" />
</template>

Selected :

[]

Disabling some item

set _selectable to false in your items to disabled item from selection.

Id

1

Name

Tarjono

Status

true

Id

2

Name

Tarjono

Status

false

Id

3

Name

Tarjono

Status

true

Id

4

Name

Can't be selected

Status

true

preview

<template>
  <p-table-flex v-model="selectedA" selectable :fields="fields" :items="items" />
</template>

<script setup>
  const items = ref([
    {
      id    : 1,
      name  : 'Tarjono',
      status: true,
    },
    {
      id    : 2,
      name  : 'Tarjono',
      status: false,
    },
    {
      id    : 3,
      name  : 'Tarjono',
      status: true,
    },
    {
      id         : 4,
      name       : 'Can\'t be selected',
      status     : true,
      _selectable: false,
    },
  ])
</script>

Draggable

add prop draggable to enable drag-to-sort.

Id

1

Name

Tarjono

Status

true

Id

2

Name

Renatta

Status

false

Id

3

Name

Jonathan Smith

Status

true

Id

4

Name

Arch Brown

Status

true

preview

<template>
  <p-table-flex :fields="fields" v-model:items="items" draggable />
</template>

Customization Slot

Custom Cell

Id

1

Name

Tarjono

Status

active

Id

2

Name

Renatta

Status

inactive

Id

3

Name

Jonathan Smith

Status

active

Id

4

Name

Arch Brown

Status

active

preview

<template>
  <p-table-flex :fields="fields" :items="items">
    <template #cell(name)="{ item }">
      <div class="flex items-center space-x-2">
        <p-avatar size="sm" :name="item.name" />
        <span>{{ item.name }}</span>
      </div>
    </template>
    <template #cell(status)="{ item }">
      <p-label
        variant="light" :color="item.status ? 'success' : 'default'"
        size="sm">
        {{ item.status ? 'active' : 'inactive' }}
      </p-label>
    </template>
  </p-table-flex>
</template>

Custom Head

Id

1

Name

Tarjono

Status

new

true

Id

2

Name

Renatta

Status

new

false

Id

3

Name

Jonathan Smith

Status

new

true

Id

4

Name

Arch Brown

Status

new

true

preview

<template>
  <p-table-flex :fields="fields" :items="items">
    <template #head(status)="{ label }">
      {{ label }}<p-label size="xs" class="ml-1">new</p-label>
    </template>
  </p-table-flex>
</template>

Custom Row

Tarjono

Sign

Renatta

Sign

Jonathan Smith

Sign

Arch Brown

Sign

preview

<template>
  <p-table-flex :fields="fields" :items="items" draggable>
    <template #row="{ item }">
      <div class="flex items-center p-4 space-x-4 grow max-sm:w-full">
        <p-avatar size="sm" :name="item.name" />
        <div class="flex flex-col items-start grow">
          <span>{{ item.name }}</span>
          <p-label color="danger" variant="light" size="sm">Sign</p-label>
        </div>
        <p-button variant="ghost" icon>
          <pi-trash-16 />
        </p-button>
      </div>
    </template>
  </p-table-flex>
</template>

Custom Empty

Table has default empty state, but it's be able to customize by own via slot empty.

Id

Name

Status

Uh oh, no data

We're empty-handed!

preview

<template>
  <p-table-flex :fields="fields" :items="items">
    <template #empty>
      <div class="flex flex-col items-center justify-center">
        <img src="/assets/images/img-table-empty-records.svg">
        <p-heading element="h6" class="mt-12">Uh oh, no data</p-heading>
        <p-text variant="body2" class="py-4 text-subtle dark:text-dark-subtle">
          We're empty-handed!
        </p-text>
      </div>
    </template>
  </p-table-flex>
</template>

Variables

Table use local CSS variables for enhanced real-time customization.

--p-table-bg: theme(backgroundColor.default.DEFAULT);
--p-table-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
--p-table-border: theme(borderColor.default.DEFAULT);
--p-table-border-dark: theme(borderColor.dark.default.DEFAULT);

Example

Id

1

Name

Tarjono

Status

true

Id

2

Name

Renatta

Status

false

Id

3

Name

Jonathan Smith

Status

true

Id

4

Name

Arch Brown

Status

true

preview

<template>
  <p-table-flex
    :fields="fields"
    :items="items"
    style="
      --p-table-header-bg: #F3F3F3;
      --p-table-header-bg-dark: #0D1117;
    " />
</template>

API

Props

Props	Type	Default	Description
apperance	String	table	Table apperance variant, valid value is table, card
items	Array	-	Table items
fields	Array	-	Table fields
selectable	Boolean	false	Enable checkbox
draggable	Boolean	false	Enable draggable
v-model	Array	-	v-model for selected value
empty-label	String	There are no records to show	Table empty state label
no-label	Boolean	false	Hide headerlabel
table-class	String	-	Add class to table element
tr-class	String	-	Add class to table row element

In props fields contain

Props	Type	Description
key	String	Field's key
label?	String	Field's Label
width?	Number	Field's width in percent
formatter?	Function	Field's formatter, it receives value and item params and returning string value
thClass?	HTMLAttributes	HTMLAttributes of class to use in table column cell
tdClass?	HTMLAttributes	HTMLAttributes of class to use in table head cell

Slots

Name	Description
cell(:key)	Content for checked label
head(:key)	Content for unchecked label
empty	Content for empty state
row	Custom render for row

Events

Name	Arguments	Description
There no props here

See Also

• Table Static
• Table (deprecated)