att-table v1.0.9

ATT-TABLE

Installation

npm i att-table

Usage

template

<mydatatable :serverParams="datatableconfig" :column="column">

vue/nuxt

import attTable from "att-table";
export default {
 components: { attTable },
 data() {
    return {
      datatableconfig: {
          repo:"[Your Repo]",
          title:"Card Title",
          subtitle: "Card Subtitle",
          btnFilter: true,//default false,
          columnFilters:{
              
          }
      },
      column:[
        {
            title: "Name",
            field: "name",
            sort: true,
            order: "asc"
        },
        {
          title: "Account",
          field: "is_active",
          input: {
            type: "badge",
            condition: {
              "1": {
                class: "success",
                text: "Active"
              },
              "0": {
                class: "danger",
                text: "Not Active"
              }
            }
          }
        },
        {
            title:"Action",
            input:{
                type:"button",
                clickHandler:this.clickHandler,
                text:"Submit"
            }
         },
         {
            title: "Action",
            input: {
                type: "dropdown",
                text: "Submit",
                subaction: [
                  {
                    label: "Review Form",
                    clickHandler: this.onviewlpk,
                  },
                  {
                    label: "Disabled",
                    clickHandler:this.disabledHandler,
                    vif:function(i){
                      return i.is_active==1
                    },
                  },
                  {
                    label: "Enabled",
                    clickHandler:this.enabledHandler,
                    vif:function(i){
                      return i.is_active==0
                    },
                  }
                ]
          }
        },
      ]
 }

use advance filter

 <mydatatable :serverParams="datatableconfig" :column="column">
        <div class="form-group row">
          <label class="col-2 col-form-label">Name</label>
          <div class="col-10">
            <input class="form-control" placeholder="Search Name" v-model="datatableconfig.columnFilters.name" />
          </div>
        </div>
 </mydatatable>