[SM-552] make string sort in TableDataSource case insensitive (#4889)
* make string sort case insensitive * use localeCompare
This commit is contained in:
parent
ce6c975dd9
commit
bb36184256
|
@ -132,7 +132,7 @@ export class TableDataSource<T> extends DataSource<T> {
|
|||
*/
|
||||
protected sortData(data: T[], sort: Sort): T[] {
|
||||
const column = sort.column;
|
||||
const direction = sort.direction;
|
||||
const directionModifier = sort.direction === "asc" ? 1 : -1;
|
||||
if (!column) {
|
||||
return data;
|
||||
}
|
||||
|
@ -140,7 +140,7 @@ export class TableDataSource<T> extends DataSource<T> {
|
|||
return data.sort((a, b) => {
|
||||
// If a custom sort function is provided, use it instead of the default.
|
||||
if (sort.fn) {
|
||||
return sort.fn(a, b) * (direction === "asc" ? 1 : -1);
|
||||
return sort.fn(a, b) * directionModifier;
|
||||
}
|
||||
|
||||
let valueA = this.sortingDataAccessor(a, column);
|
||||
|
@ -161,6 +161,10 @@ export class TableDataSource<T> extends DataSource<T> {
|
|||
}
|
||||
}
|
||||
|
||||
if (typeof valueA === "string" && typeof valueB === "string") {
|
||||
return valueA.localeCompare(valueB) * directionModifier;
|
||||
}
|
||||
|
||||
// If both valueA and valueB exist (truthy), then compare the two. Otherwise, check if
|
||||
// one value exists while the other doesn't. In this case, existing value should come last.
|
||||
// This avoids inconsistent results when comparing values to undefined/null.
|
||||
|
@ -179,7 +183,7 @@ export class TableDataSource<T> extends DataSource<T> {
|
|||
comparatorResult = -1;
|
||||
}
|
||||
|
||||
return comparatorResult * (direction === "asc" ? 1 : -1);
|
||||
return comparatorResult * directionModifier;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -168,3 +168,31 @@ const FilterableTemplate: Story = (args) => ({
|
|||
});
|
||||
|
||||
export const Filterable = FilterableTemplate.bind({});
|
||||
|
||||
const data4 = new TableDataSource<{ name: string }>();
|
||||
|
||||
data4.data = [...Array(5).keys()].map((i) => ({
|
||||
name: i % 2 == 0 ? `name-${i}`.toUpperCase() : `name-${i}`.toLowerCase(),
|
||||
}));
|
||||
|
||||
const VariableCaseTemplate: Story = (args) => ({
|
||||
props: {
|
||||
dataSource: data4,
|
||||
},
|
||||
template: `
|
||||
<bit-table [dataSource]="dataSource">
|
||||
<ng-container header>
|
||||
<tr>
|
||||
<th bitCell bitSortable="name" default>Name</th>
|
||||
</tr>
|
||||
</ng-container>
|
||||
<ng-template body let-rows$>
|
||||
<tr bitRow *ngFor="let r of rows$ | async">
|
||||
<td bitCell>{{ r.name }}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
`,
|
||||
});
|
||||
|
||||
export const VariableCase = VariableCaseTemplate.bind({});
|
||||
|
|
Loading…
Reference in New Issue