Vueye Table is a Vue 3 component for displaying data in a table.
Vue 3:
Nuxt :
npm install nuxt-vueye-table
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'],
// ...
}) 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. Emit Name Parameters Description update:loading value: boolean Emits when the loading state changes. update:selected value: T[] Emits when the selected items change. 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.
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.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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4