@libs-ui/components-table 0.2.355-8 → 0.2.356-0
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 +137 -96
- package/package.json +25 -25
package/README.md
CHANGED
|
@@ -1,23 +1,26 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @libs-ui/components-table
|
|
2
|
+
|
|
3
|
+
> Component hiển thị dữ liệu dạng bảng mạnh mẽ với khả năng ghim cột, Virtual Scrolling, phân trang và hỗ trợ gọi API trực tiếp qua `httpRequestData`.
|
|
2
4
|
|
|
3
5
|
## Giới thiệu
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
`LibsUiComponentsTableComponent` là một giải pháp toàn diện để hiển thị danh sách dữ liệu lớn. Nó tích hợp sẵn Virtual Scrolling để tối ưu hiệu năng, cơ chế ghim cột (Fixed Columns) linh hoạt và khả năng kết nối trực tiếp với các API service thông qua cấu hình `httpRequestData`.
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
6
10
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
11
|
+
- ✅ **Ghim cột (Sticky Columns)**: Hỗ trợ ghim các cột quan trọng bên trái thông qua `headerLeft`.
|
|
12
|
+
- ✅ **Virtual Scrolling**: Tối ưu hiệu năng cho danh sách hàng ngàn bản ghi.
|
|
13
|
+
- ✅ **Phân trang (Pagination)**: Hỗ trợ cả `scroll-infinity` và `click-pagination`.
|
|
14
|
+
- ✅ **Custom Template**: Tùy biến hiển thị từng row và cell thông qua cấu hình `colTemplateConfig`.
|
|
15
|
+
- ✅ **Sorting**: Tích hợp sẵn logic sắp xếp dữ liệu.
|
|
16
|
+
- ✅ **Checkbox Selection**: Hỗ trợ chọn một hoặc nhiều hàng cùng lúc.
|
|
17
|
+
- ✅ **Angular Signals**: Hoạt động mượt mà với Signal-based state management.
|
|
13
18
|
|
|
14
|
-
##
|
|
19
|
+
## Khi nào sử dụng
|
|
15
20
|
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
- Tùy chỉnh template hàng và cột qua `colTemplateConfig`
|
|
20
|
-
- Bắt sự kiện (`outSort`, `outClickButtonAction`, ...)
|
|
21
|
+
- Khi cần hiển thị dữ liệu dạng bảng với số lượng bản ghi lớn.
|
|
22
|
+
- Khi cần các tính năng Sort/Filter/Pagination kết nối trực tiếp với Backend.
|
|
23
|
+
- Khi bảng có nhiều cột thông tin và cần giữ các cột quan trọng luôn hiển thị (ghim cột).
|
|
21
24
|
|
|
22
25
|
## Cài đặt
|
|
23
26
|
|
|
@@ -25,107 +28,145 @@
|
|
|
25
28
|
npm install @libs-ui/components-table
|
|
26
29
|
```
|
|
27
30
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
yarn add @libs-ui/components-table
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Sử dụng
|
|
35
|
-
|
|
36
|
-
### Inline Template
|
|
31
|
+
## Import
|
|
37
32
|
|
|
38
33
|
```typescript
|
|
39
|
-
import { Component } from '@angular/core';
|
|
40
34
|
import { LibsUiComponentsTableComponent } from '@libs-ui/components-table';
|
|
41
35
|
|
|
42
36
|
@Component({
|
|
43
|
-
selector: 'app-table-demo',
|
|
44
37
|
standalone: true,
|
|
45
38
|
imports: [LibsUiComponentsTableComponent],
|
|
46
|
-
|
|
47
|
-
<libs_ui-components-table
|
|
48
|
-
[headerLeft]="headers"
|
|
49
|
-
[newData]="newData"
|
|
50
|
-
[showFooter]="true"
|
|
51
|
-
[paginationSetting]="{ position: 'bottom', numberPageDisplay: 5 }"></libs_ui-components-table>
|
|
52
|
-
`,
|
|
39
|
+
// ...
|
|
53
40
|
})
|
|
54
|
-
export class
|
|
55
|
-
headers = [
|
|
56
|
-
{ label: 'ID', orderby: 'id', hasSort: true },
|
|
57
|
-
{ label: 'Name', orderby: 'name', hasSort: true },
|
|
58
|
-
{ label: 'Age', orderby: 'age', hasSort: true },
|
|
59
|
-
];
|
|
60
|
-
|
|
61
|
-
data = [
|
|
62
|
-
{ id: 1, name: 'Alice', age: 30 },
|
|
63
|
-
{ id: 2, name: 'Bob', age: 28 },
|
|
64
|
-
{ id: 3, name: 'Charlie', age: 25 },
|
|
65
|
-
];
|
|
66
|
-
|
|
67
|
-
newData = { data: this.data, addToLastList: false };
|
|
68
|
-
}
|
|
41
|
+
export class YourComponent {}
|
|
69
42
|
```
|
|
70
43
|
|
|
71
|
-
|
|
44
|
+
## Ví dụ sử dụng
|
|
72
45
|
|
|
73
|
-
|
|
74
|
-
import { Component } from '@angular/core';
|
|
75
|
-
import { LibsUiComponentsTableComponent } from '@libs-ui/components-table';
|
|
46
|
+
### 1. Table thường với httpRequestData
|
|
76
47
|
|
|
77
|
-
|
|
78
|
-
selector: 'app-table-demo',
|
|
79
|
-
standalone: true,
|
|
80
|
-
imports: [LibsUiComponentsTableComponent],
|
|
81
|
-
templateUrl: './table-demo.component.html',
|
|
82
|
-
})
|
|
83
|
-
export class TableDemoComponent {
|
|
84
|
-
// giống ví dụ trên
|
|
85
|
-
}
|
|
86
|
-
```
|
|
48
|
+
Sử dụng `httpRequestData` là cách tốt nhất để component tự động quản lý việc tải dữ liệu, phân trang và sắp xếp.
|
|
87
49
|
|
|
88
50
|
```html
|
|
89
51
|
<libs_ui-components-table
|
|
90
|
-
[
|
|
91
|
-
[
|
|
92
|
-
[showFooter]="true"
|
|
93
|
-
[paginationSetting]="{ position: 'bottom', numberPageDisplay: 5 }"></libs_ui-components-table>
|
|
52
|
+
[headerRight]="headerConfig"
|
|
53
|
+
[httpRequestData]="userRequestConfig" />
|
|
94
54
|
```
|
|
95
55
|
|
|
96
|
-
|
|
56
|
+
```typescript
|
|
57
|
+
// Cấu hình gọi API từ service
|
|
58
|
+
readonly userRequestConfig = {
|
|
59
|
+
objectInstance: userService, // Inject của service chứa method lấy data
|
|
60
|
+
functionName: 'getUsers', // Tên phương thức gọi API
|
|
61
|
+
argumentsValue: [] // Tham số bổ sung nếu có
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
readonly headerConfig = [
|
|
65
|
+
{ label: 'ID', colTemplateConfig: [{ cssWrapper: '', fieldsConfig: [{ field: 'id' }] }] },
|
|
66
|
+
{ label: 'Name', hasSort: true, orderby: 'name', colTemplateConfig: [{ cssWrapper: 'font-bold', fieldsConfig: [{ field: 'name' }] }] }
|
|
67
|
+
];
|
|
68
|
+
```
|
|
97
69
|
|
|
98
|
-
|
|
99
|
-
|
|
70
|
+
### 2. Table ghim cột (Fixed Columns)
|
|
71
|
+
|
|
72
|
+
Ghim các cột quan trọng bên trái bằng cách sử dụng `headerLeft`. Các cột trong `headerRight` sẽ có thể cuộn ngang nếu vượt quá chiều rộng container.
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<libs_ui-components-table
|
|
76
|
+
[headerLeft]="leftPinnedColumns"
|
|
77
|
+
[headerRight]="scrollableColumns"
|
|
78
|
+
[httpRequestData]="userRequestConfig" />
|
|
79
|
+
```
|
|
100
80
|
|
|
101
|
-
## API
|
|
81
|
+
## API Documentation
|
|
102
82
|
|
|
103
83
|
### Inputs
|
|
104
84
|
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
|
|
|
109
|
-
|
|
|
110
|
-
| paginationSetting
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
|
121
|
-
|
|
|
122
|
-
|
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
85
|
+
| Property | Type | Default | Description |
|
|
86
|
+
| :----------------------------------- | :---------------------------------------- | :------------------- | :--------------------------------------------------------------------------- |
|
|
87
|
+
| `[httpRequestData]` | `IHttpRequestConfig` | `undefined` | **(Khuyên dùng)** Cấu hình service để component tự động gọi API lấy dữ liệu. |
|
|
88
|
+
| `[headerLeft]` | `ITableHeaderConfig[]` | `[]` | Danh sách cột được ghim cố định bên trái (Sticky). |
|
|
89
|
+
| `[headerRight]` | `ITableHeaderConfig[]` | `[]` | Danh sách các cột chính hiển thị trong vùng cuộn. |
|
|
90
|
+
| `[paginationSetting]` | `object` | `undefined` | Cấu hình hiển thị phân trang (showTotalPage, showInputGotoPage, ...). |
|
|
91
|
+
| `[fieldKey]` | `string` | `'id'` | Thuộc tính định danh duy nhất cho mỗi hàng dữ liệu. |
|
|
92
|
+
| `[loading]` | `boolean` | `false` | Trạng thái xoay loading (thường dùng khi không dùng httpRequestData). |
|
|
93
|
+
| `[newData]` | `TYPE_NEW_DATA_TABLE` | `undefined` | Dữ liệu đẩy trực tiếp vào bảng (dùng khi không dùng httpRequestData). |
|
|
94
|
+
| `[showFooter]` | `boolean` | `false` | Hiển thị footer của bảng. |
|
|
95
|
+
| `[footerLeft]` | `ITableFooterConfig[]` | `[]` | Cấu hình footer ghim bên trái. |
|
|
96
|
+
| `[footerRight]` | `ITableFooterConfig[]` | `[]` | Cấu hình footer bên vùng cuộn. |
|
|
97
|
+
| `[filter]` | `TYPE_DATA_FILTER_TABLE` | `{ filterData: {} }` | Cấu hình filter/search dữ liệu. |
|
|
98
|
+
| `[activityLoadData]` | `'scroll-infinity' \| 'click-pagination'` | `'scroll-infinity'` | Chế độ tải trang (vô hạn hoặc click). |
|
|
99
|
+
| `[barButtons]` | `IButton[]` | `[]` | Danh sách các nút thao tác nhanh trên header bar. |
|
|
100
|
+
| `[optimizeTableRenderByOnViewport]` | `boolean` | `false` | Tối ưu render bảng khi nằm trong viewport. |
|
|
101
|
+
| `[bufferAmount]` | `number` | `5` | Số lượng item render buffer cho Virtual Scroller. |
|
|
102
|
+
| `[enableUnequalChildrenSizes]` | `boolean` | `false` | Hỗ trợ item có kích thước không đều trong Virtual Scroller. |
|
|
103
|
+
| `[configTemplateItemCollapseExpand]` | `IConfigTemplateItemCollapseExpand` | `undefined` | Cấu hình template cho chức năng collapse/expand row. |
|
|
104
|
+
| `[noDataConfig]` | `ITableNoDataConfig` | `{...}` | Cấu hình text/icon khi không có dữ liệu. |
|
|
105
|
+
|
|
106
|
+
#### Outputs
|
|
107
|
+
|
|
108
|
+
| Property | Type | Description |
|
|
109
|
+
| ------------------------ | ------------------------- | ---------------------------------------------------------- |
|
|
110
|
+
| `(outKeysSelected)` | `Array<any>` | Emit danh sách các `fieldKey` của các hàng đang được chọn. |
|
|
111
|
+
| `(outSort)` | `ISortEvent` | Emit khi người dùng thực hiện sắp xếp cột. |
|
|
112
|
+
| `(outLoadMore)` | `ILoadMoreEvent` | Emit khi cần tải thêm dữ liệu (scroll infinity). |
|
|
113
|
+
| `(outClickButtonAction)` | `ITabelButtonActionEvent` | Emit khi click vào button trong template cell. |
|
|
114
|
+
| `(outLoading)` | `boolean` | Emit trạng thái loading của component. |
|
|
115
|
+
| `(outTotalItem)` | `number` | Emit tổng số lượng bản ghi hiện có. |
|
|
116
|
+
| `(outClickBarButton)` | `IButtonBarEvent` | Emit khi click vào nút trên thanh công cụ. |
|
|
117
|
+
|
|
118
|
+
## Types & Interfaces
|
|
119
|
+
|
|
120
|
+
### ITableHeaderConfig
|
|
121
|
+
|
|
122
|
+
```typescript
|
|
123
|
+
export interface ITableHeaderConfig {
|
|
124
|
+
label?: string | TYPE_OBJECT;
|
|
125
|
+
hasCheckbox?: boolean; // Có checkbox chọn row hay không
|
|
126
|
+
hasCheckboxAll?: boolean; // Có checkbox "Chọn tất cả" hay không
|
|
127
|
+
hasSort?: boolean; // Có nút sort hay không
|
|
128
|
+
orderby?: string; // Field dùng để sort
|
|
129
|
+
colTemplateConfig?: Array<ITableTemplateConfig>; // Cấu hình hiển thị cell
|
|
130
|
+
ngStyle?: TYPE_OBJECT;
|
|
131
|
+
ngClass?: TYPE_OBJECT;
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### ITableTemplateConfig
|
|
136
|
+
|
|
137
|
+
```typescript
|
|
138
|
+
export interface ITableTemplateConfig {
|
|
139
|
+
cssWrapper: string; // Class CSS cho wrapper của cell
|
|
140
|
+
fieldsConfig: Array<ITableFieldTemplateConfig>; // Danh sách các field hiển thị trong 1 cell
|
|
141
|
+
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### TYPE_NEW_DATA_TABLE
|
|
145
|
+
|
|
146
|
+
```typescript
|
|
147
|
+
export type TYPE_NEW_DATA_TABLE<T = TYPE_OBJECT> = {
|
|
148
|
+
data: WritableSignal<Array<WritableSignal<T>>>;
|
|
149
|
+
addToLastList?: boolean;
|
|
150
|
+
};
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
## Công nghệ
|
|
154
|
+
|
|
155
|
+
| Technology | Version | Purpose |
|
|
156
|
+
| ---------------- | ------- | ------------------------- |
|
|
157
|
+
| Angular | 18+ | Framework |
|
|
158
|
+
| Virtual Scroller | 15+ | Hiển thị dữ liệu lớn |
|
|
159
|
+
| Angular Signals | - | Quản lý trạng thái nội bộ |
|
|
160
|
+
| TailwindCSS | 3.x | Styling chính |
|
|
161
|
+
|
|
162
|
+
## Demo
|
|
163
|
+
|
|
164
|
+
```bash
|
|
165
|
+
npx nx serve core-ui
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
Truy cập: `http://localhost:4500/table`
|
|
169
|
+
|
|
170
|
+
## License
|
|
171
|
+
|
|
172
|
+
MIT
|
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.356-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/components-buttons-button": "0.2.
|
|
7
|
+
"@libs-ui/components-buttons-button": "0.2.356-0",
|
|
8
8
|
"@iharbeck/ngx-virtual-scroller": "15.2.0",
|
|
9
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
10
|
-
"@libs-ui/components-buttons-sort": "0.2.
|
|
11
|
-
"@libs-ui/components-popover": "0.2.
|
|
12
|
-
"@libs-ui/components-avatar": "0.2.
|
|
13
|
-
"@libs-ui/components-dropdown": "0.2.
|
|
14
|
-
"@libs-ui/components-line-clamp": "0.2.
|
|
15
|
-
"@libs-ui/components-list": "0.2.
|
|
16
|
-
"@libs-ui/components-switch": "0.2.
|
|
17
|
-
"@libs-ui/services-http-request": "0.2.
|
|
9
|
+
"@libs-ui/interfaces-types": "0.2.356-0",
|
|
10
|
+
"@libs-ui/components-buttons-sort": "0.2.356-0",
|
|
11
|
+
"@libs-ui/components-popover": "0.2.356-0",
|
|
12
|
+
"@libs-ui/components-avatar": "0.2.356-0",
|
|
13
|
+
"@libs-ui/components-dropdown": "0.2.356-0",
|
|
14
|
+
"@libs-ui/components-line-clamp": "0.2.356-0",
|
|
15
|
+
"@libs-ui/components-list": "0.2.356-0",
|
|
16
|
+
"@libs-ui/components-switch": "0.2.356-0",
|
|
17
|
+
"@libs-ui/services-http-request": "0.2.356-0",
|
|
18
18
|
"rxjs": "~7.8.0",
|
|
19
|
-
"@libs-ui/components-checkbox-group": "0.2.
|
|
20
|
-
"@libs-ui/components-checkbox-single": "0.2.
|
|
21
|
-
"@libs-ui/components-scroll-overlay": "0.2.
|
|
22
|
-
"@libs-ui/components-spinner": "0.2.
|
|
23
|
-
"@libs-ui/icons": "0.2.
|
|
24
|
-
"@libs-ui/pipes-call-function-in-template": "0.2.
|
|
25
|
-
"@libs-ui/pipes-check-selected-by-key": "0.2.
|
|
26
|
-
"@libs-ui/utils": "0.2.
|
|
19
|
+
"@libs-ui/components-checkbox-group": "0.2.356-0",
|
|
20
|
+
"@libs-ui/components-checkbox-single": "0.2.356-0",
|
|
21
|
+
"@libs-ui/components-scroll-overlay": "0.2.356-0",
|
|
22
|
+
"@libs-ui/components-spinner": "0.2.356-0",
|
|
23
|
+
"@libs-ui/icons": "0.2.356-0",
|
|
24
|
+
"@libs-ui/pipes-call-function-in-template": "0.2.356-0",
|
|
25
|
+
"@libs-ui/pipes-check-selected-by-key": "0.2.356-0",
|
|
26
|
+
"@libs-ui/utils": "0.2.356-0",
|
|
27
27
|
"@ngx-translate/core": "^15.0.0",
|
|
28
|
-
"@libs-ui/components-buttons-status": "0.2.
|
|
29
|
-
"@libs-ui/pipes-clone-object": "0.2.
|
|
30
|
-
"@libs-ui/pipes-security-trust": "0.2.
|
|
31
|
-
"@libs-ui/components-badge": "0.2.
|
|
32
|
-
"@libs-ui/pipes-convert-object-to-signal": "0.2.
|
|
33
|
-
"@libs-ui/pipes-get-value-of-object": "0.2.
|
|
28
|
+
"@libs-ui/components-buttons-status": "0.2.356-0",
|
|
29
|
+
"@libs-ui/pipes-clone-object": "0.2.356-0",
|
|
30
|
+
"@libs-ui/pipes-security-trust": "0.2.356-0",
|
|
31
|
+
"@libs-ui/components-badge": "0.2.356-0",
|
|
32
|
+
"@libs-ui/pipes-convert-object-to-signal": "0.2.356-0",
|
|
33
|
+
"@libs-ui/pipes-get-value-of-object": "0.2.356-0"
|
|
34
34
|
},
|
|
35
35
|
"sideEffects": false,
|
|
36
36
|
"module": "fesm2022/libs-ui-components-table.mjs",
|