Table

Delightful datatables.

This component mark as deprecated. Please use Table Flex or Table Static instead

Usage

Simple Usage

Id

Name

Status

1

Tarjono

true

2

Renatta

false

3

Jonathan Smith

true

4

Arch Brown

true

preview

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

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 :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 :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

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

Custom

Id

Name

Status

There’s nothing to show here

preview

<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

Flexible

Default

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 :fields="fields" :items="items" />
</template>

No Label

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 :fields="fields" :items="items" no-label />
</template>

Show Table Header

Id

Name

Status

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
    :fields="fields"
    :items="items"
    no-label
    show-table-header />
</template>

Static

Id

Name

Status

1

Tarjono

true

2

Renatta

false

3

Jonathan Smith

true

4

Arch Brown

true

preview

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

<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

<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

<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

<template>
  <p-table :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 :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

<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

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

Variables

Table use local CSS variables on .datatable 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

It's possible to custom table flexible background, but the border must be transparent or same as the background color.

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
    :fields="fields"
    :items="items"
    style="--p-table-bg: #F3F3F3;
    --p-table-bg-dark: #0D1117;
    --p-table-border: #F3F3F3;
    --p-table-border-dark: #0D1117;" />
</template>

API

Props

Props	Type	Default	Description
variant	String	flexible	Table style variant, valid value is flexible, static
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 label in flexible variant
show-table-header	Boolean	false	Show table header in flexible variant

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

Events

Name	Arguments	Description
There no props here