@libs-ui/components-table 0.2.279 → 0.2.280

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.
Files changed (2) hide show
  1. package/README.md +132 -2
  2. package/package.json +25 -25
package/README.md CHANGED
@@ -1,3 +1,133 @@
1
- # table
1
+ # Table
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
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.279",
3
+ "version": "0.2.280",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^18.2.0",
6
6
  "@angular/core": "^18.2.0",
7
- "@libs-ui/components-buttons-button": "^0.2.279",
7
+ "@libs-ui/components-buttons-button": "^0.2.280",
8
8
  "@iharbeck/ngx-virtual-scroller": "15.2.0",
9
- "@libs-ui/interfaces-types": "^0.2.279",
10
- "@libs-ui/components-buttons-sort": "^0.2.279",
11
- "@libs-ui/components-popover": "^0.2.279",
12
- "@libs-ui/components-avatar": "^0.2.279",
13
- "@libs-ui/components-dropdown": "^0.2.279",
14
- "@libs-ui/components-line-clamp": "^0.2.279",
15
- "@libs-ui/components-list": "^0.2.279",
16
- "@libs-ui/components-switch": "^0.2.279",
17
- "@libs-ui/services-http-request": "^0.2.279",
9
+ "@libs-ui/interfaces-types": "^0.2.280",
10
+ "@libs-ui/components-buttons-sort": "^0.2.280",
11
+ "@libs-ui/components-popover": "^0.2.280",
12
+ "@libs-ui/components-avatar": "^0.2.280",
13
+ "@libs-ui/components-dropdown": "^0.2.280",
14
+ "@libs-ui/components-line-clamp": "^0.2.280",
15
+ "@libs-ui/components-list": "^0.2.280",
16
+ "@libs-ui/components-switch": "^0.2.280",
17
+ "@libs-ui/services-http-request": "^0.2.280",
18
18
  "rxjs": "~7.8.0",
19
- "@libs-ui/components-checkbox-group": "^0.2.279",
20
- "@libs-ui/components-checkbox-single": "^0.2.279",
21
- "@libs-ui/components-scroll-overlay": "^0.2.279",
22
- "@libs-ui/components-spinner": "^0.2.279",
23
- "@libs-ui/icons": "^0.2.279",
24
- "@libs-ui/pipes-call-function-in-template": "^0.2.279",
25
- "@libs-ui/pipes-check-selected-by-key": "^0.2.279",
26
- "@libs-ui/utils": "^0.2.279",
19
+ "@libs-ui/components-checkbox-group": "^0.2.280",
20
+ "@libs-ui/components-checkbox-single": "^0.2.280",
21
+ "@libs-ui/components-scroll-overlay": "^0.2.280",
22
+ "@libs-ui/components-spinner": "^0.2.280",
23
+ "@libs-ui/icons": "^0.2.280",
24
+ "@libs-ui/pipes-call-function-in-template": "^0.2.280",
25
+ "@libs-ui/pipes-check-selected-by-key": "^0.2.280",
26
+ "@libs-ui/utils": "^0.2.280",
27
27
  "@ngx-translate/core": "^15.0.0",
28
- "@libs-ui/components-buttons-status": "^0.2.279",
29
- "@libs-ui/pipes-clone-object": "^0.2.279",
30
- "@libs-ui/pipes-security-trust": "^0.2.279",
31
- "@libs-ui/components-badge": "^0.2.279",
32
- "@libs-ui/pipes-convert-object-to-signal": "^0.2.279",
33
- "@libs-ui/pipes-get-value-of-object": "^0.2.279"
28
+ "@libs-ui/components-buttons-status": "^0.2.280",
29
+ "@libs-ui/pipes-clone-object": "^0.2.280",
30
+ "@libs-ui/pipes-security-trust": "^0.2.280",
31
+ "@libs-ui/components-badge": "^0.2.280",
32
+ "@libs-ui/pipes-convert-object-to-signal": "^0.2.280",
33
+ "@libs-ui/pipes-get-value-of-object": "^0.2.280"
34
34
  },
35
35
  "sideEffects": false,
36
36
  "module": "fesm2022/libs-ui-components-table.mjs",