Tab character (\t) doesn't render in the lightning datatable in lwc

Question

I am trying to render \t tab character along with \n in the lightning datable UI, but it doesn't seem to be working. I am trying to use below JSON structure

const data = [ { name: "Title" , Original: "ABC123", Change: "ABCD123\nReasons:\n\tReason1\n\tReason2", Operation: "changed", } ]

It outputs the change column in lightning datable as(without extra new line , that is fine):

ABCD123

Reasons:

Reason1

Reason2

However , I want it to be something like below:-

ABCD123

Reasons:

     Reason1 (tab characters added)

     Reason2 (tab characters added) 

Ignore the grey background

Here is the link of the playground - https://developer.salesforce.com/docs/component-library/tools/playground/kPSqiPxWk/53/edit

Answer 1

I think currently that is not possible with datatable because of the column of type='text' uses lightning-formatted-text component which only supports anchor tags.

I think you need the lightning-formatted-rich-text.

But the good news is you can extend the functionality of datatable by adding the custom column type. So you can use that method to add the rich text column in datatable using the lightning-formatted-rich-text component. In the rich text, you can use &nbsp four times or 	 to represent the tab.

To know how to extend the datable with custom column type goto documentation and then goto Creating Custom Data Types section on that page.

Or the easy way

This alternate solution is my personal choice you can go with this if you feel it ok. Just for adding the tabs, extending the datatable with custom column type will be lots of effort. Think this is just for formatting, in that case, I would have simply replaced the tabs with some formatting like -----, which will give me an output like.

ABCD123
Reasons:
----- Reason1
----- Reason2