krc-table

    1.0.5 • Public • Published

    krc-table

    ReactJS controls: Data table by Kraken team!

    NPM version npm download

    install

    krc-table

    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.

    Install

    npm i krc-table

    DownloadsWeekly Downloads

    1

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • luonguit