[Feature Request] Filter not working when use sorting and pagination

[Fikri32]

``### I am opening an issue for vue-easytable

Issue Type

Feature

Issue Title

Filter not working when use sorting and pagination

What problem does this feature solve?

want to table can filter sort and do pagination

What does the proposed API look like?

here my code

<template>
  <div>
    <ve-table
      style="width: 100%"
      rowKeyFieldName="rowkey"
      :fixed-header="true"
      :columns="columns"
      :table-data="NewData"
      :sort-option="sortOption"
    />
    <div class="table-pagination">
      <ve-pagination
        :total="totalCount"
        :page-index="pageIndex"
        :page-size="pageSize"
        @on-page-number-change="pageNumberChange"
        @on-page-size-change="pageSizeChange"
      />
    </div>
  </div>
</template>
<style>
.table-pagination {
  margin-top: 20px;
  text-align: right;
}
.table-body-cell-class2 {
  background: orange !important;
  color: #fff !important;
}
</style>
<script>
export default {
  data() {
    return {
      sortOption: {
        multipleSort: true,
        sortChange: (params) => {
          console.log("sortChange::", params);
          this.sortChange(params);
        },
      },
      // real table data
      tableData: [],
      serviceData: [],
      // page index
      pageIndex: 1,
      // page size
      pageSize: 10,
    };
  },
  async mounted() {
    await this.callService();
    setInterval(() => {
      this.callService();
    }, 60000);
  },
  computed: {
    filterList() {
      let dates = [...new Set(this.tableData.map((x) => x.type))];
      let result = [];
      for (let i = 0; i < dates.length; i++) {
        result.push({ value: i, label: dates[i], selected: false });
      }
      return result;
    },
    columns() {
      return [
        {
          field: "",
          key: "a",
          title: "#",
          align: "center",
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            return (this.pageIndex - 1) * this.pageSize + rowIndex + 1;
          },
        },
        {
          field: "region",
          key: "b",
          title: "Region",

        },
        {
          field: "type",
          key: "c",
          title: "Type",

          // filter
            filter: {
              filterList: this.filterList,
              // filter confirm hook
              filterConfirm: (filterList) => {
                const labels = filterList
                  .filter((x) => x.selected)
                  .map((x) => x.label);
                this.searchByDateField(labels);
              },
              // filter reset hook
              filterReset: (filterList) => {
                this.searchByDateField([]);
              },
            },
        },
        {
          title: "Total",
          children: [
            {
              field: "total",
              key: "d",
              title: "3D",
              width: 100,
              sortBy: "",
            },
          ],
        },

      ];
    },
    NewData() {
      const { pageIndex, pageSize } = this;
      return this.serviceData.slice(
        (pageIndex - 1) * pageSize,
        pageIndex * pageSize
      );
    },
    totalCount() {
      return this.serviceData.length;
    },
  },
  methods: {
    // page number change
    pageNumberChange(pageIndex) {
      this.pageIndex = pageIndex;
    },

    // page size change
    pageSizeChange(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
    },

    async callService() {
        this.dataService = [
          { region: "West", type: 'A',total:100},
          { region: "North", type: 'B',total:200 },
          { region: "Center", type: 'C',total:300},
        ];
      this.serviceData.splice(0, this.serviceData.length);
      for (var i = 0; i < this.dataService.length; i++) {
        this.serviceData.push({
          region: this.dataService[i].region,
          type: this.dataService[i].type,
          total: this.dataService[i].total,
        });
      }
      //   console.log(this.tableData);
    },
    sortChange(params) {
      let data = this.serviceData.slice(0);

      data.sort((a, b) => {
        if (params.total) {
          if (params.total === "asc") {
            return a.total - b.total;
          } else if (params.total === "desc") {
            return b.total - a.total;
          } else {
            return 0;
          }
        }
      });
      this.serviceData = data;
    },
    // search by date field
    searchByDateField(labels) {
      this.tableData = this.serviceData.filter(
        (x) => labels.length === 0 || labels.includes(x.type)
      );
    },
  },
};
</script>