A 'Total' row at the bottom of the table

Tags: #<Tag:0x00007efc61632770> #<Tag:0x00007efc61632630>
#1

Hi!

I want a ‘Total’ row at the bottom of the table which is read-only and preferably styled as a normal header. I can calculate the sums with the columnSummary, I just cannot append a bottom row and style it as I want. Of course this ‘Total’ row shouldn’t be included with the getData(). Thank you if you can help me!

For example I want to arrange my table like this:

example_table
example_table.png1909×385 19.2 KB

#2

Hi @erwin

We have an example of a footer emulation with columnSummary: https://jsfiddle.net/aszymanski/382o6ypr/

Regarding getData() method, you can specify the rows from which you would get the data: https://handsontable.com/docs/javascript-data-grid/api/core/#getdata

1 Like
#3

Just what I needed, thank you!

#4

Instead of the 3rd row I need to append this ‘Total’ row. My table will be filled with data dynamically and I cannot find a solution how to achieve this. Also I’m using the VueJs version of Handsontable

#5

I think that in this case you can use countRows() method and run in it in afterLoadData() hook to get the total rows number and then set the summary to the last available row.

#6

There are no available rows.

The rows are being filled with data.

We need to append a whole new empty row everytime the data gets bigger and modify that row. By bigger I mean the user submits a form, so we need to put the new values in the table in a new row. I already managed to refresh the table everytime I just cant make this ‘Total’ row to work properly.

I tried using

minSpareRows: 1

with

                              columnSummary: [
                {
                    sourceColumn: 5,
                    type: 'sum',
                    destinationRow: 0,
                    destinationColumn: 0,
                    reversedRowCoords: true,
                    forceNumeric: true
                },
            ],

Sadly a new row appears before the spare row and that gets updated with the sum value not the spare row

I can’t use the alter() method to insert a new row because I’m working with objects, not arrays

#7

Hi @erwin

I am not sure if this issue was solved. Can you confirm?

#8

@erwin I am closing this issue as there’s no reply for nearly 2 weeks.

#9