Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preserving Selected Rows After Filtering #965

Open
hsnbsrn opened this issue Aug 7, 2023 · 1 comment
Open

Preserving Selected Rows After Filtering #965

hsnbsrn opened this issue Aug 7, 2023 · 1 comment

Comments

@hsnbsrn
Copy link

hsnbsrn commented Aug 7, 2023

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
Copy link

tknrn23 commented Oct 2, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants