Element: [Feature request] Filtering tables through search field

[keystorm]

Sometimes filters aren't enough to limit a column of set values. Names, locations or any other arbitrary text don't benefit from filters and any workaround can feel a bit clunky.

It would be great using the same tooltip we use for filters and put a search field in it, allowing for arbitrary text to be searched in a certain column. This could be combined with traditional filters (particularly useful because you can filter by hidden values) for an all around table filtering.

I have taken a look at the code and it shouldn't be too hard to implement considering the way filters currently work. I would try it but I'm honestly swamped right now and don't have enough time to get it right.

Great job all around folks. This toolkit is amazing and very promising!

[engriary]

I need this toolkit,too.

[Leopoldthecoder]

@keystorm Maybe you can help us with this feature when you have more time.

[Chris0lsen]

I also needed this, so I hacked something together in the filter-panel and table-store vue files to suit my needs... It's not ready for a PR (because I removed the default functionality), but I'm happy to share the code, for anybody who finds it helpful (and maybe wants to extend the original functionality instead of overwriting it).

In table/src/table-store.js:

filterChange(states, options) {
  let { column, values, silent } = options;

  const prop = column.property;
  const filters = {};

  if (prop) {
    states.filters[column.id] = values;
    filters[column.columnKey || column.id] = values;
  }
  let data = states._data;

  Object.keys(states.filters).forEach((columnId) => {
    const values = states.filters[columnId].toString();
    if (!values || values.length === 0) return;
    const column = getColumnById(this.states, columnId);
    data = data.filter((row) => {
      if (row[column.label]) {
        return row[column.label].toString().toLowerCase().indexOf(values.toLowerCase()) > -1;
      }
    });
  }
}

And in table/src/filter-panel.vue:

<template>
  <transition name="el-zoom-in-top">
  <div class="el-table-filter" v-show="showPopper">
    <div class="el-table-filter__content">
      <el-input icon="search" v-model="filterText"></el-input>
    </div>
    <div class="el-table-filter__bottom">
      <el-button type="primary" size="mini" @click="searchColumn">Search</el-button>
      <el-button type="warning" size="mini" @click="handleReset">Reset</el-button>
    </div>
    </div>
  </transition>
</template>
/* ... */
methods: {
  handleReset() {
    this.filterText = '';
    this.confirmFilter(this.filterText);
    this.handleOutsideClick();
  },
  searchColumn() {
    this.confirmFilter(this.filterText.toString());
    this.handleOutsideClick();
  },
}
/* ... */
data() {
  return {
    table: null,
    cell: null,
    column: null,
    filterText: null
  }
}

In filter-panel.vue, remember to import el-button and el-input. Also, I left the customRender directive alone, and it seems to render just fine...

With all this in place, run npm run dist and then copy the libs to your production folder. I don't know if this is the best way, but it's what worked for me. Hope this helps.

[mmarquez]

Is this functionality in the roadmap?

[JerryChin]

Need this implemented.

[JohnTendik]

This is my solution, probably not the best, or the cleanest but if it helps anyone, yippie.

https://jsfiddle.net/afbr4Lkp/11/

P.S add the filterText function as a hook for the reset event on the tag filter dropdown, I forgot it :D

[ghost]

Here an other solution:

<template>
<el-input placeholder="Please input"
              suffix-icon="el-icon-search"
              v-model="filterText"
              @keyup.native="filterTable" />
<el-table :data="..."
              ref="tableRef">
      <el-table-column ...
</el-table>
</template>

md5-58724b94ab107fd4292d2789d65660f9

[dcrystalj]

@rubat :+1: works perfectly

[icangku]

Your function not working for all the data, it's working only the page which being opened, can u help me? Ex : If search something its searching only for the page 1, not the whole pages/data

[rudiba]

@icangku What do you mean exactly? Please describe your issue in detail.

[IssueHuntBot]

@0maxxam0 has funded $40.00 to this issue. See it on IssueHunt

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[renoirb]

Filtering can be done like this

• njleonzhang/vue-data-tables in src/tools/index.js
• src/components/DataTables.vue#L126