CustomRenderer: sort and filter by values rendered on the cell ?

[juanmc5]

tui-grid version 4.21.2 This is a simplified version of the code I use to get an integer index and show a string on the cell: I create an object using the integer index as key and objects as values:

objList={ 1: { name: 'Pop'}, 2: { name: 'Rock'}, 3: { name: 'R&B'}, 4: { name: 'Electronic'}, 5: { name: 'etc.'} .... }

and the data in col1 values are the indexes with null or integer values.

On a CustomCol1Renderer -following the CustomRenderer doc example- the render method:

render(props){ let theIndex = props.value != null? props.value : 1; this.el.value = objList [ theIndex ].name }

The grid cells do show the proper strings 'Pop', 'Rock'... but the filter and sorting methods do use the integer values, not the strings. For filter I've tried:

filter:{ type: 'text'} and filter: {type: 'select'}

and both show the integers, not the strings.

How can I filter / sort by the rendered values, not the data behind them?

Thanks in advance for your help.

Summary A clear and concise description of what the question is.

Screenshots If applicable, add screenshots to help explain your question.

Version Write the version of the grid you are currently using.

Additional context Add any other context about the problem here.

[jajugoguma]

@juanmc5

Sorry for late replying.

How about create custom formatter for the renderer and set it to formatter fo the column?

const customFormatter = ({ value }) => {
  const objectList = {
    1: {name: 'Pop'},
    2: {name: 'Rock'},
    3: {name: 'R&B'},
    // ...
  };

  return objectList[value]?.name || '';
}

class CustomRenderer {
  constructor(props) {
    const el = document.createElement('span');

    this.el = el;
    this.render(props);
  }

  getElement() {
    return this.el;
  }

  render(props) {
    this.el.textContent = customFormatter(props);
  }
}

const grid = new tui.Grid({
  // ...
  columns: [
    {
      header: 'Type',
      name: 'typeCode',
      renderer: {type: CustomRenderer},
      formatter: customFormatter,
      filter: 'select',
    }
  ]
});

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!