A Vue 3 data table component with advanced features
npm install @opengis/tableFull-featured table component for Vue 3 with TypeScript, supporting pagination, row selection, sorting, and custom slots.
- ✅ 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
The component supports custom slots to create custom table cells. Use template #body in the Column component:
``vue`
{{ data.name.main }}
{{ data.name.sub }}
{{ data.status }}
The #body slot receives an object with the following properties:
- data - full row data objectvalue
- - value of the specific column field
#### 1. Compound name with subtitle
`vue`
{{ data.name.main }}
{{ data.name.sub }}
#### 2. Badge with color
`vue`
class="px-2 py-1 rounded-full text-xs font-medium">
{{ data.role }}
#### 3. Status with icon
`vue`
{{ getStatusIcon(data.status) }}
{{ data.status }}
#### 4. Action buttons
`vue`
Important: Use @click.stop for buttons in slots to prevent row click triggering.
`bash`
npm install @opengis/table
`vue
:columns="columns"
:selectable="true"
@update:selectedRows="handleSelection"
/>
`
| Prop | Type | Default | Description |
|-------|-----|------------------|------|
| theme | 'light' \| 'dark' \| 'auto' | 'light'` | Table theme |
MIT