Skip to content

boussadjra/vueye-table

Repository files navigation

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.