0.1.6 • Published 4 years ago
dynamictable-vissoft v0.1.6
VissoftDynamictable
Bảng biểu động cho phép thay đổi cấu trúc bảng biểu dựa theo cấu hình về tìm kiếm, hiển thị cột, phân trang, hiển thị action trong cột, ...
Tính năng
- Cấu hình filter
- Cấu hình cột
- Cấu hình phân trang
- Cấu hình hiển thị action trong column
- Cấu hình hiển thị action checkbox
Các biến input đầu vào
- options : cấu hình bảng biểu. Kiểu object theo interface sau:
displayCheckboxColumn: hiển thị cột, // kiểu boolean
rowSelectedOptions : style của dòng khi selected, // kiểu object (textColor,fillColor,fontSize,alignment,wrapText)
idName? : giá trị id name của row, kiểu string. Mặc định 'id'
- columnOptions : cấu hình hiển thị cột. Kiểu array theo interface sau:
title: Tên cột, // kiểu string
name: Tên biến, // kiểu string
format: kiểu dữ liệu hiển thị trên từng ô, // kiểu string (text,number,date,time,datetime,percent,degree,radian)
display: Có hiển thị hay không, // kiểu boolean
headerOptions: // style của dòng đầu của cột, // kiểu object (textColor,fillColor,fontSize,alignment,wrapText)
contentOptions: // style của các dòng dưới của cột, // kiểu object (textColor,fillColor,fontSize,alignment,wrapText)
- filterOptions : cấu hình hiển thị filter. Kiểu mảng theo interface sau:
title: Tên cột, // kiểu string
name: Tên biến, // kiểu string
value: giá trị filtẻr, // kiểu any
type: loại search, // kiểu string (text,number,date,time,datetime,percent,select)
- data: dữ liệu dòng cột
Các function output
- searchChange mặc định biến trong hàm trả về là 1 object có interface sau:
paging: dữ liệu phân trang
search: dữ liệu search
- currentPage set page hiện tại
- selectedRow set active row hiện tại
Các module phụ thuộc:
- ngx-bootstrap
- ngx-pagination
- bootstrap
- font-awesome
Module bắt buộc khi chạy:
- BrowserAnimationsModule
- BrowserModule
Module nên cài khi chạy để không bị báo đỏ khi import component:
- CUSTOM_ELEMENTS_SCHEMA (khai báo schemas: CUSTOM_ELEMENTS_SCHEMA trong @NgModule)
Css cần thiết để chạy:
- ./node_modules/bootstrap/dist/css/bootstrap.min.css,
- ./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css,
- ./node_modules/font-awesome/scss/font-awesome.scss