mse-table-api

mse-table-api merupakan component yang digunakan untuk menampilkan list data dalam bentuk table yang didapatkan dari API.

History versi

Features

• Kolom pencarian dinamis
• Penyesuaian kolom yang ingin ditampilkan

Tech

Untuk menggunakan mse-table-api kamu membutuhkan:

• AngularJS - HTML enhanced for web apps!
• node.js - evented I/O for the backend
• jQuery -

And of course Dillinger itself is open source with a public repository on GitHub.

Installation

Dillinger requires Node.js v10+ to run.

Install the dependencies and devDependencies and start the server.

cd project
npm i library-table-api

Development

update html yang kamu punya dengan :

<div class="row">
    <div class="col-xl-11">
        <mse-table-api [tableModel]="tableModel"></mse-table-api>
    </div>
</div>

Typescript

import {TableModel} from 'library-table-api/lib/shared/table/model/table-model';

export class SampleClass implements OnInit {

  tableModel : TableModel =
  {
    title : "Data Master Brand",
    addButton : true,
    editButton : true,
    getListUrl : GET_LIST_BRAND,
    totalrows : 0,
    paginationInit :
    {
      page : 1,
      size : 10,
      orderby : "modifieddate desc",
      query : ""
    },
    tableData : [
      {
          headerName : "Group",
          jsonName   : "group_name",
          search : {
              inputType :  "text",
              inputQuery : "full_like",
          }
      },
      {
          headerName : "Brand",
          jsonName   : "name",
          search : {
              inputType :  "text",
              inputQuery : "full_like",
          }
      },
      {
          headerName : "Status",
          jsonName   : "isactive",
          booleanValue : 
          { 
            isactive : 
            {
              trueValue : "Active",
              falseValue : "Inactive"
            }
          },
          search : {
              inputType :  "select",
              inputQuery : "equals",
              options : [
                {key: "All", value: ""},
                {key: "Active", value: "true"},
                {key: "Inactive", value: "false"}
              ]
          }
      },
      {
          headerName : "Modified Date",
          jsonName   : "modifieddate",
      },
    ],
  };

Input Parameter dan definisi:

  tableModel : TableModel =
  {
    title : String
    addButton : Boolean,
    editButton : Boolean,
    getListUrl :String,
    totalrows : Number,
    paginationInit :
    {
      page : Number,
      size : Number,
      orderby : "String String", contoh: "Nama kolom asc || desc"
      query : ""
    },
    tableData : [
      {
          headerName : String,
          jsonName   : String,
          search : {
              inputType :  String, parameter : text || select 
              inputQuery : "full_like", parameter : full_like || in || equals
          }
      },
    ],
  };
 

inputType parameter | Syntax | Description | | ----------- | ----------- | | text | menampilkan field dalam bentuk text | | select | menampilkan field dalam bentuk dropdown |

inputQuery parameter | Syntax | Description | | ----------- | ----------- | | full_like | menampilkan hasil pencarian berdasarkan pola tertentu | | in | menampilkan hasil pencarian dengan input lebih satu / kondisi or | | equals |menampilkan hasil pencarian sesuai dengan data yang diinput |

Note: parameter dapat berubah-ubah tergantung dengan jenis kebutuhan.