Table data

Thư viện sử dụng Ant design.

Cài đặt

npm i table-component-ant or yarn add table-component-ant

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| |password| |url| |view| |view-edit| |view-edit-delete| |edit| |delete| |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 { TableComponent } from 'table-component-ant

const 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'
    },
    
]

<TableComponent columns={Col} data={array}/>