mdbootstrap table sort issue with headers different than pro

Topic: mdbootstrap table sort issue with headers different than property names

tehAon pro asked 5 years ago

I'm trying to use the table sorter with different header names than properties. It only seems to work when they match exactly. I tried using two separate string arrays for sorting and that doesn't appear to work either. UPDATE: It looks like the issue is related to a capital letter being in the middle of the key string. Adding a new field test works fine with any header on the table... but if I change it to tesT it doesn't work anymore https://mdbootstrap.com/angular/angular-tables/table-sort/

<table mdbTable class="table table-sm table-striped" style="font-size: .75rem">

    <thead class="thead-dark">

        <tr>

            <th *ngFor="let header of tableHeaders; let i = index" [mdbTableSort]="items" [sortBy]="tableHeaderNames[i]">

                {{ header }}

            </th>

        </tr>

    </thead>

    <tbody>

        <tr *ngFor="let item of items; let i = index">

            <td>{{item.name}}</td>

            <td>{{item.classRestriction}}</td>

            <td>{{item.tier}}</td>

            <td>{{item.rarity[0]}}</td>

            <td>{{calculateWairModifier(item.attackSpeed)}}</td>

            <td>{{calculateWairModifier(item.maxHp)}}</td>

            <td>{{calculateWairModifier(item.damage)}}</td>

            <td>{{calculateWairModifier(item.defenseModifier)}}</td>

            <td>{{calculateWairModifier(item.critChance)}}</td>

            <td>{{calculateWairModifier(item.critBonus)}}</td>

            <td>{{calculateWairModifier(item.receiveHealingModifier)}}</td>

            <td>{{calculateWairModifier(item.selfHealModifier)}}</td>

            <td>{{calculateWairModifier(item.healingModifier)}}</td>

            <td>{{calculateWairModifier(item.minEnergyPoints)}}</td>

            <td>{{calculateWairModifier(item.maxEnergyPoints)}}</td>

            <td>{{calculateWairModifier(item.energyRegenerationModifier)}}</td>

            <td>{{calculateWairModifier(item.energyGainModifier)}}</td>

            <td>{{calculateWairModifier(item.cooldownModifier)}}</td>

        </tr>

    </tbody>

</table>



    tableHeaders: string[] = [

        'Name',

        'Class',

        'Tier',

        'Rarity',

        'AtkSpd',

        'MaxHp',

        'Dmg',

        'Armor',

        'Crit%',

        'CritDmg',

        'RecHealMod',

        'SelfHealMod',

        'HealDmg',

        'MinEnergy',

        'MaxEnergy',

        'EnergyRegen',

        'EnergyGain',

        'CooldownMod'

    ];

    tableHeaderNames: string[] = [

        'name',

        'classRestriction',

        'tier',

        'rarity',

        'attackSpeed',

        'maxHp',

        'damage',

        'defenseModifier',

        'critChance',

        'critBonus',

        'receiveHealingModifier',

        'selfHealModifier',

        'healingModifier',

        'minEnergyPoints',

        'maxEnergyPoints',

        'energyRegenerationModifier',

        'energyGainModifier',

        'cooldownModifier'

    ];

    items: Item[] = [

        {

            name: 'Lizard Sinew',

            classRestriction: '',

            tier: 3,

            rarity: 'Uncommon',

            attackSpeed: null,

            damage: null,

            critChance: null,

            critBonus: null,

            receiveHealingModifier: null,

            healingModifier: null,

            defenseModifier: null,

            maxHp: null,

            maxEnergyPoints: null,

            energyRegenerationModifier: null,

            energyGainModifier: null,

            cooldownModifier: null,

            minEnergyPoints: null,

            selfHealModifier: null

        }];

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear @THM2018

Introducing such a modification to Table Sort will be marked as breaking changes, so we will add it only in the new version of MDB Angular (do not expect that in MDB 8 it will be introduced, sooner in MDB 9).

Until then you can write your own sorting or use ours together with Angular pipes.

Best Regards,

Damian

Add comment

THM2018 pro answered 5 years ago

0 0 Best answer

I am using MDB Angular 7.5.1 pro. In which version of MDB Angular we can expect the solution for table sort issue with headers different than property names?

Add comment

Lukasz Pomianowski free answered 5 years ago

0 0 Best answer

Has this been fixed in the latest version? It still seems to have this issue and nothing has been mentioned in the change log.

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear @box86rowh

This problem will be resolved with the next version of MDB Angular.

Best Regards,

Damian

Lukasz Pomianowski free commented 5 years ago

Has this been fixed in the latest version as I still seem to have this problem

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear @box86rowh

We'll take again a look at this problem.

Unfortunately, I'm not able to provide you a workaround for this situation, because we need to change the code of the table component.

Best Regards,

Damian

Add comment

box86rowh free answered 5 years ago

0 0 Best answer

I believe this is tripping me up as well. My data structure has the key "Name" and when I pass that as the sort by I get an error:

Cannot read property 'toLowerCase' of undefined

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear tehAon, Thanks for your participation in our MDB Angular library! We'll check your code and if it's good, we'll implement it in our code. Best Regards, Damian

Add comment

tehAon pro answered 5 years ago

0 0 Best answer

I've made the changes currently directly in the source code. It would be nice if they were added to the repo itself though so when I update it doesn't revert.

Add comment

tehAon pro answered 5 years ago

0 0 Best answer

I did manage to come up with solutions for both the sorting and an issue with the search as well

/node_modules/ng-uikit-<wbr />pro-standard/esm5/ng-uikit-<wbr />pro-standard.es5.js.<wbr />MdbTableService.<wbr />filterLocalDataBy
<div>Original Code:</div>
<div></div>
<div>
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">MdbTableService.prototype.filt<wbr />erLocalDataBy = function (searchKey) {

returnthis.getDataSource().filter(fu<wbr />nction (obj) {

returnObject.keys(obj).some(function (key) {

return (obj[key].toLowerCase()).inclu<wbr />des(searchKey);

});

};</pre>
</div>
</div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3"></pre>
<div>My changes:</div>
<div></div>
<div>
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">MdbTableService.prototype.filt<wbr />erLocalDataBy = function (searchKey) {

returnthis.getDataSource().filter(fu<wbr />nction (obj) {

returnObject.keys(obj).some(function (key) {

returnobj[key] != null && (obj[key].toString().toLowerCa<wbr />se()).includes(searchKey);

});

};</pre>
</div>
<div></div>
</div>
And for fixing the sorting

Original
<pre class="code-toolbar grey lighten-2 p-3 mb-3">MdbTableSortDirective.prototyp<wbr />e.onclick = function () {

this.sortDataBy(this.sortBy.to<wbr />LowerCase());

};</pre>
<div></div>
<div>Changed To:</div>
<div></div>
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">MdbTableSortDirective.prototyp<wbr />e.onclick = function () {

this.sortDataBy(this.sortBy);

};</pre>
</div>

Please insert min. 20 characters.

I did manage to come up with solutions for both the sorting and an issue with the search as well /node_modules/ng-uikit-pro-standard/esm5/ng-uikit-pro-standard.es5.js.MdbTableService.filterLocalDataBy

Original Code:

MdbTableService.prototype.filterLocalDataBy = function (searchKey) {

returnthis.getDataSource().filter(function (obj) {

returnObject.keys(obj).some(function (key) {

return (obj[key].toLowerCase()).includes(searchKey);

});

});

};

My changes:

MdbTableService.prototype.filterLocalDataBy = function (searchKey) {

returnthis.getDataSource().filter(function (obj) {

returnObject.keys(obj).some(function (key) {

returnobj[key] != null && (obj[key].toString().toLowerCase()).includes(searchKey);

});

});

};

And for fixing the sorting Original

MdbTableSortDirective.prototype.onclick = function () {

this.sortDataBy(this.sortBy.toLowerCase());

};

Changed To:

MdbTableSortDirective.prototype.onclick = function () {

this.sortDataBy(this.sortBy);

};

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear tehAon, You are 100% right. The sorting feature only works if the table's header is same as in typescript code. For now, there is no other solution to use sorting feature like this one. We'll check this issue in the future, and we'll try to change this behavior. Best Regards, Damian

tehAon pro commented 5 years ago

not only has to be the same, it also currently has to be lowercase because it forces it toLowerCase() in the sort directive before looking up the key.

HarishHebbar free commented 5 years ago

Dear Damian, Any update on this.

Damian Gemza staff commented 5 years ago

Dear Harish,

For now, sorting the table works only in the situation, when the table's header is the same as in the typescript code.

Best Regards,

Damian

HarishHebbar free commented 5 years ago

Dear Damian,

Thanks for the update.

HarishHebbar free commented 5 years ago

Dear Damian,

The issue I faced was if there is space difference in the header UI and header name in typescript, sorting is not working.(like I have header name as Customer Name in UI and in typescript I am having CustomerName)

WorkAround I did:I wrote a custom trim function and now sorting works for me.HTML file: [sortBy]="trim(headElements[i])"typescript file:trim(headElement){ return headElement.replace(/ /g,''"); }

Is it possible to handle this in the mdb-table-sort.directive.ts code itself like how you have handled the lowercase.

Damian Gemza staff commented 5 years ago

Harish,

Thanks for your suggestion! We'll take a look at your code, and we'll implement it, if there won't be any problems with the code itself.

Best Regards,

Damian

HarishHebbar free commented 5 years ago

Dear Damian,

Thanks for the prompt update.

Damian Gemza staff commented 5 years ago

I'm glad that I could help you :)

HarishHebbar free commented 5 years ago

Dear Damian,

Thanks for including the white space trim function in release v.7.4.2 :)

Damian Gemza staff commented 5 years ago

No problem :) I'm glad that I could help you.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.3
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: Yes

tehAon

Pro User 25Support score
1Questions 2Answers 0Snippets