PxTableSkeleton

A premium skeleton loader specifically designed for table layouts. It automatically generates pseudo-random line widths to simulate real text, avoiding the monotonous "blocky" look of standard skeletons.

It's automatically used by PxDataTable when its loading prop is set to true, but you can use it manually inside any native HTML <tbody>.

Basic Usage

Demo

ID	Name	Role	Status

<script setup>
import { PxTableSkeleton } from 'praxis-vue-ui'
</script>

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Role</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <!-- Render 3 rows with 4 standard columns each -->
      <PxTableSkeleton :columns="4" :rows="3" />
    </tbody>
  </table>
</template>

Complex Tables

If your table includes a selection column (checkboxes) or an expansion column (chevrons), you can tell the skeleton to render square placeholders for those specific columns to match the layout exactly and avoid layout shifts.

With Selection and Expansion

<tbody>
  <PxTableSkeleton 
    :columns="3" 
    :rows="2" 
    :has-selection="true" 
    :has-expansion="true" 
  />
</tbody>

Props

Props

Prop	Type	Default	Description
columnsrequired	number	undefined	The number of standard data columns to render.
rows	number	5	The number of skeleton rows to generate.
hasSelection	boolean	false	Renders a small square placeholder at the far left to simulate a checkbox column.
hasExpansion	boolean	false	Renders a small square placeholder (next to the selection if any) to simulate a chevron/expansion column.