One column header should be All Capital Letters with Sorting


Topic: One column header should be All Capital Letters with Sorting capabilities

SourceCorrect1 pro premium priority asked 9 months ago

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}}


Arkadiusz Idzikowski staff answered 9 months ago

@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 9 months ago

@Arkadiusz Idzikowski Thank you for your response, please let me know once it is addressed at your end.


adamgusky pro commented 6 months 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 6 months 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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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