import AdminTablePage from "admin-table-page";

// Only one of the following two style files needs to be imported

// If you don't want to change the theme of element-plus, import like this:
import "admin-table-page/lib/style.css";
// If you custom your element-plus theme, import like this:
import "admin-table-page/style/index.scss";

import { createApp } from "vue";

const app = createApp(...);
app.use(ConfigTable);

<template> 
  <admin-table-page
    :columns="columns"
    :fetch-method="getDataApi"
    :tool-buttons="toolButtons"
    :refresh="5000"
    :action-column="actionColumn"
    selectable="multiple"
    row-key="id"
  />
</template>

<script setup>
import { AdminTablePage } from "admin-table-page";
// Only one of the following two style files needs to be imported
// If you don't want to change the theme of element-plus
import "admin-table-page/lib/style.css";
// If you custom your element-plus theme
import "admin-table-page/style/index.scss";

const columns = [{
  prop: "name",
  label: "Name",
  filterable: true
}, {
  prop: "age",
  label: "Age",
  filterOptions: {
    type: "select",
    options: ["Under 10 years old", "10 to 20 years old"]
  }
}];

const toolButtons = [{
  text: "New Record",
  icon: "Plus",
  onClick: handleAdd
}]

const actionColumn = [{
  text: "Edit",
  onClick: row => handleEdit(row)
}, {
  text: "Delete",
  onClick: row => handleDelete(row)
}]

const getDataApi = () => {
  return new Promise((resolve, reject) => {
    resolve({
      total: 2,
      list: [{
        name: "name1",
        age: 1
      }, {
        name: "name2",
        age: 2
      }]
    })
  })
}

</script>

const toolButtons = [{
  text: "test button",
  onClick: () => { console.log("it's toolbar button")},
  icon: "Plus",
  type: "danger",
  link
}]

const columns = [{
  prop: "username",
  label: "Username",
  filterable: true
}, {
  prop: "age",
  label: "Age",
  filterOptions:{
    type: "select",
    options: ["18", "19"],
    defaultHidden: true
  }
}]