vueye-table
v2.0.0-alpha.14
Published
Vue data table
Downloads
81
Maintainers
Readme
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.