diff --git a/packages/dashboards/examples/src/components/docs/demo.files.ts b/packages/dashboards/examples/src/components/docs/demo.files.ts
index 7a7e9205c..fe1355b07 100644
--- a/packages/dashboards/examples/src/components/docs/demo.files.ts
+++ b/packages/dashboards/examples/src/components/docs/demo.files.ts
@@ -176,6 +176,15 @@ export const DEMO_PATHS = [
"widget-types/table/table-widget-search/table-widget-search-example.component.ts",
"widget-types/table/table-widget-search-docs.component.html",
"widget-types/table/table-widget-search-docs.component.ts",
+ "widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.html",
+ "widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.less",
+ "widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.ts",
+ "widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.html",
+ "widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.less",
+ "widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.ts",
+ "widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.html",
+ "widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.less",
+ "widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.ts",
"widget-types/table/table-widget-selectable/table-widget-selectable.example.component.html",
"widget-types/table/table-widget-selectable/table-widget-selectable.example.component.less",
"widget-types/table/table-widget-selectable/table-widget-selectable.example.component.ts",
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-docs.module.ts b/packages/dashboards/examples/src/components/docs/widget-types/table/table-docs.module.ts
index 23e02afdd..0bfe0f8b9 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/table/table-docs.module.ts
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-docs.module.ts
@@ -44,6 +44,15 @@ import { TableSelectableDocsComponent } from "./table-selectable-docs.component"
import { TableWidgetSelectableExampleComponent } from "./table-widget-selectable/table-widget-selectable.example.component";
import { TablePaginatorDocsComponent } from "./table-paginator-docs.component";
import { TableWidgetPaginatorExampleComponent } from "./table-widget-paginator/table-widget-paginator-example.component";
+import {
+ TableWidgetSelectableMultiExampleComponent
+} from "./table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component";
+import {
+ TableWidgetSelectableSingleExampleComponent
+} from "./table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component";
+import {
+ TableWidgetSelectableRadioExampleComponent
+} from "./table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component";
const routes: Routes = [
{
@@ -116,6 +125,9 @@ const routes: Routes = [
TableWidgetExampleComponent,
TableWidgetSearchExampleComponent,
TableWidgetSelectableExampleComponent,
+ TableWidgetSelectableMultiExampleComponent,
+ TableWidgetSelectableSingleExampleComponent,
+ TableWidgetSelectableRadioExampleComponent,
],
providers: [
{
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.html b/packages/dashboards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.html
index 37da57329..f5a7413ca 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.html
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.html
@@ -23,17 +23,58 @@
Table Widget with Select Functionality
+Types of Select
+Table widget can be configured with 4 different types of select:
+
+ -
+ Multi:
+
+ Allows to pick multiple table rows. Each row displays a checkbox in
+ this mode and a selector for all items on the given page/all pages
+ is displayed as well.
+
+
+ -
+ Radio:
+
+ Allows to pick only one table row. Each row displays a radio button
+ and the selector for all items is hidden.
+
+
+ -
+ Single:
+
+ Same behavior as Radio mode but without buttons. Row is
+ clickable by default.
+
+
+
+
+
+
+
+
+
+
+
-
+
Configuring the Widget
To configure the widget you have to enable selection in the widget
- configuration:
+ configuration. The configuration is of type
+ TableWidgetSelectionConfig
.
{{ tableConfigurationText }}
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.ts
index 16d8f1853..acb86dbb6 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.ts
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.ts
@@ -29,10 +29,17 @@ export class TableSelectableDocsComponent {
"table": {
...
properties: {
- configuration: {
- // enable selection here
- selectable: true,
- } as ITableWidgetConfig,
+ // enabling selection here
+ selectionConfiguration: {
+ // whether the selection is enabled or disabled
+ enabled: true,
+ // can be Multi | Radio | Single
+ selectionMode: TableSelectionMode.Multi,
+ // property that uniquely identifies row in a table
+ trackByProperty: "id",
+ // whether clicking on row should select it
+ clickableRow: true,
+ },
},
},
`;
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.html b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.html
new file mode 100644
index 000000000..2e83a68f4
--- /dev/null
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.html
@@ -0,0 +1,3 @@
+
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.less b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.less
new file mode 100644
index 000000000..c38e702f2
--- /dev/null
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.less
@@ -0,0 +1,3 @@
+.dashboard {
+ height: 400px;
+}
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.ts
new file mode 100644
index 000000000..2c218caf0
--- /dev/null
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.ts
@@ -0,0 +1,40 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to
+// deal in the Software without restriction, including without limitation the
+// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+// sell copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import { Component } from "@angular/core";
+import { TableSelectionMode } from "@nova-ui/bits";
+import { TableWidgetSelectionConfig } from "@nova-ui/dashboards";
+
+/**
+ * A component that instantiates the dashboard
+ */
+@Component({
+ selector: "table-widget-selectable-multi-example",
+ templateUrl: "./table-widget-selectable-multi.example.component.html",
+ styleUrls: ["./table-widget-selectable-multi.example.component.less"],
+})
+export class TableWidgetSelectableMultiExampleComponent {
+ public selectionConfiguration: TableWidgetSelectionConfig = {
+ enabled: true,
+ selectionMode: TableSelectionMode.Multi,
+ trackByProperty: "id",
+ clickableRow: true,
+ };
+}
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.html b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.html
new file mode 100644
index 000000000..2e83a68f4
--- /dev/null
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.html
@@ -0,0 +1,3 @@
+
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.less b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.less
new file mode 100644
index 000000000..c38e702f2
--- /dev/null
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.less
@@ -0,0 +1,3 @@
+.dashboard {
+ height: 400px;
+}
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.ts
new file mode 100644
index 000000000..9027feb63
--- /dev/null
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.ts
@@ -0,0 +1,40 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to
+// deal in the Software without restriction, including without limitation the
+// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+// sell copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import { Component } from "@angular/core";
+import { TableSelectionMode } from "@nova-ui/bits";
+import { TableWidgetSelectionConfig } from "@nova-ui/dashboards";
+
+/**
+ * A component that instantiates the dashboard
+ */
+@Component({
+ selector: "table-widget-selectable-radio-example",
+ templateUrl: "./table-widget-selectable-radio.example.component.html",
+ styleUrls: ["./table-widget-selectable-radio.example.component.less"],
+})
+export class TableWidgetSelectableRadioExampleComponent {
+ public selectionConfiguration: TableWidgetSelectionConfig = {
+ enabled: true,
+ selectionMode: TableSelectionMode.Radio,
+ trackByProperty: "id",
+ clickableRow: true,
+ };
+}
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.html b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.html
new file mode 100644
index 000000000..2e83a68f4
--- /dev/null
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.html
@@ -0,0 +1,3 @@
+
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.less b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.less
new file mode 100644
index 000000000..c38e702f2
--- /dev/null
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.less
@@ -0,0 +1,3 @@
+.dashboard {
+ height: 400px;
+}
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.ts
new file mode 100644
index 000000000..5856a06fd
--- /dev/null
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.ts
@@ -0,0 +1,39 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to
+// deal in the Software without restriction, including without limitation the
+// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+// sell copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import { Component } from "@angular/core";
+import { TableSelectionMode } from "@nova-ui/bits";
+import { TableWidgetSelectionConfig } from "@nova-ui/dashboards";
+
+/**
+ * A component that instantiates the dashboard
+ */
+@Component({
+ selector: "table-widget-selectable-single-example",
+ templateUrl: "./table-widget-selectable-single.example.component.html",
+ styleUrls: ["./table-widget-selectable-single.example.component.less"],
+})
+export class TableWidgetSelectableSingleExampleComponent {
+ public selectionConfiguration: TableWidgetSelectionConfig = {
+ enabled: true,
+ selectionMode: TableSelectionMode.Single,
+ trackByProperty: "id",
+ };
+}
diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable.example.component.ts b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable.example.component.ts
index e0b1f0c91..83b32bade 100644
--- a/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable.example.component.ts
+++ b/packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable.example.component.ts
@@ -19,9 +19,9 @@
// THE SOFTWARE.
import { HttpClient } from "@angular/common/http";
-import { ChangeDetectorRef, Component, OnInit } from "@angular/core";
+import { ChangeDetectorRef, Component, Input, OnInit } from "@angular/core";
import { GridsterConfig, GridsterItem } from "angular-gridster2";
-import { LoggerService } from "@nova-ui/bits";
+import { LoggerService, TableSelectionMode } from "@nova-ui/bits";
import {
DATA_SOURCE,
DEFAULT_PIZZAGNA_ROOT,
@@ -34,6 +34,7 @@ import {
PizzagnaLayer,
ProviderRegistryService,
RawFormatterComponent,
+ TableWidgetSelectionConfig,
WellKnownPathKey,
WellKnownProviders,
WidgetTypesService,
@@ -54,6 +55,11 @@ export class TableWidgetSelectableExampleComponent implements OnInit {
public gridsterConfig: GridsterConfig = {};
public editMode: boolean = false;
+ @Input() public selectionConfiguration: TableWidgetSelectionConfig = {
+ enabled: false,
+ selectionMode: TableSelectionMode.None,
+ };
+
constructor(
private widgetTypesService: WidgetTypesService,
private providerRegistry: ProviderRegistryService,
@@ -93,7 +99,7 @@ export class TableWidgetSelectableExampleComponent implements OnInit {
}
public initializeDashboard(): void {
- const tableWidget = widgetConfig;
+ const tableWidget = this.widgetConfig;
const widgetIndex: IWidgets = {
[tableWidget.id]:
this.widgetTypesService.mergeWithWidgetType(tableWidget),
@@ -113,84 +119,87 @@ export class TableWidgetSelectableExampleComponent implements OnInit {
widgets: widgetIndex,
};
}
-}
-export const widgetConfig: IWidget = {
- id: "widget1",
- type: "table",
- pizzagna: {
- [PizzagnaLayer.Configuration]: {
- [DEFAULT_PIZZAGNA_ROOT]: {
- providers: {
- [WellKnownProviders.InteractionHandler]: {
- providerId: NOVA_URL_INTERACTION_HANDLER,
+ private get widgetConfig(): IWidget {
+ return {
+ id: "widget1",
+ type: "table",
+ pizzagna: {
+ [PizzagnaLayer.Configuration]: {
+ [DEFAULT_PIZZAGNA_ROOT]: {
+ providers: {
+ [WellKnownProviders.InteractionHandler]: {
+ providerId: NOVA_URL_INTERACTION_HANDLER,
+ },
+ },
},
- },
- },
- header: {
- properties: {
- title: "Table Widget with Selection!",
- subtitle: "Basic table widget",
- collapsible: true,
- },
- },
- table: {
- providers: {
- [WellKnownProviders.DataSource]: {
- providerId: AcmeTableMockDataSource.providerId,
- } as IProviderConfiguration,
- },
- properties: {
- configuration: {
- // enabling selection here
- selectable: true,
- columns: [
- {
- id: "column1",
- label: "No.",
- isActive: true,
- formatter: {
- componentType:
- RawFormatterComponent.lateLoadKey,
- properties: {
- dataFieldIds: {
- value: "position",
+ header: {
+ properties: {
+ title: "Table Widget with Selection!",
+ subtitle: "Basic table widget",
+ collapsible: true,
+ },
+ },
+ table: {
+ providers: {
+ [WellKnownProviders.DataSource]: {
+ providerId: AcmeTableMockDataSource.providerId,
+ } as IProviderConfiguration,
+ },
+ properties: {
+ configuration: {
+ // enabling selection here
+ selectionConfiguration:
+ this.selectionConfiguration,
+ columns: [
+ {
+ id: "column1",
+ label: "No.",
+ isActive: true,
+ formatter: {
+ componentType:
+ RawFormatterComponent.lateLoadKey,
+ properties: {
+ dataFieldIds: {
+ value: "position",
+ },
+ },
},
},
- },
- },
- {
- id: "column2",
- label: "Name",
- isActive: true,
- formatter: {
- componentType:
- RawFormatterComponent.lateLoadKey,
- properties: {
- dataFieldIds: {
- value: "name",
+ {
+ id: "column2",
+ label: "Name",
+ isActive: true,
+ formatter: {
+ componentType:
+ RawFormatterComponent.lateLoadKey,
+ properties: {
+ dataFieldIds: {
+ value: "name",
+ },
+ },
},
},
- },
- },
- {
- id: "column3",
- label: "Status",
- isActive: true,
- formatter: {
- componentType:
- RawFormatterComponent.lateLoadKey,
- properties: {
- dataFieldIds: {
- value: "status",
+ {
+ id: "column3",
+ label: "Status",
+ isActive: true,
+ formatter: {
+ componentType:
+ RawFormatterComponent.lateLoadKey,
+ properties: {
+ dataFieldIds: {
+ value: "status",
+ },
+ },
},
},
- },
- },
- ],
- } as ITableWidgetConfig,
+ ],
+ } as ITableWidgetConfig,
+ },
+ },
},
},
- },
- },
-};
+ };
+ }
+}
diff --git a/packages/dashboards/examples/src/components/prototypes/table/widgets.ts b/packages/dashboards/examples/src/components/prototypes/table/widgets.ts
index 839cf5003..45673f26a 100644
--- a/packages/dashboards/examples/src/components/prototypes/table/widgets.ts
+++ b/packages/dashboards/examples/src/components/prototypes/table/widgets.ts
@@ -501,6 +501,7 @@ export const widgets: IWidget[] = [
selectionConfiguration: {
enabled: true,
selectionMode: TableSelectionMode.Radio,
+ clickableRow: true,
},
clickableRow: true,
columns: [