Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/boussadjra/vueye-table
A data table created using Vue.js
https://github.com/boussadjra/vueye-table
datatables vue-components vue-datatable vuejs2 vueye vueye-table
Last synced: 20 days ago
JSON representation
A data table created using Vue.js
- Host: GitHub
- URL: https://github.com/boussadjra/vueye-table
- Owner: boussadjra
- License: mit
- Created: 2018-08-26T22:13:07.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-03-30T07:19:31.000Z (8 months ago)
- Last Synced: 2024-10-20T08:51:55.717Z (26 days ago)
- Topics: datatables, vue-components, vue-datatable, vuejs2, vueye, vueye-table
- Language: Vue
- Homepage: https://boussadjra.github.io/vueye-table/
- Size: 6.83 MB
- Stars: 112
- Watchers: 5
- Forks: 15
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vueye Table
Vueye Table is a Vue 3 component for displaying data in a table.
## Installation
Vue 3:
```bash
npm install vueye-table
```
Nuxt :
```bash
npm install nuxt-vueye-table
```
## Usage
Vue :
```html
import { VueyeTable } from 'vueye-table'
const items = [
{
id: 60,
name: {
first_name: 'Brahim',
last_name: 'Boussadjra',
},
age: 30,
address: {
country: 'Algeria',
city: 'Algiers',
},
},
//...
]
```
Nuxt :
```js
// 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.`: Slot for customizing the content of a specific column header.
- `headerCellContent.`: 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.`: Slot for customizing the content of a specific item cell within a row.
- `itemCellContent.`: 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.