[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[] {
|
protected sortData(data: T[], sort: Sort): T[] {
|
||||||
const column = sort.column;
|
const column = sort.column;
|
||||||
const direction = sort.direction;
|
const directionModifier = sort.direction === "asc" ? 1 : -1;
|
||||||
if (!column) {
|
if (!column) {
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
@ -140,7 +140,7 @@ export class TableDataSource<T> extends DataSource<T> {
|
||||||
return data.sort((a, b) => {
|
return data.sort((a, b) => {
|
||||||
// If a custom sort function is provided, use it instead of the default.
|
// If a custom sort function is provided, use it instead of the default.
|
||||||
if (sort.fn) {
|
if (sort.fn) {
|
||||||
return sort.fn(a, b) * (direction === "asc" ? 1 : -1);
|
return sort.fn(a, b) * directionModifier;
|
||||||
}
|
}
|
||||||
|
|
||||||
let valueA = this.sortingDataAccessor(a, column);
|
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
|
// 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.
|
// 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.
|
// This avoids inconsistent results when comparing values to undefined/null.
|
||||||
|
@ -179,7 +183,7 @@ export class TableDataSource<T> extends DataSource<T> {
|
||||||
comparatorResult = -1;
|
comparatorResult = -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
return comparatorResult * (direction === "asc" ? 1 : -1);
|
return comparatorResult * directionModifier;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -168,3 +168,31 @@ const FilterableTemplate: Story = (args) => ({
|
||||||
});
|
});
|
||||||
|
|
||||||
export const Filterable = FilterableTemplate.bind({});
|
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