krc-table

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.