DataTable Component

Full-featured table component for Vue 3 with TypeScript, supporting pagination, row selection, sorting, and custom slots.

Features

• ✅ Pagination with local data or through API
• ✅ Row selection with checkboxes
• ✅ Different table sizes (small, medium, large)
• ✅ Data formatting (text, numbers, dates, badges, arrays)
• ✅ Custom slots for columns
• ✅ Loading state and error handling
• ✅ Dark theme
• ✅ Adaptive design

Custom column slots

The component supports custom slots to create custom table cells. Use template #body in the Column component:

<DataTable :rows="data" tableClass="w-full" tableStyle="min-width: 50rem">
  <Column field="name" header="Name">
    <template #body="{ data }">
      <div>
        <div class="font-medium">{{ data.name.main }}</div>
        <div class="text-sm text-gray-500">{{ data.name.sub }}</div>
      </div>
    </template>
  </Column>
  <Column field="status" header="Status">
    <template #body="{ data }">
      <span :class="getStatusClass(data.status)" class="px-2 py-1 rounded-full text-xs">
        {{ data.status }}
      </span>
    </template>
  </Column>
  <Column field="actions" header="Actions">
    <template #body="{ data }">
      <div class="flex gap-2">
        <button @click="handleView(data)" title="View">
          <i class="fas fa-eye"></i>
        </button>
        <button @click="handleEdit(data)" title="Edit">
          <i class="fas fa-edit"></i>
        </button>
      </div>
    </template>
  </Column>
</DataTable>

Slot parameters

The #body slot receives an object with the following properties:

• data - full row data object
• value - value of the specific column field

Examples

1. Compound name with subtitle

<Column field="name" header="Name">
  <template #body="{ data }">
    <div>
      <div class="font-medium">{{ data.name.main }}</div>
      <div class="text-sm text-gray-500">{{ data.name.sub }}</div>
    </div>
  </template>
</Column>

2. Badge with color

<Column field="role" header="Role">
  <template #body="{ data }">
    <span :class="data.role === 'admin' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'" 
          class="px-2 py-1 rounded-full text-xs font-medium">
      {{ data.role }}
    </span>
  </template>
</Column>

3. Status with icon

<Column field="status" header="Status">
  <template #body="{ data }">
    <div class="flex items-center gap-2">
      <span :class="getStatusIconClass(data.status)" class="text-lg">
        {{ getStatusIcon(data.status) }}
      </span>
      <span>{{ data.status }}</span>
    </div>
  </template>
</Column>

4. Action buttons

<Column field="actions" header="Actions">
  <template #body="{ data }">
    <div class="flex gap-2">
      <button @click.stop="handleView(data)" title="View">
        <i class="fas fa-eye"></i>
      </button>
      <button @click.stop="handleDownload(data)" title="Download">
        <i class="fas fa-download"></i>
      </button>
    </div>
  </template>
</Column>

Important: Use @click.stop for buttons in slots to prevent row click triggering.

Installation

npm install @opengis/table

Usage

<template>
  <DataTable
    :rows="data"
    :columns="columns"
    :selectable="true"
    @update:selectedRows="handleSelection"
  />
</template>

<script setup>
import { DataTable, Column } from '@opengis/table';

const data = ref([
  { id: 1, name: 'Product A', category: 'Electronics' },
  { id: 2, name: 'Product B', category: 'Books' }
]);

const columns = ref([
  { field: 'id', header: 'ID' },
  { field: 'name', header: 'Name' },
  { field: 'category', header: 'Category' }
]);
</script>

Theme options

| Prop | Type | Default | Description | |-------|-----|------------------|------| | theme | 'light' \| 'dark' \| 'auto' | 'light' | Table theme |

License

MIT