Disable / Remove sorting on mdbTable for a specific column


Topic: Disable / Remove sorting on mdbTable for a specific column

MDWebservices pro premium asked 12 months ago

Hi,

I haven't been able to find any information, within this site and documentation and elsewhere on Google, for this specific request/issue.

I am using an Angular Bootstrap DataTable and I would like to remove the sorting functionality from a specific column. I've seen examples of this within the forums for Jquery but not for Angular. I've found examples of this also on google, but not for Angular.

Is this possible?

If you need more info, please let me know.

Cheers,


Bartosz Termena staff answered 11 months ago

Dear @MDWebservices

To remove the sorting functionality from a specific column, try this:

<table id="tableSortExample" mdbTable class="z-depth-1">
  <thead>
    <tr>
      <th
        *ngFor="let head of headElements; let i = index"
        aria-controls="tableSortExample"
        scope="col"
      >
        <a *ngIf="head !== 'first'" [mdbTableSort]="elements" [sortBy]="headElements[i]"
          >{{ head | titlecase }}
        </a>
        <a style="cursor: default" *ngIf="head === 'first'"> {{ head | titlecase }}</a>
        <mdb-icon fas icon="sort" *ngIf="head !== 'first'"></mdb-icon>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let el of elements; let i = index">
      <th scope="row">{{ el.id }}</th>
      <td>{{ el.first }}</td>
      <td>{{ el.last }}</td>
      <td>{{ el.handle }}</td>
    </tr>
  </tbody>
</table>

TS

 elements: any = [];
  headElements = ['id', 'first', 'last', 'handle'];

  ngOnInit() {
    for (let i = 1; i <= 15; i++) {
      this.elements.push({ id: i, first: 'User ' + i, last: 'Name ' + i, handle: 'Handle ' + i });
    }
  }

In my example I removed sorting by 'first'.

Hope it helps!

Best Regards, Bartosz.


MDWebservices pro premium answered 11 months ago

Just gonna bump this...

... Is this something that has never been considered and not possible?


MDWebservices pro premium answered 11 months ago

Thank you, Bartosz,

Very similar to something we attempted and this seemed to work better!

Cheers,


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 8.6.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No