vueye-table v2.0.0-alpha.14

Vueye Table

Vueye Table is a Vue 3 component for displaying data in a table.

Installation

Vue 3:

npm install vueye-table

Nuxt :

npm install nuxt-vueye-table

Usage

Vue :

<script setup lang="ts">
    import { VueyeTable } from 'vueye-table'

    const items = [
        {
            id: 60,
            name: {
                first_name: 'Brahim',
                last_name: 'Boussadjra',
            },
            age: 30,
            address: {
                country: 'Algeria',
                city: 'Algiers',
            },
        },
        //...
    ]
</script>

<template>
    <VueyeTable :data="items" />
</template>

Nuxt :

// nuxt.config.js
export default defineNuxtConfig({
    modules: ['nuxt-vueye-table'],
    // ...
})

VueyeTableProps

VueyeTableEmits

PaginationEmits

SlotHeader

The SlotHeader component defines various slots for customizing the table header.

• headerCell.<ColumnKey>: Slot for customizing the content of a specific column header.
• headerCellContent.<ColumnKey>: Slot for customizing the content within a specific column header cell.
• headers: Slot for customizing the entire table header, containing all column headers.
• checkbox: Slot for customizing the checkbox used for selecting all items.

SlotRow

The SlotRow component defines various slots for customizing the table rows.

• itemCell.<ItemKey>: Slot for customizing the content of a specific item cell within a row.
• itemCellContent.<ItemKey>: Slot for customizing the content within a specific item cell.
• rows: Slot for customizing the entire table rows, containing all rows.
• row: Slot for customizing a specific row.
• checkbox: Slot for customizing the checkbox used for selecting a specific row.

You can use these Markdown tables to document the props, emits, and slot definitions for the data table and pagination components in your Vue 3 project.