Awesome

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

Prop Name	Type	Default Value	Description
data	TData[]	[]	An array of data for the table.
columnHeaders	TColumn[] or a function returning an array	[]	An array of column headers for the table.
itemValue	string	'id'	The property name used as a unique identifier for each item.
perPage	number	10	The number of items displayed per page.
currentPage	number	1	The current page number.
perPageOptions	number[] or a function returning an array	[5, 10, 20, 30]	An array of options for the number of items per page.
loading	boolean	false	Indicates whether the table is in a loading state.
selected	TData[], Row[], or null	null	An array of selected items or rows.
selectMode	'page' or 'all'	'all'	The mode for selecting items: 'page' or 'all'.
caption	string	''	The table's caption.
summary	string	''	The table's summary.

VueyeTableEmits

Emit Name	Parameters	Description
update:loading	value: boolean	Emits when the loading state changes.
update:selected	value: T[]	Emits when the selected items change.

PaginationEmits

Emit Name	Parameters	Description
update:currentPage	value: number	Emits when the current page changes.
update:perPage	value: number	Emits when the number of items per page changes.

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.