Cells of a column with renderer won't update after filter or sort

Tags: #<Tag:0x00007efc65451178>
#1

Description

I have an issue where I set up a the table with a few columns that have a renderer. after using a filter on any column, the cell values of the row update only for columns that uses one of the default renderers while for columns with renderer the cell shows the value of the original cell before fitlering. same apply for sorting. using the API ‘hot.getDataAtRow(0)’ does give the correct (expected) values

Steps to reproduce

  1. State before filter/sort
    image
    image.png1914×786 74.3 KB
  2. Filter or sort on a column
    image
    image.png1920×888 92.1 KB
  3. Column with renderer show wrong value
    image
    image.png1920×888 97.6 KB

HTML

<hot-table [settings]="hotTableSettings" [hotId]="HOT_SHARED_WITH_ME_INSTANCE" licenseKey="non-commercial-and-evaluation"></hot-table>

Settings

this.hotTableSettings = {
  data: data,
  disableVisualSelection: true,
  dropdownMenu: ['filter_action_bar', 'remove_col', 'filter_by_condition', 'filter_by_value'],
  filters: true,
  colHeaders: true,
  rowHeaders: true,
  contextMenu: true,
  licenseKey: 'non-commercial-and-evaluation',
  manualColumnResize: true,
  manualRowResize: true,
  rowHeights: 30,
  wordWrap: false,
  colWidths: [200, 150, 300, 75, 100, 550],
  bindRowsWithHeaders: true,
  columnSorting: true,
  stretchH: 'last',
  fixedColumnsLeft: 1,
  headerTooltips: {
    rows: true,
    columns: true,
    onlyTrimmed: false
  },
  columns: [
    { data: 'email', title: 'Account', readOnly: true, className: 'htMiddle' },
    { data: 'folder', title: 'Folder', readOnly: true, className: 'htMiddle' },
    { data: 'name', title: 'Name', readOnly: true, className: 'htMiddle', renderer: this.nameLinkRenderer.bind(this) },
    { data: 'type', title: 'Type', readOnly: true, className: 'htCenter htMiddle', renderer: this.typeRenderer.bind(this) },
    { data: 'permalink', title: 'Permalink', readOnly: true, className: 'htCenter htMiddle', renderer: this.permalinkRenderer.bind(this) },
    { data: 'notes', title: 'Notes', readOnly: true, className: 'htMiddle' }
  ]
};

Name Renderer

private nameLinkRenderer(instance:any, td:Element, row:number, col:number, columnKey:string, data:any, cellProperties:Array<any>) : Element {
    Handsontable.default.renderers.BaseRenderer.apply(this, arguments);
    const $td = $(td);
    if ($td.find('a.presentation-link').length === 0) {
      const $linkTag = $(`<a class="presentation-link" href="${this.allPresentations[row].link}"></a>`);
      $linkTag.text(data);
      $td.append($linkTag);
    }
    return td;
  }

for some reason without the if the renderer is being called and append the link multiple times. but issue reproduces even without it.

Environment

  1. angular - 8.2.0
  2. handsontable - 7.1.1
  3. @handsontable/angular - 5.1.0
#2

Hey @shachar.s

filtering and sorting do not work together

but, we’re working on fixing this issue by introducing a new index mapper. It should be ready in November.

#3

My issue reproduce by using either or and not just when combined

#4

So yo mean that when you remove the columnsSorting the issue is still replicable?

Please share a demo where I’d be able to replicate the same.

#5

Hey @shachar.s

the mapper is ready and published in 8.0.0-beta1

Below are the resources

</style><script src="https://cdn.jsdelivr.net/gh/handsontable/handsontable@release/8.0.0-beta.1/dist/handsontable.full.js"></script><link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/handsontable/handsontable@release/8.0.0-beta.1/dist/handsontable.full.css">

And this is how you can download the beta from NPM

npm i handsontable@beta

I appreciate any feedback. Thank you.

#6