tesss

<template>
  <div>
    <h1>Product List</h1>
    <vue-bootstrap4-table
      :rows="rows"
      :columns="columns"
      :config="config"
      @on-change-query="onChangeQuery"
      :totalRows="total_rows"
    ></vue-bootstrap4-table>
  </div>
</template>

<script>
import axios from "axios";
import VueBootstrap4Table from "vue-bootstrap4-table";
export default {
  components: {
    VueBootstrap4Table
  },
  data() {
    return {
      rows: [],
      columns: [
        {
          label: "No",
          name: "id",
          column_classes: "my-column-class1"
        },
        {
          label: "Shop Name",
          name: "shop_name",
          column_classes: "my-column-name",
          filter: {
            type: "simple",
            placeholder: "Enter first name"
          },
          sort: true
        },
        {
          label: "Action",
          name: "action",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        },
        {
          label: "Create On",
          name: "date",
          sort: true
        },
        {
          label: "Moderation Status",
          name: "moderation_status",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        },
        {
          label: "Status",
          name: "status",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Filter Status"
          }
        },
        {
          label: "Feature Product",
          name: "feature",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Feature"
          }
        },
        {
          label: "Add To Event",
          name: "add_event",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter event"
          }
        },
        {
          label: "Product Name",
          name: "product_name",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Product Name",
            debounceRate: 1000
          }
        },
        {
          label: "Image",
          name: "image",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        },
        {
          label: "Quantity",
          name: "quantity",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        },
        {
          label: "Price",
          name: "price",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter price"
          }
        },
        {
          label: "Price Modified",
          name: "proce_modified",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        },

        {
          label: "Last Price",
          name: "last_price",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        },
        {
          label: "Discount",
          name: "discount",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        },
        {
          label: "Add By",
          name: "add_by",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        },
        {
          label: "Category",
          name: "category",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        },
        {
          label: "Color",
          name: "color",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        },
        {
          label: "Brand",
          name: "brand",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        },
        {
          label: "Garansi",
          name: "garansi",
          sort: true,
          filter: {
            type: "simple",
            placeholder: "Enter Email"
          }
        }
      ],

      config: {

        server_mode: true,
        card_title: "User List"

      },
      queryParams: {
        sort: [],
        filters: [],
        product_name: "",
        global_search: "",
        per_page: 10,
        page: 1
      },
      total_rows: 0
    };
  },
  methods: {
    onChangeQuery(queryParams) {
     onChangeQuery(queryParams) {
    this.queryParams = queryParams;
    this.fetchData();
},
    },

    fetchData() {
      let self = this;
      axios
        .get("http://localhost:8081/administrator/product/list", {
          params: {
            queryParams: this.queryParams,
            page: this.queryParams.page
          }
        })
        .then(function(response) {
          // console.log(response.data);
          self.rows = response.data.data;
          self.total_rows = response.data.total_rows;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>