Persona

Appearance

On this page

Table ​

Delightful datatables.

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
vue
<template class="flex-col space-y-2">
  <p-table :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
vue
<template class="flex-col space-y-2">
  <p-table :fields="fields" :items="items" />
</template>

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

const fields = defineTable([
  {
    key  : 'id',
    label: 'PrivyID',
  },
  {
    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>

Custom Empty Label ​

Empty state label customization can be done through the empty-label prop.

Default ​

Id
Name
Status
There are no records to show
preview
vue
<template>
  <p-table :fields="fields" :items="items" />
</template>

Custom ​

Id
Name
Status
There’s nothing to show here
preview
vue
<template>
  <p-table 
    :fields="fields" :items="items" 
    empty-label="There’s nothing to show here" />
</template>

Variants ​

There are 2 variants: flexible and static, default is flexible

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
Id
Name
Status
1
Tarjono
true
2
Renatta
false
3
Jonathan Smith
true
4
Arch Brown
true
preview
vue
<template>
  <p-table variant="flexible" :fields="fields" :items="items" />
  <p-table variant="static" :fields="fields" :items="items" />
</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
vue
<template>
  <p-table 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
vue
<template>
  <p-table 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
vue
<template>
  <p-table 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
vue
<template>
  <p-table :fields="fields" v-model:items="items" draggable />
</template>

Customization Slot ​

Custom Cell ​

Id
1
Name
Avatar Image
Tarjono
Status
active
Id
2
Name
Avatar Image
Renatta
Status
inactive
Id
3
Name
Avatar Image
Jonathan Smith
Status
active
Id
4
Name
Avatar Image
Arch Brown
Status
active
preview
vue
<template>
  <p-table :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>
</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
vue
<template>
  <p-table :fields="fields" :items="items">
    <template #head(status)="{ label }">
      {{ label }}<p-label size="xs" class="ml-1">new</p-label>
    </template>
  </p-table>
</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
vue
<template>
  <p-table :fields="fields" :items="items">
    <template #empty>
      <div class="flex flex-col justify-center items-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>
</template>

API ​

Props ​

PropsTypeDefaultDescription
variantStringflexibleTable style variant, valid value is flexible, static
itemsArray-Table items
fieldsArray-Table fields
selectableBooleanfalseEnable checkbox
draggableBooleanfalseEnable draggable
modelValueArray-v-model for selected value
empty-labelStringThere are no records to showTable empty state label

Slots ​

NameDescription
cell(:key)Content for checked label
head(:key)Content for unchecked label
emptyContent for empty state

Events ​

NameArgumentsDescription
There no props here

Released under the MIT License.

Copyright © 2022 Privy Identitas Digital