Table Static

Classic style Table.

Usage

Simple Usage

	Id	Name	Status
	1	Tarjono	true
	2	Renatta	false
	3	Jonathan Smith	true
	4	Arch Brown	true

preview

<template class="flex-col space-y-2">
  <p-table-static :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	Name	Is Active
There are no records to show

preview

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

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

const fields = defineTable([
  {
    key    : 'id',
    label  : 'PrivyID',
    width  : '1%',
    tdClass: 'text-center',
  },
  {
    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 table

Id	Name	Status
There are no records to show

preview

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

Hide Label Header

There are no records to show

preview

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

Selectable

Add prop selectable to enable checkbox inside table

	Id	Name	Status
There are no records to show

preview

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

Binding v-model

The result of selected item is bind inside v-model

	Id	Name	Status
There are no records to show

preview

<template>
  <p-table-static 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	Name	Status
	1	Tarjono	true
	2	Tarjono	false
	3	Tarjono	true
	4	Can't be selected	true

preview

<template>
  <p-table-static 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	Name	Status
There are no records to show

preview

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

Customization Slot

Custom Cell

Id	Name	Status
There are no records to show

preview

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

Custom Head

Id	Name	Status new
There are no records to show

preview

<template>
  <p-table-static :fields="fields" :items="items">
    <template #head(status)="{ label }">
      {{ label }}<p-label size="xs" class="ml-1">new</p-label>
    </template>
  </p-table-static>
</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-static :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-static>
</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-header-bg: var(--p-table-bg);
--p-table-header-bg-dark: var(--p-table-bg-dark);
--p-table-border: theme(borderColor.default.DEFAULT);
--p-table-border-dark: theme(borderColor.dark.default.DEFAULT);

Example

Id	Name	Status
There are no records to show

preview

<template>
  <p-table-static
    :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
scrollable	Boolean	true	Enable scroll when table overflow

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 Flex
• Table (deprecated)