krc-table
ReactJS controls: Data table by Kraken team!
install
HOW IT WORKS
install package
npm install --save krc-table
import styles
import 'krc-table/styles.css';
usage
import { DataTable } from "krc-table";
import 'krc-table/styles.css';
const customProductPrice = (item) => {
return Number(item.price.toFixed(1)).toLocaleString();
}
const selectedProductHeaders: any[] = [
{
text: "Id",
binding: "id"
},
{
text: "Full Name",
binding: "name"
},
{
text: "Description",
binding: "description"
},
{
text: "Origin Price",
binding: "price",
template: customProductPrice
}
];
const selectedProductActions = [
{
type: "Update",
className: "btn btn-primary btn-sm",
emitBinding: "id" // emit item id when firing
},
{
type: "Delete",
className: "btn btn-danger btn-sm",
emitBinding: "id" //// emit item id when firing
}
];
const products = "products": [
{
"id": 1,
"name": "Produdct 1",
"description": "description",
"image": "https://img.theculturetrip.com/x/smart/wp-content/uploads/2018/03/cosmetics.jpg",
"price": 500000
},
{
"id": 2,
"name": "Produdct 2",
"description": "description",
"image": "https://img.theculturetrip.com/x/smart/wp-content/uploads/2018/03/cosmetics.jpg",
"price": 50
},
{
"id": 3,
"name": "Produdct 3",
"description": "description",
"image": "https://img.theculturetrip.com/x/smart/wp-content/uploads/2018/03/cosmetics.jpg",
"price": 50
},
];
const pageSize = 2;
const pageCount = Math.floor(products.length / pageSize) + (products.length % pageSize === 0 ? 0 : 1);
onActionClick = e => {
if ("Update" === e.type) {
console.log("update item click", e);
}
if ("Delete" === e.type) {
console.log("delete item click", e);
}
};
// paging select new page
onPageChanged = page => {
console.log("click new paging ", page);
};
<DataTable
headers={selectedProductHeaders}
dataSources={products}
pageCount={pageCount}
rowActions={selectedProductActions}
onActionClick={onActionClick}
onPageChanged={onPageChanged}
/>
API references
Properties
Name | Type | Default | Description |
---|---|---|---|
headers | Object[] | [] | Items templates define header and binding |
rowActions | Object[] | [] | Item actions definitions |
dataSources | Object[] | [] | Data items |
pageCount | number | 1 | Total page view counts for paging |
onActionClick | Function | null | Item action click handler |
onPageChanged | Function | null | Select new page change handler |
License
krc-table is released under the MIT license.