From 83334c7fa7e5da581841083b86d1ced73b59d91c Mon Sep 17 00:00:00 2001 From: Martin Pilat Date: Tue, 3 Sep 2024 15:33:59 +0200 Subject: [PATCH] feat(dashboards): table widget selection docs --- .../src/components/docs/demo.files.ts | 9 + .../widget-types/table/table-docs.module.ts | 12 ++ .../table-selectable-docs.component.html | 49 +++++- .../table/table-selectable-docs.component.ts | 15 +- ...et-selectable-multi.example.component.html | 3 + ...et-selectable-multi.example.component.less | 3 + ...dget-selectable-multi.example.component.ts | 40 +++++ ...et-selectable-radio.example.component.html | 3 + ...et-selectable-radio.example.component.less | 3 + ...dget-selectable-radio.example.component.ts | 40 +++++ ...t-selectable-single.example.component.html | 3 + ...t-selectable-single.example.component.less | 3 + ...get-selectable-single.example.component.ts | 39 +++++ ...ble-widget-selectable.example.component.ts | 157 +++++++++--------- .../components/prototypes/table/widgets.ts | 1 + 15 files changed, 298 insertions(+), 82 deletions(-) create mode 100644 packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.html create mode 100644 packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.less create mode 100644 packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.ts create mode 100644 packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.html create mode 100644 packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.less create mode 100644 packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.ts create mode 100644 packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.html create mode 100644 packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.less create mode 100644 packages/dashboards/examples/src/components/docs/widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.ts 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:

+ + + + + + + + + - +

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: [