Can Javascript DataTables show raw/literal strings instead of interpretting escape characters?

I've built a Flask app that displays text data from CSV files uploaded by the user in a DataTable. Occasionally a text might include escape characters or even a bit of code/tags. I want all text to display exactly as it was written in the original file, including any escape characters or other code/tags. For reasons I don't need to get into, solutions involving replacing characters within the text itself will not work for my use case (so an extra backslash or ascii character or something is unacceptable).

Is there a way to achieve this?

Below is some javascript code I had hoped would work using String.raw, but it still renders "This is <b>bold</b>" as "This is bold". Not what I expected.

simplified code:

var sample = '<i>I</i> &amp; <b>B</b>';

var data_table = $("#data-table").DataTable();

function redraw(sample) {
  data_table.clear();
  data_table.row.add([
    String.raw`${sample}`
  ]);
  data_table.draw();
}
i.value = sample;
i.oninput();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/dataTables.js"></script>

Test:<input id="i" type="text" oninput="redraw(value)" size="50">

<div class="container">
  <table border id="data-table" width="100%">
    <thead>
      <tr>
        <th>default</th>
      </tr>
    </thead>
  </table>
</div>

Solution

Many thanks to @C3roe who provided the key to the answer in their comment above.

The solution was to use the text render helper datatables.net/manual/data/renderers#Text-helper

With this information, I was able to declare how to render specific columns when the DataTable was first defined, and so any rows that are subsequently added will rely on that definition for how to display.

Here's the original and fixed code: in adjacent columns:

var sample = '<i>I</i> &amp; <b>B</b>';

var data_table = $("#data-table").DataTable({
  columnDefs: [{
    targets: [1],
    render: DataTable.render.text()
  }],
});

function redraw(sample) {
  data_table.clear();
  data_table.row.add([sample, sample]);
  data_table.draw();
}

i.value = sample;
i.oninput();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/dataTables.js"></script>

Test:<input id="i" type="text" oninput="redraw(value)" size="50">

<div class="container">
  <table border id="data-table" width="100%">
    <thead>
      <tr>
        <th>default</th>
        <th>text()</th>
      </tr>
    </thead>
  </table>
</div>

Try at live.datatables.net