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
1	Tarjono	Active
2	Renatta	Deactive
3	Jonathan Smith	Active
4	Arch Brown	Active

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
1	Tarjono	true
2	Renatta	false
3	Jonathan Smith	true
4	Arch Brown	true

preview

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

Hide Label Header

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

preview

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

Selectable

Add prop selectable to enable checkbox inside table

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

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
	1	Tarjono	true
	2	Renatta	false
	3	Jonathan Smith	true
	4	Arch Brown	true

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
	1	Tarjono	true
	2	Renatta	false
	3	Jonathan Smith	true
	4	Arch Brown	true

preview

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

Sortable

to support sortable field, you need to add prop sortable and when define table fields, add sortable with true value on field item

Id	Name	Gender	Age
1	David	male	27
2	Evan	male	20
3	Jane	female	30
4	Andi	male	21
5	Bella	female	24

preview

<template>
  <p-table-static
    v-model:sort-by="sortBy"
    :fields="sortableFields"
    :items="sortableItems"
    sortable />
</template>

<script setup lang="ts">
  import { useTableQuery } from '@privyid/persona/core'

  const fields = defineTable([
    { key: 'id' },
    {
      key     : 'name',
      sortable: true,
    },
    {
      key     : 'gender',
      sortable: true,
    },
    {
      key     : 'age',
      sortable: true,
    },
  ])

  const items = ref([
    {
      id    : 1,
      name  : 'David',
      gender: 'male',
      age   : 27,
    },
    {
      id    : 2,
      name  : 'Evan',
      gender: 'male',
      age   : 20,
    },
    {
      id    : 3,
      name  : 'Jane',
      gender: 'female',
      age   : 30,
    },
    {
      id    : 4,
      name  : 'Andi',
      gender: 'male',
      age   : 21,
    },
    {
      id    : 5,
      name  : 'Bella',
      gender: 'female',
      age   : 24,
    },
  ])

  const sortBy = ref({})

  // use `useTableQuery` to simulate backend sorting
  const sortableItems = useTableQuery(items, { sortBy })
</script>

Customization Slot

Custom Cell

Id	Name	Status
1	Tarjono	active
2	Renatta	inactive
3	Jonathan Smith	active
4	Arch Brown	active

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
1	Tarjono	true
2	Renatta	false
3	Jonathan Smith	true
4	Arch Brown	true

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
1	Tarjono	true
2	Renatta	false
3	Jonathan Smith	true
4	Arch Brown	true

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
sortable	Boolean	false	Enable sort items by field name
sortBy	Object	-	v-model:sort-by binding

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
sortable?	Boolean	Enable field sorting. Eventhough table have sortable prop, but the field not set sortable, sort function not able to use

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)