ColumnSummary with sorting and filters

Tags: #<Tag:0x00007f8b1db0fb80>
#1

Hi support team,
I want to use columnSummary feature, then I got to know that we have to add extra row for columnsummary to work on the last, once it was done the sorting and filter is also affecting that row too.
What’s the main solution for all of this? ColumnSummary with sorting and filtering ignoring the last rows?
Thanks

#2

Hi @mehdiraza

For the sorting, you can use this logic https://jsfiddle.net/qtz6jgam/ (just provide a different row index). However, Filters are applied in a way that they collect all the dataset (including summaries) and it cannot be altered at the moment.

#3

Why this.rowIndexMapper is undefined in my angular project, but is working fine on this
https://jsfiddle.net/Mehdi17/c0zxy65d/3/ below.
How can I access this?

#4

Hi @mehdiraza

Please tell me what version of Handsontable do you use and Angular version.

When I test Handsontable 12.2.0 (latest) in Angular 13 it works well. You just need to specify the reference to the table.

app.component.ts

import { Component } from '@angular/core';
import Handsontable from 'handsontable/base';
import { HotTableRegisterer } from '@handsontable/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private hotRegisterer = new HotTableRegisterer();

  id = 'hotInstance';
  title = 'ang13hot12';
  afterRender = () => {
      console.log(this.hotRegisterer.getInstance(this.id).rowIndexMapper)
  }
}

and remember to add ID in the HTML section

<hot-table
  [colHeaders]="true"
  [rowHeaders]="true"
  [hotId]="id"
  [afterRender]="afterRender"
  licenseKey="non-commercial-and-evaluation">
</hot-table>
#5

I am using Angular 1.6 version with latest handsontable version.

#6

I do not know if you use our wrapper for AngularJS, but if so, here’s a link that you can use http://jsbin.com/digupecame/edit?html,js,output (it shows how to set a connection o the instance).

#7

Nope it’s not working, I am using following links to access handsontable in my project
Have a look at scripts portion, that’s what working with my Angular 1. If I am changing it to other scripts, the tables disappear in my angular.

https://jsfiddle.net/Mehdi17/4f605uor/4/

Can you see why column summary and fixing the last rows while sorting isn’t working.

#8

In the demo, you are using Handsontable Pro v1.3.2 and the rowIndexMapper you asked for was introduced in Handsontable v8.0.0.

#9

So which version should I use to make it work? :confused:

#10

If you would like to use the following logic

then you need to update to Handsontable v8.0.0 of newer. This logic was not available in any older version. It does not effect the Angular version that you use.

#11