Question: Data-Table with conditional text and icon in its TableItem

[affanmustafa]

In the website there is a table like this and I am trying to replicate the "Status" column where I can have either "Active" or "Disabled" with the green and grey circles to indicate status. I cannot find the code for this anywhere either.
I can set the headers like this:

tableModel.header = [
  new TableHeaderItem({ data: 'Status' }),
  new TableHeaderItem({ data: 'Name' }),
  new TableHeaderItem({ data: 'Attribute' }),
];

And then populate these fields like this:

tableModel.data = [
  new TableItem({ data: service.status }),
  new TableItem({ data: service.name }),
  new TableItem({ data: service.attribute }),
 ];

Like how it can be seen in the screenshot, I want either "Available 🟢" or "Disabled 🔴 " to be displayed. Another possible implementation that could work for me is adding a Green or Grey button based on the value of status.

I haven't been able to find relevant code in the documentation so far so was hoping for some help here. Thank you.

[tay1orjones]

@affanmustafa Are you using Angular, Vue, React, or Web Components?

[tay1orjones]

It looks like you might be using carbon-components-angular, I'm going to transfer this issue to their repo.

[Akshat55]

@affanmustafa, you have to pass in templates to customize the table columns as such:

carbon-components-angular/src/table/stories/app-expansion-table.component.ts

Line 31 in 42dd2af

<ng-template #customTableItemTemplate let-data="data">

Here is a live demo of the above: https://angular.carbondesignsystem.com/?path=/story/components-table--with-expansion