How can I assign colors to datatable in Angular 12


Topic: How can I assign colors to datatable in Angular 12

frankvdsm pro premium asked 2 months 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 2 months 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 pro premium commented 2 months 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 2 months 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.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • 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