Survey Analytics Tabulator Reactjs

Hello Skul,
Thank you for the update. Yes, this makes sense. This demo shows how to enable Markdown formatting for survey text elements.

SurveyJS Form Library actually supports HTML text rendering using special Markdown processing libraries (for instance, Showdown).

However, SurveyJS Dashboard uses third-party libraries which may not support Markdown text formatting.

Therefore, we recommend that you sanitize your survey JSON model before instantiating a visualizer and remove HTML tags from a survey model.

Please consider this example:

JavaScript
const json =  {
  "elements": [
    {
      "type": "matrix",
      "name": "vacation-factors",
      "title": "<i>Please indicate the importance of the following factors in choosing a vacation destination.</i>",
      "columns": [
        {
          "value": 1,
          "text": "Not<br>important<br>1"
        },
        {
          "value": 2,
          "text": "<br><br>2"
        },
        {
          "value": 3,
          "text": "<br><br>3"
        },
        {
          "value": 4,
          "text": "<br><br>4"
        },
        {
          "value": 5,
          "text": "Very<br>important<br>5"
        }
      ],
      "rows": [
        {
          "value": "culture",
          "text": "*Cultural activities*"
        },
        {
          "value": "cuisine",
          "text": "*Local cuisine*"
        },
        {
          "value": "outdoor",
          "text": "*Outdoor activities*"
        },
        {
          "value": "safety",
          "text": "*Safety*"
        },
        {
          "value": "accessibility",
          "text": "*Accessibility*"
        },
        {
          "value": "beaches",
          "text": "*Beach water quality*"
        },
        {
          "value": "weather",
          "text": "*Weather*"
        }
      ]
    }
  ],
  "showQuestionNumbers": false
};

function removeHtmlTags(str) {
            const div = document.createElement('div');
            div.innerHTML = str;
            return div.textContent || div.innerText || '';
}
function removeHtmlFromObject(obj) {
      for (const key in obj) {
            if (typeof obj[key] === 'string') {
            obj[key] = removeHtmlTags(obj[key]);
            } else if (typeof obj[key] === 'object') {
            obj[key] = removeHtmlFromObject(obj[key]);
      }
   }
   return obj;
}

const modifiedObj = removeHtmlFromObject(json);
const survey = new Survey.Model(modifiedObj);

Example.

As a result, HTML tags will be preserved in the original survey JSON model, however, they will be eliminated from the resulting Tabulator view.

I hope this information helps.

Please let me know if you have additional questions.