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