Topic: One column header should be All Capital Letters with Sorting capabilities
Expected behavior
when one column header is in all capital letters, that particular column should get sorted when clicked on the sorting arrow.
Actual behavior
There is one column header in the data table to be in all capital letters since it is not a word, it is an abbreviation ex : like SKU " Stock Keeping Unit"
when I apply sorting, the column is not getting sorted,
code snippet is below, and let me know if you need more info on this.
Resources (screenshots, code snippets etc.)
TS FILE
export interface Person { name: string; stage: string; SKU: string;}
headers = ['Name', 'Stage', 'SKU'];
dataSource: Person[] = [ { name: 'Tiger Nixon', stage: 'Created', SKU: 'abc', }, { name: 'Sonya Frost', stage: 'Hazmat Done', SKU: 'vfb', }, { name: 'Tiger Nixon', stage: 'Completed', SKU: 'rty', },
HTML
{{ header | titlecase }} {{ data.name }} {{ data.stage }} {{ data.SKU}}
@SourceCorrect1 Thank you for reporting this problem, we will take a closer look at that.
As a workaround for now you would need to modify this value to lower case both in the Person object and headers array.
Edit:
We haven't had a chance to check it more precisely yet, but given the use case mentioned by the @adamgusky, I'm not sure if we'll be able to find one solution that will solve all similar problems. Header name will often contain capital letters, spaces, special signs etc. and it would be impossible to have an object property that is exactly the same as header name in such cases.
I think that in this case it would be better to use a list of objects with value/label pairs. Here is an example from our Admin Dashboard project:
HTML:
<thead class="datatable-header">
<tr>
<th
*ngFor="let header of headers"
[mdbTableSortHeader]="header.value"
scope="col"
>
{{ header.label }}
</th>
</tr>
</thead>
TS:
interface Product {
productId: number;
quantity: number;
purchases: number;
delta: number;
}
headers = [
{ value: 'productId', label: 'Product ID' },
{ value: 'quantity', label: 'Quantity' },
{ value: 'purchases', label: 'Purchases' },
{ value: 'delta', label: 'Δ' },
];
SourceCorrect1 pro premium priority commented 3 years ago
@Arkadiusz Idzikowski Thank you for your response, please let me know once it is addressed at your end.
adamgusky commented 2 years ago
Has this been adressed? I'd like to entitle a header Total # Kilometers even though the properties name is '.meters'
Arkadiusz Idzikowski staff commented 2 years ago
@adamgusky @SourceCorrect1 I edited my answer and added an HTML/TS example. Please let us know if the provided information is helpful for your use case.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 1.0.0
- Device: desktop
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No