Library-table-api-dummy NPM

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 |