Table

Table is a responsive data table with loading skeleton rows, empty state, and named cell slots for custom rendering.

ExamplesCodeUsageChangelog

Basic usage

Name	Status	Location	Last Updated
Crusher #1	Running	Pit A	Jun 9
Crusher #2	Down	Pit A	Jun 8
Screen #1	Running	Plant 1	Jun 10
Conveyor B	Standby	Plant 2	Jun 7

Tailwind v4

<script setup>
import { ref } from 'vue'

const columns = [
  { key: 'name', label: 'Name' },
  { key: 'status', label: 'Status' },
  { key: 'location', label: 'Location' },
  { key: 'updated', label: 'Last Updated', align: 'right' },
]

const rows = ref([
  { id: 1, name: 'Crusher #1', status: 'Running',  location: 'Pit A',   updated: 'Jun 9' },
  { id: 2, name: 'Crusher #2', status: 'Down',     location: 'Pit A',   updated: 'Jun 8' },
  { id: 3, name: 'Screen #1',  status: 'Running',  location: 'Plant 1', updated: 'Jun 10' },
])
</script>

<template>
  <Table :columns="columns" :rows="rows">
    <template #cell-status="{ value }">
      <Badge :variant="value === 'Running' ? 'success' : 'danger'">{{ value }}</Badge>
    </template>
  </Table>
</template>

Custom cell rendering

Use #cell-<key> slots to render custom content in any column. The slot receives { row, value }:

<Table :columns="columns" :rows="rows">
  <template #cell-status="{ row }">
    <Badge :variant="row.status === 'Running' ? 'success' : 'danger'">
      {{ row.status }}
    </Badge>
  </template>
</Table>

Loading state

Name	Status	Location	Last Updated

Tailwind v4

<Table :columns="columns" :rows="[]" :loading="true" />

While loading is true, 5 skeleton rows are rendered instead of the data.

Empty state

Name	Status	Location	Last Updated
No equipment found

Tailwind v4

<Table :columns="columns" :rows="[]" empty="No equipment found" />

Column definition

Each column in the columns array accepts:

Property	Type	Required	Description
key	string	Yes	Maps to the row object key
label	string	Yes	Column header text
width	string	No	CSS width, e.g. '120px' or '20%'
align	'left' | 'center' | 'right'	No	Cell/header text alignment (default: 'left')

Props

Prop	Type	Default	Description
columns	TableColumn[]	—	Column definitions
rows	Record<string, unknown>[]	—	Row data
loading	boolean	false	Show skeleton rows
empty	string	'No results'	Empty state message

Slots

Slot	Slot props	Description
cell-<key>	{ row, value }	Custom cell renderer for column key

TypeScript

The TableColumn interface is exported from the package:

import type { TableColumn } from '@jetpack-labs/jetpack-ui'