npm package: @opengis/table
Description: A Vue 3 data table component with advanced features
Author: softpro
Latest version: 0.0.46

# 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:

```vue
<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
```vue
<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
```vue
<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
```vue
<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
```vue
<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

```bash
npm install @opengis/table
```

## Usage

```vue
<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