Skip to content

Commit 5e978c6

Browse files
authored
fix(angular/table): better handling of invalid data (#1030)
The table data source is set up to expect an array and will throw a cryptic error down the line if the value is anything different. While typings should be enough to enforce this, if the value comes from somewhere in the view it may not get caught. Since the effort for handling it on our end is minimal, these changes add some logic that fall back to an empty array if the value is invalid. angular/components#18953
1 parent 657cdb3 commit 5e978c6

File tree

2 files changed

+40
-0
lines changed

2 files changed

+40
-0
lines changed

src/angular/table/table.spec.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -543,6 +543,45 @@ describe('SbbTable', () => {
543543
['Footer A', 'Footer B', 'Footer C'],
544544
]);
545545
});
546+
547+
it('should fall back to empty table if invalid data is passed in', () => {
548+
component.underlyingDataSource.addData();
549+
fixture.detectChanges();
550+
expectTableToMatchContent(tableElement, [
551+
['Column A', 'Column B', 'Column C'],
552+
['a_1', 'b_1', 'c_1'],
553+
['a_2', 'b_2', 'c_2'],
554+
['a_3', 'b_3', 'c_3'],
555+
['a_4', 'b_4', 'c_4'],
556+
['Footer A', 'Footer B', 'Footer C'],
557+
]);
558+
559+
dataSource.data = null!;
560+
fixture.detectChanges();
561+
expectTableToMatchContent(tableElement, [
562+
['Column A', 'Column B', 'Column C'],
563+
['Footer A', 'Footer B', 'Footer C'],
564+
]);
565+
566+
component.underlyingDataSource.addData();
567+
fixture.detectChanges();
568+
expectTableToMatchContent(tableElement, [
569+
['Column A', 'Column B', 'Column C'],
570+
['a_1', 'b_1', 'c_1'],
571+
['a_2', 'b_2', 'c_2'],
572+
['a_3', 'b_3', 'c_3'],
573+
['a_4', 'b_4', 'c_4'],
574+
['a_5', 'b_5', 'c_5'],
575+
['Footer A', 'Footer B', 'Footer C'],
576+
]);
577+
578+
dataSource.data = {} as any;
579+
fixture.detectChanges();
580+
expectTableToMatchContent(tableElement, [
581+
['Column A', 'Column B', 'Column C'],
582+
['Footer A', 'Footer B', 'Footer C'],
583+
]);
584+
});
546585
});
547586

548587
it('should set css classes to grouped columns', () => {

src/angular/table/table/table-data-source.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export class _SbbTableDataSource<
8080
return this._data.value;
8181
}
8282
set data(data: T[]) {
83+
data = Array.isArray(data) ? data : [];
8384
this._data.next(data);
8485
// Normally the `filteredData` is updated by the re-render
8586
// subscription, but that won't happen if it's inactive.

0 commit comments

Comments
 (0)