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.