xaksis / vue-good-table

An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc
https://xaksis.github.io/vue-good-table/
MIT License
2.16k stars 405 forks source link

Preserving Selected Rows After Filtering #965

Open hsnbsrn opened 1 year ago

hsnbsrn commented 1 year ago

I need assistance regarding an issue I am encountering while using Vue Good Table. Below is a Vue component that utilizes Vue Good Table to display a table and its rows.

<vue-good-table
          :columns="columns"
          :rows="updatedRows"
          :search-options="{
            enabled: true,
            externalQuery: searchTerm }"
          :select-options="{
            enabled: true,
            selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row
            selectionInfoClass: 'custom-class',
            selectionText: 'satır seçildi',
            clearSelectionText: 'kaldır',
            disableSelectInfo: false, // disable the select info panel on top
            selectAllByGroup: true, // when used in combination with a grouped table, add a checkbox in the header row to check/uncheck the entire group
          }"
          :pagination-options="{
            enabled: true,
            perPage:pageLength
          }"
          @on-selected-rows-change="selectionChanged"
      >

  computed: {
    updatedRows() {
      return this.rows.map((row) => {
        const brand = this.brands.find((item) => item.id === row.markaId);
        const categorie = this.categories.find((item) => item.id === row.kategoriId);
        const date = new Date(row.alimTarihi);
        const date2 = new Date(row.garantiBitis);
        return {
          ...row,
          markaAdi: brand ? brand.markaAdi : "Bilinmeyen Marka",
          kategoriAdi: categorie ? categorie.kategoriAdi : "Bilinmeyen Kategori",
          alimTarihiFormat: format(date, "dd-MM-yyyy"),
          garantiBitisFormat: format(date2, "dd-MM-yyyy"),
        };
      });
    },
  },

  methods: {
    selectionChanged(params) {
      this.selectedRows = params.selectedRows;
    },
  },

In the table, users can select specific rows. However, I noticed that when I apply a filter, the selected rows are getting lost. Ideally, I would like the selected rows to remain selected even after applying a filter.

For instance, if a user has selected a few rows and then applies a filter, I want these selected rows to still be selected after the filtering process.

In the current code, I am storing the selected rows in an array named selectedRows. However, it seems that this array gets reset after filtering.

How can I address this issue? What steps should I take to ensure that selected rows in Vue Good Table remain selected even after filtering?

tknrn23 commented 1 year ago

Hello, same problem for me too; All selected rows are losts when i tried to search another value (in rows) to select Thank's for responding