Highlight search terms in the cell.

[ashishdamania]

It would be nice to highlight search field entry in the cells. I am currently using this filter to highlight terms in the Angular rendered Table:

<style>
      .ui-match { background: yellow; }
</style>
<script>
app.filter('highlight', function () {
  return function (text, search, caseSensitive) {
    if (search || angular.isNumber(search)) {
      text = text.toString();
      search = search.toString();
      if (caseSensitive) {
        return text.split(search).join('<span class="ui-match">' + search + '</span>');
      } else {
        return text.replace(new RegExp(search, 'gi'), '<span class="ui-match">$&</span>');
      }
    } else {
      return text;
    }
  };
});
</script>

I am not sure how can I render it using react.js.
Thank you.

[josebalius]

@deepthoughts Interesting, this sounds like a good feature request. I'll see what I can do sometime this week to work on this. This would probably need to be implemented in the ngReactGridBodyRowCell component. The question then becomes, if it should support highlight on cells that define a render method, I'm inclined to say no, this would only work with cells that have a basic render.

[ashishdamania]

@josebalius Thanks for the reply. I guess it would be fine just to highlight "Regular/Basic render" cells. I need to look at React library in more details.

[josebalius]

@deepthoughts Yeah, the implementation for this would happen on this file: https://github.com/josebalius/ngReactGrid/blob/master/src/jsx/reactGrid.jsx#L295 at line 295. I just updated the README with how to build ngReactGrid, you can give it a try and see if maybe you can get the highlight feature to work.

[ashishdamania]

I guess it would also work in .jsx part of ngReactGrid.js file. I am relatively a newbie in Javascript overall so please bear with me. Thanks for all the help.

[rhelenagh]

Jose, any progress with this feature?
I think that is a cool and helpful feature.

[josebalius]

@rhelenagh I have a proof of concept in the works, I'll try to publish it soon. Hopefully in version 0.7.0

Editable cells is in the works right now.

[rhelenagh]

Fantástico!

[josebalius]

This will be coming soon in react-grid: https://github.com/josebalius/react-grid