<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import ImprovedElTable from '@ngekoding/el-table'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.use(ImprovedElTable)

export default {
  data() {
    return {
      keyword: '',
      data: [
        { name: 'John Doe', age: 25, email: '[email protected]', address: '123 Main Street', phone: '555-1234' },
        { name: 'Jane Smith', age: 30, email: '[email protected]', address: '456 Elm Street', phone: '555-5678' },
        { name: 'Robert Johnson', age: 35, email: '[email protected]', address: '789 Oak Street', phone: '555-9012' },
      ]
    }
  }
}
</script>

<template>
  <div class="demo">
    <h1>@ngekoding/el-table demo</h1>
    <div class="table-header">
      <h2>Users</h2>
      <el-input
        v-model="keyword"
        placeholder="Search..."
        size="small"
        class="input-filter"
      />
    </div>
    <i-el-table
      :data="data"
      :search-keyword="keyword"
      :search-columns="['name', 'address', 'email']"
      :search-delay="250"
    >
      <i-el-table-column type="row-number" label="#" width="50" />
      <i-el-table-column prop="name" label="Name" sortable />
      <i-el-table-column prop="address" label="Address" />
      <i-el-table-column prop="email" label="Email" />
      <i-el-table-column prop="phone" label="Phone" searchable />
    </i-el-table>
  </div>
</template>

<style>
.demo {
  max-width: 1000px;
  margin: 20px auto;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input-filter {
  width: 250px;
}
</style>