Element UI Datatable

<script>
import { Table, TableColumn, Select, Option } from 'element-ui';
import RouteBreadCrumb from '@/components/Breadcrumb/RouteBreadcrumb'
import { BasePagination } from '@/components';
import clientPaginationMixin from './PaginatedTables/clientPaginationMixin'
import swal from 'sweetalert2';
import users from './users2';

export default {
  mixins: [clientPaginationMixin],
  components: {
    BasePagination,
    RouteBreadCrumb,
    [Select.name]: Select,
    [Option.name]: Option,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn
  },
  data() {
    return {
      propsToSearch: ['name', 'email', 'age'],
      tableColumns: [
        {
          type: 'selection'
        },
        {
          prop: 'name',
          label: 'Name',
          minWidth: 160,
          sortable: true
        },
        {
          prop: 'position',
          label: 'Position',
          minWidth: 220,
          sortable: true
        },
        {
          prop: 'city',
          label: 'Office',
          minWidth: 135,
          sortable: true
        },
        {
          prop: 'age',
          label: 'Age',
          minWidth: 100,
          sortable: true
        },
        {
          prop: 'createdAt',
          label: 'Start Date',
          minWidth: 150,
          sortable: true
        },
        {
          prop: 'salary',
          label: 'Salary',
          minWidth: 120,
          sortable: true
        }
      ],
      tableData: users,
      selectedRows: []
    };
  },
  methods: {
    paginationChanged(page) {
      this.pagination.currentPage = page
    }
  }
};
</script>

<div>
  <card class="no-border-card" body-classes="px-0 pb-1" footer-classes="pb-2">
    <template slot="header">
      <h3 class="mb-0">Paginated tables</h3>
      <p class="text-sm mb-0">
        This is a client side example of paginated tables using element-ui tables.
      </p>
    </template>
    <div>
      <b-col cols="12" class="d-flex justify-content-center justify-content-sm-between flex-wrap"
      >
        <el-select
          class="select-primary pagination-select"
          v-model="pagination.perPage"
          placeholder="Per page"
        >
          <el-option
            class="select-primary"
            v-for="item in pagination.perPageOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>

        <div>
          <base-input v-model="searchQuery"
                      prepend-icon="fas fa-search"
                      placeholder="Search...">
          </base-input>
        </div>
      </b-col>
      <el-table :data="queriedData"
                row-key="id"
                header-row-class-name="thead-light"
                @sort-change="sortChange"
                @selection-change="selectionChange">
        <el-table-column
          v-for="column in tableColumns"
          :key="column.label"
          v-bind="column"
        >
        </el-table-column>
      </el-table>
    </div>
    <div
      slot="footer"
      class="col-12 d-flex justify-content-center justify-content-sm-between flex-wrap"
    >
      <div class="">
        <p class="card-category">
          Showing {{ from + 1 }} to {{ to }} of {{ total }} entries

          <span v-if="selectedRows.length">
            &nbsp; &nbsp;  rows selected
          </span>
        </p>

      </div>
      <base-pagination
        class="pagination-no-border"
        :current="pagination.currentPage"
        :per-page="pagination.perPage"
        :total="total"
        @change="paginationChanged($event)"
      >
      </base-pagination>
    </div>
  </card>
</div>