table-component-ant

Table data

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

Cài đặt

npm i @cuong.lv2/table or yarn add @cuong.lv2/table

Demo

https://gitlab.com/cuongle.3103/example-table-ant.git

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 { TableComponent } from '@cuong.lv2/table

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}/>