Topic: How can I assign colors to datatable in Angular 12
frankvdsm priority asked 3 years ago
Hello,
How can I assign my builded datatable properties to my table in Angular.
Actual behavior
not exucuted
Resources (screenshots, code snippets etc.)
Grzegorz Bujański staff answered 3 years ago
Do you mean changing the color of a cell or text? You can use ngStyle:
In your HTML:
<div class="datatable mt-4">
<table
class="table datatable-table"
mdbTable
mdbTableSort
#table="mdbTable"
#sort="mdbTableSort"
[dataSource]="dataSource"
[pagination]="pagination"
[sort]="sort"
>
<thead class="datatable-header">
<tr>
<th *ngFor="let header of headers" [mdbTableSortHeader]="header" scope="col">
{{ header | titlecase }}
</th>
</tr>
</thead>
<tbody class="datatable-body">
<tr *ngFor="let data of table.data" scope="row">
<td>
{{ data.name }}
</td>
<td>
{{ data.position }}
</td>
<td [ngStyle]="{'background-color': data.office == 'Edinburgh' ? 'red' : ''}">
{{ data.office }}
</td>
<td>
{{ data.age }}
</td>
<td>
{{ data.startDate }}
</td>
<td>
{{ data.salary }}
</td>
</tr>
</tbody>
</table>
<mdb-table-pagination #pagination></mdb-table-pagination>
</div>
In your TS:
dataSource: Person[] = [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: 61,
startDate: '2011/04/25',
salary: '$320,800',
},
{
name: 'Sonya Frost',
position: 'Software Engineer',
office: 'Edinburgh',
age: 23,
startDate: '2008/12/13',
salary: '$103,600',
},
{
name: 'Jena Gaines',
position: 'Office Manager',
office: 'London',
age: 30,
startDate: '2008/12/19',
salary: '$90,560',
},
{
name: 'Quinn Flynn',
position: 'Support Lead',
office: 'Edinburgh',
age: 22,
startDate: '2013/03/03',
salary: '$342,000',
},
];
frankvdsm priority commented 3 years ago
In fact I want to apply the look and feel which I created in the builder for datatables but can’t make it work. [striped]=“true” is working but [color]=“blue-grey” is not working.
Arkadiusz Idzikowski staff commented 3 years ago
@frankvdsm There is no [color]
input in the Angular datatable. You can add our predefined background colors classes to the div with .datatable
class (for example <div class="datatable bg-info">
) to change the table background color or add a new custom class and create your custom background.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 1.2.0
- Device: PC
- Browser: Edge
- OS: Windows
- Provided sample code: No
- Provided link: No