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 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>
</template>

API ​

Props ​

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

In props fields contain

PropsTypeDescription
keyStringField's key
label?StringField's Label
width?NumberField's width in percent
formatter?FunctionField's formatter, it receives value and item params and returning string value
thClass?HTMLAttributesHTMLAttributes of class to use in table column cell
tdClass?HTMLAttributesHTMLAttributes of class to use in table head cell

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