1.1.6 • Published 2 years ago
@cuong.lv2/table v1.1.6
Table data
Thư viện sử dụng Ant design.
Cài đặt
npm i @cuong.lv2/table or yarn add @cuong.lv2/table
API
| Props | Loại | Mô tả |
|---|---|---|
| columns | Array | Columns API |
| data | Array | |
| onEdit | func | |
| onDelete | func | |
| onView | func | |
| pagination | bool | |
| total | number | Total item |
| onTableChange | func | onTableChange => (page, pageSize) |
| isLoading | bool | |
| expandable | bool | |
| pageSizeOptions | Array | 20, 30, 50, 100, 200, 500 |
| pageSize | Number |
Columns API
| Props | Loại | Mô tả |
|---|---|---|
| title | text | |
| property | text | value giống response api |
| type | text | Type API |
| attributes | text | type = Obj |
Type API
| Type | Mô tả |
|---|---|
| stt | Số thứ tự |
| text | default |
| datetime | YYYY-MM-DD HH:mm:ss |
| number | Kiểu số vd: 1,000 |
| price | Giá tiền |
| duration | HH:mm:ss |
| obj | truyền thêm attributes |
| tag | |
| link | |
| audio | |
| array | |
| checkbox | |
| avatar | |
| customize | customColumn => (col, data, key) |
| fixed | bool |
| sort | bool |
| sortMultiple | number |
| width | number |
Ví dụ
let array = [
{
id: 1,
name: 'cuonglv'
info: {
address: 'HN',
phone: '123456'
}
}
]
import { SharedUiTable } from '@cuong.lv2/tableconst Col = [
{
title: 'Họ Tên',
property: 'name',
type: 'text'
},
{
title: 'Số điện thoại',
property: 'info',
type:'obj',
attributes: 'phone'
},
{
title: 'Địa chỉ',
property: 'info',
type:'obj',
attributes: 'address'
},
]<SharedUiTable columns={Col} data={array}/>