Topic: Datatables: Can I make header name of a column different than the field's name?

adamgusky free asked 11 months ago


Datatable column is the fieldname. For example, with person.name it would show as 'Name'

But I want to give it it's own name like "Person's full name"


adamgusky free answered 11 months ago


<div class="datatable mt-4">
    <table class="table datatable-table" mdbTable mdbTableSort #table="mdbTable" #sort="mdbTableSort"
      [dataSource]="teamStandingsFormatted" [responsive]="true" [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 *ngIf="teamsFormatted" class="datatable-body">
        <tr *ngFor="let data of table.data" scope="row">
          <th *ngIf="2 >= data.rank">
            <angular-emojis *ngIf="data.rank == 0" [name]="'first_place_medal'" size="20">
            </angular-emojis>
            <angular-emojis *ngIf="data.rank == 1" [name]="'second_place_medal'" size="20">
            </angular-emojis>
            <angular-emojis *ngIf="data.rank == 2" [name]="'third_place_medal'" size="20">
            </angular-emojis>
          </th>
          <th *ngIf="data.rank >= 3" scope="row">{{data.rank + 1}}</th>
          <td>{{data.teamName}}&nbsp;&nbsp;<i class="flag flag-{{data.countryCode}}" title="{{data.country}}"
              data-mdb-toggle="tooltip"></i></td>
          <td>{{data.numberOfRiders}}</td>
          <td>{{(data.totalKm/1000).toFixed(2)}}</td>
        </tr>
      </tbody>
    </table>
    <mdb-table-pagination #pagination></mdb-table-pagination>
  </div>
  <div *ngIf="hasChallenge && !teamsFormatted">
    <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  <div *ngIf="!hasChallenge">
    <div class="alert alert-danger text-center" role="alert">
      <span>The are no active challenges at this time.</span>
    </div>
  </div>
</div>
<div class="tab-pane fade table-responsive custom-table-height" id="leaderboard-tabs-2" role="tabpanel"
  aria-labelledby="leaderboard-tab-2">
  <div class="datatable mt-4">
    <table class="table datatable-table" mdbTable mdbTableSort #table1="mdbTable" #sort="mdbTableSort"
      [dataSource]="individualStandings" [responsive]="true" [pagination]="pagination" [sort]="sort">
      <thead class="datatable-header">
        <tr>
          <th scope="col">Rank</th>
          <th [mdbTableSortHeader]="'First Name'" scope="col">Name</th>
          <th [mdbTableSortHeader]="'Team Name'" scope="col">Team Name</th>
          <th [mdbTableSortHeader]="'totalMeters'" scope="col">Total Distance (KM)</th>
        </tr>
      </thead>
      <tbody *ngIf="individualStandings" class="datatable-body">
        <tr *ngFor="let data of table1.data" scope="row">
          <td>1</td>

          <td>{{data.firstName + " " + data.lastName}}</td>
          <td *ngIf="data.teamName">{{data.teamName}}</td>
          <td *ngIf="!data.teamName">No team selected</td>
          <td>{{(data.totalMeters/1000).toFixed(2)}}</td>
        </tr>
      </tbody>
    </table>
    <mdb-table-pagination #pagination></mdb-table-pagination>
  </div>

Grzegorz Bujański staff commented 11 months ago

This is because the references for mdbTableSort are the same in both tables. Change the references for the second table, e.g. to the following: <table class="table datatable-table" mdbTable mdbTableSort #table1="mdbTable" #sortSecondTable="mdbTableSort" [dataSource]="individualStandings" [responsive]="true" [pagination]="pagination" [sort]="sortSecondTable">


adamgusky free commented 10 months ago

That worked, thank you! :)


Grzegorz Bujański staff answered 11 months ago


You can do this by setting the column title and passing the appropriate parameter to mdbTableSortHeader

TS:

  dataSource = [
    {
      name: 'Tiger Nixon',
      position: 'System Architect',
    },
    {
      name: 'Sonya Frost',
      position: 'Software Engineer',
    }
  ]

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 [mdbTableSortHeader]="'name'" scope="col">
          Full Name
        </th>
        <th [mdbTableSortHeader]="'position'" scope="col">
          Position
        </th>
      </tr>
    </thead>
    <tbody class="datatable-body">
      <tr *ngFor="let data of table.data" scope="row">
        <td>{{ data.name }}</td>
        <td>{{ data.position }}</td>
      </tr>
    </tbody>
  </table>
  <mdb-table-pagination #pagination></mdb-table-pagination>
</div>

adamgusky free commented 11 months ago

Thank you! I did this but now I am unable to sort. I have two tables on this page (both sortable), could that be the issue? I ask because the first table sorts properly, but the second does no sorting at all. (html code posted below)



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 1.4.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No