diff --git a/apps/components-e2e/src/components/table/BUILD.bazel b/apps/components-e2e/src/components/table/BUILD.bazel
index 4858ca2d26..a3b20ccadb 100644
--- a/apps/components-e2e/src/components/table/BUILD.bazel
+++ b/apps/components-e2e/src/components/table/BUILD.bazel
@@ -13,11 +13,14 @@ ng_module(
),
angular_assets = [
"table/table.html",
+ "table-simple/table-simple.html",
"table-order-expandable/table-expandable.html",
],
tsconfig = "//apps/components-e2e:tsconfig-app",
deps = [
"//libs/barista-components/core:compile",
+ "//libs/barista-components/empty-state:compile",
+ "//libs/barista-components/loading-distractor:compile",
"//libs/barista-components/table:compile",
"@npm//@angular/cdk",
"@npm//@angular/common",
diff --git a/apps/components-e2e/src/components/table/table-simple/table-simple.html b/apps/components-e2e/src/components/table/table-simple/table-simple.html
new file mode 100644
index 0000000000..5c9dc90841
--- /dev/null
+++ b/apps/components-e2e/src/components/table/table-simple/table-simple.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Loading...
+
+
+
+
+
+ No data that matches your query
+
+ Amend the timefrime you're querying within or review your query to make
+ your statement less restrictive.
+
+
+
+
+
+
+
+
+
diff --git a/apps/components-e2e/src/components/table/table-simple/table-simple.ts b/apps/components-e2e/src/components/table/table-simple/table-simple.ts
new file mode 100644
index 0000000000..95c734f169
--- /dev/null
+++ b/apps/components-e2e/src/components/table/table-simple/table-simple.ts
@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+const DATA = [
+ { name: 'I' },
+ { name: 'II' },
+ { name: 'III' },
+ { name: 'IV' },
+ { name: 'V' },
+];
+
+@Component({
+ selector: 'dt-e2e-table-simple',
+ templateUrl: 'table-simple.html',
+})
+export class DtE2ETableSimple {
+ disabled = false;
+
+ loading = false;
+
+ dataSource = DATA;
+
+ toggleTableData(): void {
+ if (this.dataSource.length === 0) {
+ this.dataSource = DATA;
+ } else {
+ this.dataSource = [];
+ }
+ }
+}
diff --git a/apps/components-e2e/src/components/table/table.e2e.ts b/apps/components-e2e/src/components/table/table.e2e.ts
index a2fd82b9d7..05744ffd04 100644
--- a/apps/components-e2e/src/components/table/table.e2e.ts
+++ b/apps/components-e2e/src/components/table/table.e2e.ts
@@ -23,6 +23,10 @@ import {
getDragDistance,
orderInputs,
changeOrderButton,
+ setEmptyDataButton,
+ setLoadingButton,
+ loadingDistractor,
+ emptyState,
} from './table.po';
fixture('Table')
@@ -236,6 +240,29 @@ test('input - should not reorder the table if disabled', async (testController:
.eql('II');
});
+fixture('Default table')
+ .page('http://localhost:4200/table/simple')
+ .beforeEach(async () => {
+ await resetWindowSizeToDefault();
+ await waitForAngular();
+ });
+
+test('should show the empty state when removing the data', async (testController: TestController) => {
+ await testController.click(setEmptyDataButton).expect(emptyState.exists).ok();
+});
+
+test('should not show the empty state, when loading is set', async (testController: TestController) => {
+ await testController
+ .click(setEmptyDataButton)
+ .expect(emptyState.exists)
+ .ok()
+ .click(setLoadingButton)
+ .expect(emptyState.exists)
+ .notOk()
+ .expect(loadingDistractor.exists)
+ .ok();
+});
+
fixture('Table Order Expandable')
.page('http://localhost:4200/table/expandable')
.beforeEach(async () => {
diff --git a/apps/components-e2e/src/components/table/table.module.ts b/apps/components-e2e/src/components/table/table.module.ts
index 9c9f53888e..9c39aa1b31 100644
--- a/apps/components-e2e/src/components/table/table.module.ts
+++ b/apps/components-e2e/src/components/table/table.module.ts
@@ -18,25 +18,31 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { Route, RouterModule } from '@angular/router';
import { DtTableModule } from '@dynatrace/barista-components/table';
+import { DtEmptyStateModule } from '@dynatrace/barista-components/empty-state';
import { DragDropModule } from '@angular/cdk/drag-drop';
import {
DT_UI_TEST_CONFIG,
DT_DEFAULT_UI_TEST_CONFIG,
} from '@dynatrace/barista-components/core';
import { DtE2ETable } from './table/table';
+import { DtE2ETableSimple } from './table-simple/table-simple';
import { DtE2ETableExpandable } from './table-order-expandable/table-expandable';
+import { DtLoadingDistractorModule } from '@dynatrace/barista-components/loading-distractor';
const routes: Route[] = [
{ path: '', component: DtE2ETable },
+ { path: 'simple', component: DtE2ETableSimple },
{ path: 'expandable', component: DtE2ETableExpandable },
];
@NgModule({
- declarations: [DtE2ETable, DtE2ETableExpandable],
+ declarations: [DtE2ETable, DtE2ETableSimple, DtE2ETableExpandable],
imports: [
CommonModule,
RouterModule.forChild(routes),
DtTableModule,
+ DtLoadingDistractorModule,
+ DtEmptyStateModule,
DragDropModule,
],
exports: [],
diff --git a/apps/components-e2e/src/components/table/table.po.ts b/apps/components-e2e/src/components/table/table.po.ts
index 8833e6287c..ab3a0d4431 100644
--- a/apps/components-e2e/src/components/table/table.po.ts
+++ b/apps/components-e2e/src/components/table/table.po.ts
@@ -18,6 +18,10 @@ import { Selector } from 'testcafe';
export const disableButton = Selector('#disable-toggle');
export const changeOrderButton = Selector('#change-order');
+export const setEmptyDataButton = Selector('#set-empty-data');
+export const setLoadingButton = Selector('#set-loading');
+export const emptyState = Selector('.dt-empty-state');
+export const loadingDistractor = Selector('dt-loading-distractor');
export const dragHandles = Selector('.dt-order-cell-icon');
export const orderInputs = Selector('.dt-order-cell-input');
export const expandButtons = Selector('.dt-expandable-cell .dt-button');
diff --git a/apps/dev/src/table/table-demo.component.html b/apps/dev/src/table/table-demo.component.html
index 669ecb6268..a2d6ff6ca0 100644
--- a/apps/dev/src/table/table-demo.component.html
+++ b/apps/dev/src/table/table-demo.component.html
@@ -8,6 +8,7 @@
+
+ Loading...
+
+
+
+
+ No data that matches your query
+
+ Amend the timefrime you're querying within or review your query to make
+ your statement less restrictive.
+
+
-
+
{{ data.series.name }}
@@ -79,9 +92,7 @@
-
- no chart
-
+ no chart
diff --git a/apps/dev/src/table/table-demo.component.ts b/apps/dev/src/table/table-demo.component.ts
index d142d317d6..61fbfe325c 100644
--- a/apps/dev/src/table/table-demo.component.ts
+++ b/apps/dev/src/table/table-demo.component.ts
@@ -106,7 +106,8 @@ export class TableDemo implements OnInit, OnDestroy, AfterViewInit {
traffic: '32.7 Mbit/s',
},
];
- dataSource: DtTableDataSource = new DtTableDataSource(this.data);
+ dataSource: DtTableDataSource = new DtTableDataSource();
+ tableLoading = true;
private subscription: Subscription = Subscription.EMPTY;
@@ -132,6 +133,11 @@ export class TableDemo implements OnInit, OnDestroy, AfterViewInit {
this.dataSource.pagination = null;
}
});
+
+ setTimeout(() => {
+ this.dataSource.data = this.data;
+ this.tableLoading = false;
+ }, 2000);
}
ngOnDestroy(): void {
diff --git a/libs/barista-components/table/src/table.html b/libs/barista-components/table/src/table.html
index 87128127a9..0bcae7418d 100644
--- a/libs/barista-components/table/src/table.html
+++ b/libs/barista-components/table/src/table.html
@@ -5,6 +5,7 @@