[Feature Request] Allow to provide custom table-body implementation

[stalniy]

Existing Component

Yes

Component Name

el-table

Description

I want to implement infinite scrolling by using el-table component and track visible page with IntersectionObserver API.

For example, each page contains 50 elements. I want to group 50 <tr> tags inside one <tbody>. In such way, each tbody contains elements for a single page. Then I can track when one tbody appears and another disappears to track when to switch page parameter in browser url.
Currently I can do this by overwriting Table.components.TableBody but this is a hacky solution.

So, there are several ways to fix this:

1. Implement a factory function which can create Table component on the fly with specified parts:

import { createTable } from 'element-ui'

const Table = createTable({
  body: MyCustomBody, 
  footer: MyCustomFooter
})

2. A bit simpler: split Table's render function into several smaller functions (e.g., renderBody, renderFooter, etc). So, then I can extend component and overload that functions:

export default {
  name: 'MyCustomTable',
  extends: ElTable,
  methods: {
    renderBody(context) {
      return this.$createElement(MyCustomBody, context)
    } 
  }
}

[stalniy]

By the way, I can create a PR for the 2nd solution if you like it

[island205]

Why not add infinite scrolling feature to el-table directly?

[stalniy]

Better to add an extension point. I want to track pages using IntersectionObserver, somebody else will want to implement virtual scrolling (reusing DOM elements) and so on.

That’s why I suggest to reuse existing functionality with an ability to make something custom.

[island205]

got it , Would you like provide an simple implement?

[stalniy]

Sure, I’ll be able start working on 2nd approach either on this weekend or the next

[island205]

Thank you.

[iamkun]

Any updates here?

[stalniy]

Haven’t had time to work on this. Plan to do it this weekend

[iamkun]

Take your time, please.

[stalniy]

After thinking about implementation details, I found out that it's much easier to implement 1st option. It can be done like this:

import Table from 'element-ui/lib/table'
import MyTableBody from './MyTableBody.vue'

export default {
  name: 'MyTable',
  extends: Table,
  components: {
     TableBody: MyTableBody
  }
}

The same can be done to any part of ElTable component. So, here is my updated plan:

• refactor TableBody render function to make it more customizable (in case somebody like me wants to extend it :))
• export TableBody as a public component, so it's possible to import it `import TableBody from 'element-ui/lib/table-body' and extend
• ensure that the code above works as expected

@iamkun @island205 are you ok with that approach?

[stalniy]

is it possible to import Vue or some element-ui components in :::demo blocks in docs (can't do this...., want to show a simple example of how to implement custom table body)

[island205]

@stalniy modify examples/play/index.vue file, use the component you want, then run npm run dev:play, go ahead http://localhost:8085 .

https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md#prerequisites

[stalniy]

That works. Bu the question is about examples/docs/table.md file. I’m trying to use importstatement in example code (wrapped in :::demo container) and it fails saying that import/export is allowed only on top level (looks like import/export is not transpiled in that block)

[iamkun]

We do not support import syntax in :::demo container as the moment.

[stalniy]

I see.

Created PR without updates to documentation.

[island205]

@stalniy we will check your PR soon.

[stale]

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.