How to format paragraph or sentences in cell?

Tags: #<Tag:0x00007f8b1ad9d698> #<Tag:0x00007f8b1ad9d558>
#1

I am struggling with the issue where the user creates a description field and is allowed to add text with color. Let’s say I have the sentence below. ( “I am blue” is in blue color )

Hello, I am blue. Help me to render the same way in the handsontable cell.

Problem faced: When the above sentence renders in the cell of handsontable, it shows the sentence like below

Hello, {color:rgb(134, 193, 185)/}I am blue{color}. Help me to render the same way in the handsontable cell.

Expected: It should show the sentence actually in color and not something like above ( {color:rgb(134, 193, 185)/}I am blue{color} )

I tried using renderer, something like below
const hot = new Handsontable(container, {
data,
colWidths: [200, 200, 200, 80],
colHeaders: [‘Title’, ‘Description’, ‘Comments’, ‘Cover’],
height: ‘auto’,
columns: [
{ data: ‘title’, renderer: ‘html’ },
{ data: ‘description’, renderer: ‘html’ }, // this did not work
{ data: ‘comments’, renderer: safeHtmlRenderer },
{ data: ‘cover’, renderer: coverRenderer }
],
licenseKey: ‘non-commercial-and-evaluation’
});

#2

Hi @frontend_dev

There are two ways you can format the cell value. First is by using custom renderer, like in this example:

https://jsfiddle.net/aszymanski/2yeq58xf/1/

The second option, more preferable in your case, would be to do this by using cells option and attach a custom class to the certain cell, like here:

https://jsfiddle.net/aszymanski/mkv0nzoL/15/

1 Like
#3

Thanks for your help. The examples are great.

Actually, the logic you showed is good to have a custom renderer. However, while trying I got two problems

  1. When we click on the cell, it shows the original, unformatted value.
  2. In my case, I have to find this ({color:rgb(134, 193, 185)/}I am blue{color} ) in the whole string and wherever it occurs I have to replace that string with the color inside rgb().
#4

I think that in this case, you’d need a custom cell renderer and a Rich text editor (so a custom editor). Only then will the text appear blue if the user enters the edit mode. Here’s a cell editor tutorial https://handsontable.com/docs/react-data-grid/cell-editor/.

In my case, I have to find this ({color:rgb(134, 193, 185)/}I am blue{color} ) in the whole string

This sounds like a case for a regex indexOf() or search().

1 Like
#5

Thanks a lot, I will try this and get back to you in a few days if I get successful :slight_smile:

1 Like
#6

Hey again, I created a custom renderer method. Here is the code snippet

I am stuck at this now as I cannot find how to handle the JSX object in handsontable HtmlRenderer

const renderDescriptionAfterFormatting = (description: any) => {
    // This shows in UI as a JSX object which is expected because I am not sure how it could be 
    // handled in handsontable to convert in HTML 
    return JSON.stringify(React.createElement(DescriptionMarkdown, {}, description))

  // DescriptionMarkdown this handles the problem of regex pattern {color:rgb()}
};

const descriptionRenderer = (
  instance: Handsontable,
  td: HTMLElement,
  row: number,
  col: number,
  prop: string | number,
  value: any,
  cellProperties: CustomSettings
): HTMLElement =>
  Handsontable.renderers.HtmlRenderer(
    instance,
    td,
    row,
    col,
    prop,
    renderDescriptionAfterFormatting(value),
    cellProperties
  );

const installCustomDescriptionHandler = () => {
  Handsontable.cellTypes.registerCellType('decriptionType', {
    editor: Handsontable.cellTypes.text.editor,
    renderer: descriptionRenderer,
  });
};
#7

Could you share the structure of the newly created element?

ps. due to the Christmas break we could answer a bit longer.

#8

Hurrah, I was able to write a renderer that displays the text in the cell ( plain text and removes the regex ). The challenge I am facing is implementing the editor. I read the document you shared about the cell editor but it seems I have to read it more thoroughly to make it work as desired.

I would suggest closing this ticket at present and would create a separate ticket if after reading and implementing the custom editor I will face the problem.

#9

I’m more than happy to hear that it works for you, @frontend_dev

I’m closing the ticket.

#10