@libs-ui/components-table 0.2.279 → 0.2.281
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 +132 -2
- package/package.json +25 -25
package/README.md
CHANGED
|
@@ -1,3 +1,133 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Table
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Giới thiệu
|
|
4
|
+
|
|
5
|
+
`@libs-ui/components-table` là một component Table linh hoạt cho Angular, hỗ trợ:
|
|
6
|
+
|
|
7
|
+
- Cấu hình cột động với `ITableHeaderConfig`
|
|
8
|
+
- Hiển thị dữ liệu tĩnh hoặc tải dữ liệu động qua `newData` hoặc `httpRequestData`
|
|
9
|
+
- Tính năng phân trang, phân trang vô tận
|
|
10
|
+
- Tích chọn hàng với checkbox
|
|
11
|
+
- Sắp xếp cột và điều khiển nâng cao qua `outSort`, `outLoadMore`
|
|
12
|
+
- Hiển thị footer và các tính năng tùy chỉnh giao diện
|
|
13
|
+
|
|
14
|
+
## Tính năng
|
|
15
|
+
|
|
16
|
+
- Định nghĩa cột linh hoạt: tiêu đề, căn lề, tooltip, sort
|
|
17
|
+
- Tích hợp Selection (checkbox) và Select All
|
|
18
|
+
- Phân trang và load-more tự động với `outLoadMore`
|
|
19
|
+
- Tùy chỉnh template hàng và cột qua `colTemplateConfig`
|
|
20
|
+
- Bắt sự kiện (`outSort`, `outClickButtonAction`, ...)
|
|
21
|
+
|
|
22
|
+
## Cài đặt
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @libs-ui/components-table
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
hoặc
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
yarn add @libs-ui/components-table
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Sử dụng
|
|
35
|
+
|
|
36
|
+
### Inline Template
|
|
37
|
+
|
|
38
|
+
```typescript
|
|
39
|
+
import { Component } from '@angular/core';
|
|
40
|
+
import { LibsUiComponentsTableComponent } from '@libs-ui/components-table';
|
|
41
|
+
|
|
42
|
+
@Component({
|
|
43
|
+
selector: 'app-table-demo',
|
|
44
|
+
standalone: true,
|
|
45
|
+
imports: [LibsUiComponentsTableComponent],
|
|
46
|
+
template: `
|
|
47
|
+
<libs_ui-components-table
|
|
48
|
+
[headerLeft]="headers"
|
|
49
|
+
[newData]="newData"
|
|
50
|
+
[showFooter]="true"
|
|
51
|
+
[paginationSetting]="{ position: 'bottom', numberPageDispaly: 5 }">
|
|
52
|
+
</libs_ui-components-table>
|
|
53
|
+
`
|
|
54
|
+
})
|
|
55
|
+
export class TableDemoComponent {
|
|
56
|
+
headers = [
|
|
57
|
+
{ label: 'ID', orderby: 'id', hasSort: true },
|
|
58
|
+
{ label: 'Name', orderby: 'name', hasSort: true },
|
|
59
|
+
{ label: 'Age', orderby: 'age', hasSort: true }
|
|
60
|
+
];
|
|
61
|
+
|
|
62
|
+
data = [
|
|
63
|
+
{ id: 1, name: 'Alice', age: 30 },
|
|
64
|
+
{ id: 2, name: 'Bob', age: 28 },
|
|
65
|
+
{ id: 3, name: 'Charlie', age: 25 }
|
|
66
|
+
];
|
|
67
|
+
|
|
68
|
+
newData = { data: this.data, addToLastList: false };
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Sử dụng với file HTML
|
|
73
|
+
|
|
74
|
+
```typescript
|
|
75
|
+
import { Component } from '@angular/core';
|
|
76
|
+
import { LibsUiComponentsTableComponent } from '@libs-ui/components-table';
|
|
77
|
+
|
|
78
|
+
@Component({
|
|
79
|
+
selector: 'app-table-demo',
|
|
80
|
+
standalone: true,
|
|
81
|
+
imports: [LibsUiComponentsTableComponent],
|
|
82
|
+
templateUrl: './table-demo.component.html'
|
|
83
|
+
})
|
|
84
|
+
export class TableDemoComponent {
|
|
85
|
+
// giống ví dụ trên
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<libs_ui-components-table
|
|
91
|
+
[headerLeft]="headers"
|
|
92
|
+
[newData]="newData"
|
|
93
|
+
[showFooter]="true"
|
|
94
|
+
[paginationSetting]="{ position: 'bottom', numberPageDispaly: 5 }">
|
|
95
|
+
</libs_ui-components-table>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Công nghệ sử dụng
|
|
99
|
+
|
|
100
|
+
- **Angular 18** với standalone components và Signals
|
|
101
|
+
- **Tailwind CSS** cho layout demo
|
|
102
|
+
|
|
103
|
+
## API Reference
|
|
104
|
+
|
|
105
|
+
### Inputs
|
|
106
|
+
|
|
107
|
+
| Tên | Kiểu | Mặc định | Mô tả |
|
|
108
|
+
|---------------------|---------------------------------|------------|-------------------------------------------------|
|
|
109
|
+
| headerLeft | `ITableHeaderConfig[]` | `[]` | Cấu hình header cột bên trái |
|
|
110
|
+
| newData | `TYPE_NEW_DATA_TABLE` | `{}` | Dữ liệu hiển thị (mảng item, có thể thêm vào) |
|
|
111
|
+
| showFooter | `boolean` | `false` | Hiển thị footer |
|
|
112
|
+
| paginationSetting | `object` | `{}` | Cấu hình phân trang (vị trí, số items) |
|
|
113
|
+
| disableCheckbox | `boolean` | `false` | Vô hiệu hóa checkbox |
|
|
114
|
+
| sortLocal | `boolean` | `false` | Sử dụng sắp xếp cục bộ |
|
|
115
|
+
| filterOrSortLocal | `TYPE_TABLE_FILTER` | `undefined`| Hàm lọc/sort cục bộ |
|
|
116
|
+
| httpRequestData | `IHttpRequestConfig` | `undefined`| Cấu hình gọi API lấy dữ liệu |
|
|
117
|
+
| templateNoData | `TYPE_TEMPLATE_REF` | `undefined`| Template hiển thị khi không có dữ liệu |
|
|
118
|
+
| templateNoResult | `TYPE_TEMPLATE_REF` | `undefined`| Template hiển thị khi tìm không ra kết quả |
|
|
119
|
+
|
|
120
|
+
### Outputs
|
|
121
|
+
|
|
122
|
+
| Tên | Kiểu | Mô tả |
|
|
123
|
+
|-------------------|-------------------------------------------|-----------------------------------------------------|
|
|
124
|
+
| outLoadMore | `(event: ILoadMoreEvent) => void` | Sự kiện load thêm dữ liệu |
|
|
125
|
+
| outSort | `(event: ISortEvent) => void` | Sự kiện sắp xếp |
|
|
126
|
+
| outClickButtonAction | `(event: ITabelButtonActionEvent) => void` | Sự kiện click button action |
|
|
127
|
+
| outHoverButtonAction | `(event: IHoverButtonActionEvent) => void` | Sự kiện hover button action |
|
|
128
|
+
| outKeysSelected | `(event: { keys: any[] }) => void` | Trả về mảng keys đã chọn |
|
|
129
|
+
| outLoadDataError | `(error: IHttpResponseError) => void` | Sự kiện khi API lỗi |
|
|
130
|
+
|
|
131
|
+
### Interfaces
|
|
132
|
+
|
|
133
|
+
Xem chi tiết trong `libs-ui/components/table/src/interfaces`.
|
package/package.json
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-table",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.281",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^18.2.0",
|
|
6
6
|
"@angular/core": "^18.2.0",
|
|
7
|
-
"@libs-ui/components-buttons-button": "
|
|
7
|
+
"@libs-ui/components-buttons-button": "0.2.281",
|
|
8
8
|
"@iharbeck/ngx-virtual-scroller": "15.2.0",
|
|
9
|
-
"@libs-ui/interfaces-types": "
|
|
10
|
-
"@libs-ui/components-buttons-sort": "
|
|
11
|
-
"@libs-ui/components-popover": "
|
|
12
|
-
"@libs-ui/components-avatar": "
|
|
13
|
-
"@libs-ui/components-dropdown": "
|
|
14
|
-
"@libs-ui/components-line-clamp": "
|
|
15
|
-
"@libs-ui/components-list": "
|
|
16
|
-
"@libs-ui/components-switch": "
|
|
17
|
-
"@libs-ui/services-http-request": "
|
|
9
|
+
"@libs-ui/interfaces-types": "0.2.281",
|
|
10
|
+
"@libs-ui/components-buttons-sort": "0.2.281",
|
|
11
|
+
"@libs-ui/components-popover": "0.2.281",
|
|
12
|
+
"@libs-ui/components-avatar": "0.2.281",
|
|
13
|
+
"@libs-ui/components-dropdown": "0.2.281",
|
|
14
|
+
"@libs-ui/components-line-clamp": "0.2.281",
|
|
15
|
+
"@libs-ui/components-list": "0.2.281",
|
|
16
|
+
"@libs-ui/components-switch": "0.2.281",
|
|
17
|
+
"@libs-ui/services-http-request": "0.2.281",
|
|
18
18
|
"rxjs": "~7.8.0",
|
|
19
|
-
"@libs-ui/components-checkbox-group": "
|
|
20
|
-
"@libs-ui/components-checkbox-single": "
|
|
21
|
-
"@libs-ui/components-scroll-overlay": "
|
|
22
|
-
"@libs-ui/components-spinner": "
|
|
23
|
-
"@libs-ui/icons": "
|
|
24
|
-
"@libs-ui/pipes-call-function-in-template": "
|
|
25
|
-
"@libs-ui/pipes-check-selected-by-key": "
|
|
26
|
-
"@libs-ui/utils": "
|
|
19
|
+
"@libs-ui/components-checkbox-group": "0.2.281",
|
|
20
|
+
"@libs-ui/components-checkbox-single": "0.2.281",
|
|
21
|
+
"@libs-ui/components-scroll-overlay": "0.2.281",
|
|
22
|
+
"@libs-ui/components-spinner": "0.2.281",
|
|
23
|
+
"@libs-ui/icons": "0.2.281",
|
|
24
|
+
"@libs-ui/pipes-call-function-in-template": "0.2.281",
|
|
25
|
+
"@libs-ui/pipes-check-selected-by-key": "0.2.281",
|
|
26
|
+
"@libs-ui/utils": "0.2.281",
|
|
27
27
|
"@ngx-translate/core": "^15.0.0",
|
|
28
|
-
"@libs-ui/components-buttons-status": "
|
|
29
|
-
"@libs-ui/pipes-clone-object": "
|
|
30
|
-
"@libs-ui/pipes-security-trust": "
|
|
31
|
-
"@libs-ui/components-badge": "
|
|
32
|
-
"@libs-ui/pipes-convert-object-to-signal": "
|
|
33
|
-
"@libs-ui/pipes-get-value-of-object": "
|
|
28
|
+
"@libs-ui/components-buttons-status": "0.2.281",
|
|
29
|
+
"@libs-ui/pipes-clone-object": "0.2.281",
|
|
30
|
+
"@libs-ui/pipes-security-trust": "0.2.281",
|
|
31
|
+
"@libs-ui/components-badge": "0.2.281",
|
|
32
|
+
"@libs-ui/pipes-convert-object-to-signal": "0.2.281",
|
|
33
|
+
"@libs-ui/pipes-get-value-of-object": "0.2.281"
|
|
34
34
|
},
|
|
35
35
|
"sideEffects": false,
|
|
36
36
|
"module": "fesm2022/libs-ui-components-table.mjs",
|