vueye-table 2.0.0-alpha.6 → 2.0.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +89 -56
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,56 +1,89 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
1
|
+
# Vueye Table
|
|
2
|
+
|
|
3
|
+
Vueye Table is a Vue 3 component for displaying data in a table.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install vueye-table
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```vue
|
|
14
|
+
<template>
|
|
15
|
+
<VueyeTable
|
|
16
|
+
:data="data"
|
|
17
|
+
:columnHeaders="columnHeaders"
|
|
18
|
+
:itemValue="itemValue"
|
|
19
|
+
:perPage="perPage"
|
|
20
|
+
:currentPage="currentPage"
|
|
21
|
+
:perPageOptions="perPageOptions"
|
|
22
|
+
:loading="loading"
|
|
23
|
+
:selected="selected"
|
|
24
|
+
:selectMode="selectMode"
|
|
25
|
+
:caption="caption"
|
|
26
|
+
:summary="summary"
|
|
27
|
+
@update:loading="updateLoading"
|
|
28
|
+
@update:selected="updateSelected"
|
|
29
|
+
>
|
|
30
|
+
<template #headerCellContent.name="props">
|
|
31
|
+
{{ props.columnHeader.name }}
|
|
32
|
+
</template>
|
|
33
|
+
<template #itemCellContent.name="props">
|
|
34
|
+
{{ props.item.name }}
|
|
35
|
+
</template>
|
|
36
|
+
</VueyeTable>
|
|
37
|
+
</template>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### VueyeTableProps
|
|
41
|
+
|
|
42
|
+
| Prop Name | Type | Default Value | Description |
|
|
43
|
+
| --- | --- | --- | --- |
|
|
44
|
+
| data | TData[] | [] | An array of data for the table. |
|
|
45
|
+
| columnHeaders | TColumn[] or a function returning an array | [] | An array of column headers for the table. |
|
|
46
|
+
| itemValue | string | 'id' | The property name used as a unique identifier for each item. |
|
|
47
|
+
| perPage | number | 10 | The number of items displayed per page. |
|
|
48
|
+
| currentPage | number | 1 | The current page number. |
|
|
49
|
+
| perPageOptions | number[] or a function returning an array | [5, 10, 20, 30] | An array of options for the number of items per page. |
|
|
50
|
+
| loading | boolean | false | Indicates whether the table is in a loading state. |
|
|
51
|
+
| selected | TData[], Row[], or null | null | An array of selected items or rows. |
|
|
52
|
+
| selectMode | 'page' or 'all' | 'all' | The mode for selecting items: 'page' or 'all'. |
|
|
53
|
+
| caption | string | '' | The table's caption. |
|
|
54
|
+
| summary | string | '' | The table's summary. |
|
|
55
|
+
|
|
56
|
+
### VueyeTableEmits
|
|
57
|
+
|
|
58
|
+
| Emit Name | Parameters | Description |
|
|
59
|
+
| --------------- | -------------- | ------------------------------------- |
|
|
60
|
+
| update:loading | value: boolean | Emits when the loading state changes. |
|
|
61
|
+
| update:selected | value: T[] | Emits when the selected items change. |
|
|
62
|
+
|
|
63
|
+
### PaginationEmits
|
|
64
|
+
|
|
65
|
+
| Emit Name | Parameters | Description |
|
|
66
|
+
| ------------------ | ------------- | ------------------------------------------------ |
|
|
67
|
+
| update:currentPage | value: number | Emits when the current page changes. |
|
|
68
|
+
| update:perPage | value: number | Emits when the number of items per page changes. |
|
|
69
|
+
|
|
70
|
+
### SlotHeader
|
|
71
|
+
|
|
72
|
+
The SlotHeader component defines various slots for customizing the table header.
|
|
73
|
+
|
|
74
|
+
- `headerCell.<ColumnKey>`: Slot for customizing the content of a specific column header.
|
|
75
|
+
- `headerCellContent.<ColumnKey>`: Slot for customizing the content within a specific column header cell.
|
|
76
|
+
- `headers`: Slot for customizing the entire table header, containing all column headers.
|
|
77
|
+
- `checkbox`: Slot for customizing the checkbox used for selecting all items.
|
|
78
|
+
|
|
79
|
+
### SlotRow
|
|
80
|
+
|
|
81
|
+
The SlotRow component defines various slots for customizing the table rows.
|
|
82
|
+
|
|
83
|
+
- `itemCell.<ItemKey>`: Slot for customizing the content of a specific item cell within a row.
|
|
84
|
+
- `itemCellContent.<ItemKey>`: Slot for customizing the content within a specific item cell.
|
|
85
|
+
- `rows`: Slot for customizing the entire table rows, containing all rows.
|
|
86
|
+
- `row`: Slot for customizing a specific row.
|
|
87
|
+
- `checkbox`: Slot for customizing the checkbox used for selecting a specific row.
|
|
88
|
+
|
|
89
|
+
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.
|