-1

I am trying to use the data table component from element ui, but seems to run into an issue with the summary rows feature. it seems like you can only create one summary row, and if i try to return multiple values it just breaks the table. the code is pretty much the same as in the documentation itself.

I am looking for a hack or maybe a replacement?

Would like to know if anyone ever did something similar.

Thank you.

moti shaku
  • 47
  • 7

1 Answers1

0

Officially it is not possible, as element-ui generates a separate table for the summary, which also ensures the summary is sticky (if you specify an height for the table). However if you don't care about the stickiness for the summary there are two possible ways

  1. Adding extra rows to the data set your self.

  2. Use the append slot. (Which generates "extra" rows before the summary)

    <el-table>
    ...
    <template v-slot:append>
        <tr>
            <td>Hello world</td>
        </tr>
        <tr>
            <td>Hello world</td>
        </tr>
    </template>
</el-table>

I think the second solution is cleaner, however you have style the append row/columns your self in order to make it the same as the rest of the table. Where in the first solution this is for free.

dreijntjens
  • 4,577
  • 26
  • 28
  • thank you for your reply. i already tried it this way which worked of course but than sorting the table can cause it to mix with the rest of the data, which is why i need to exclude it somehow. – moti shaku May 27 '21 at 10:41
  • Implmenting your own sorting method could place the columns on the same position – dreijntjens May 27 '21 at 18:40