Data Table

DataTable combines Table with Pagination into a single server-side pagination component. It handles the layout and wires pagination events — you supply the data for the current page.

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

Showing 1–3 of 8

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 page = ref(1)
const rows = ref([...]) // current page data only
const total = ref(87)   // total record count across all pages

function onPageChange(p) {
  page.value = p
  // fetch new data for page p
}
</script>

<template>
  <DataTable
    :columns="columns"
    :rows="rows"
    :total="total"
    :page="page"
    :per-page="20"
    @update:page="onPageChange"
  />
</template>

Custom cell slots

All Table slot patterns work inside DataTable:

<DataTable :columns="columns" :rows="rows" :total="total" :page="page" @update:page="page = $event">
  <template #cell-status="{ row }">
    <Badge :variant="row.status === 'active' ? 'success' : 'neutral'">
      {{ row.status }}
    </Badge>
  </template>
</DataTable>

Loading state

<DataTable
  :columns="columns"
  :rows="[]"
  :total="0"
  :page="1"
  :loading="fetching"
  @update:page="page = $event"
/>

Props

Prop	Type	Default	Description
columns	TableColumn[]	—	Column definitions (see Table)
rows	Record<string, unknown>[]	—	Current page row data
total	number	—	Total records (all pages) — used to calculate page count
page	number	—	Current page (1-indexed)
perPage	number	20	Records per page
loading	boolean	false	Show loading skeleton
empty	string	'No results'	Empty state message

Events

Event	Payload	Description
update:page	number	Emitted when the user navigates to a new page

Slots

Inherits all Table slots — use #cell-<key> to customize any column cell.