Element: [Feature Request] Pagination on data table

[cgarnier]

Existing Component

Yes

Component Name

Table

Description

Need a way to paginate the data table. Pagination should take care of orders and filters.

[qidaizhe11]

I've added a pull request for 2.0 version. For those who need this feature, you can also use my custom wrapper instead, element-table-wrapper, just a simple high-order component based on el-table and el-pagination, nearly the same use as el-table, support 1.x verson of Element-ui. I'll maintain 2.0 version when it's stable.

[philippe-bourdeau]

What if el-table had current-page and page-size props, these being already managed by el-pagination.

Any thoughts ?

[AGPDev]

I think is very important!

[kevrousso]

+1

[argotri]

+1

[jaime-marcondes]

+1

[5T0NkZ5V2j0H76y0]

+1

[Va2]

+1

[bernardobelchior]

+1

[haegemon]

+1

[5T0NkZ5V2j0H76y0]

+1

[gustawdaniel]

In vue-element-admin there is example of pagination

http://panjiachen.github.io/vue-element-admin/#/table/complex-table

Unfortunately it is paginated by back-end. I think it would be nice to have pure front-end pagination.

---

Anyway

There is package dedicated for pagination and tables

https://github.com/zollero/el-search-table-pagination

with English and Chinese docs.

[aaabinbin]

+1

[maurocardoselli]

+1

[zyh961117]

+1

[gustawdaniel]

This feature is so important that I switched from eleme.io to vuetify

https://vuetifyjs.com/en/components/data-tables

In my opinion this project can copy interface from data table proposed by vuetify. Eleme.io looks better but in aspect of tables with searching and pagination vuetify is more practical.

What creators/contributors and community of eleme.io thins about this proposition?

[efegurkan07]

Why this is not implemented yet?

[zrk]

If we just had a filtering API like in Tree component, for the row filtering to be initiated not only by user clicking controls...

I think pagination would've been a piece of cake: just filtering out the rows not in range.
(And the range is maintained by Pagination component).

See #3308

[mrkaluzny]

Hi guys!

I had to write a logic for filtering and supporting pagination. This could and should be cleaner, but it works if anyone needs some code to start with 😃

here's a snippet:

// Attach this to @filter-change on table (remember to add column-key for table-column)
handleFilterChange(e) {
      const propertyName = Object.getOwnPropertyNames(e)[0]
      const value = e[propertyName]
      this.filters[propertyName] = value
      this.filterAndChunkList()
   },

// Chunks list into pages
chunkList(list) {
      const result = []
      var i, j, temparray, chunk = this.listQuery.limit;
      for (i = 0, j = list.length; i < j; i += chunk) {
        temparray = list.slice(i, i + chunk);
        result.push(temparray)
      }
      this.chunkedList = result
      this.listQuery.page = 1  // Always return to first chunk
  },

filterAndChunkList() {
      const filters = this.filters
      const list = this.unfiltered
      var filteredList = []
      let areFiltersActive = false
      var i = 0

      Object.keys(filters).forEach((key) => {
        const filterValues = filters[key]
        let filteredRows

        if (filterValues.length !== 0) {
          areFiltersActive = true
          filterValues.forEach((value, y) => {
            const listToFilter = i === 0 ? list : filteredList

            filteredRows = listToFilter.filter(row => row[key] === value)

           // Handle multiple filters, it switches the list based on single/multiple filters
            if (i !== 0 && y === 0) {
              filteredList = filteredRows
            } else {
              filteredList.push(...filteredRows)
            }
          })
        }
       i++
      })

      const result = areFiltersActive ? filteredList : list

      this.list = result
      this.chunkList(result) // Chunk again to provide accurate results
    },

Template to adjust:

  <el-table 
       :data="chunkedList[listQuery.page - 1]" 
       @filter-change="handleFilterChange">

  <el-pagination
      :page-size="listQuery.limit" // Limit
      :hide-on-single-page="true"
      :pager-count="11"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[20, 50, 100, 150]"
      :total="list.length" // Size of currently displayed data
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    />

data object

return {
      list: '',
      chunkedList: [],
      unfiltered: '',
      filters: {},
      listQuery: {
        page: 1,
        limit: 20,
      },
};

[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.

[ray007]

It's still an open issue.