Table expander checkbox (#738)

* fix: supporting both expander and checkbox state columns

* refactor: adding test

* refactor: addressing review comments

Author: anandtiwary

projects/components/src/table/cells/state-parsers/table-cell-state-parser.ts

@@ -1,4 +1,4 @@
-import { TableRowState } from '../../table-api';
+import { StatefulTableRow, TableRowState } from '../../table-api';
 import { TableCellParser } from '../table-cell-parser';
 import { TableCellParserBase } from '../table-cell-parser-base';
 import { CoreTableCellParserType } from '../types/core-table-cell-parser-type';
@@ -7,8 +7,8 @@ import { CoreTableCellParserType } from '../types/core-table-cell-parser-type';
   type: CoreTableCellParserType.State
 })
 export class TableCellStateParser extends TableCellParserBase<TableRowState, TableRowState, undefined> {
-  public parseValue(cellData: TableRowState): TableRowState {
-    return cellData;
+  public parseValue(_: TableRowState, rowData: StatefulTableRow): TableRowState {
+    return rowData.$$state;
   }
 
   public parseFilterValue(): undefined {

projects/components/src/table/cells/types/core-table-cell-parser-type.ts

@@ -1,7 +1,7 @@
 export const enum CoreTableCellParserType {
-  State = 'state',
   Boolean = 'boolean',
   Number = 'number',
+  State = 'state',
   String = 'string',
   Timestamp = 'timestamp',
   Icon = 'icon',

projects/components/src/table/data/table-cdk-data-source.ts

@@ -59,7 +59,7 @@ export class TableCdkDataSource implements DataSource<TableRow> {
       .pipe(
         tap(() => this.loadingStateSubject.next({ loading$: NEVER })),
         /**
-         * Below debouce is needed to handle multiple emission from buildChangeObservable.
+         * Below debounce is needed to handle multiple emission from buildChangeObservable.
          */
         debounceTime(100),
         mergeMap(([columnConfigs, pageEvent, filters, queryProperties, changedColumn, changedRow]) =>

projects/components/src/table/table.component.test.ts

@@ -306,7 +306,7 @@ describe('Table component', () => {
       expectObservable(spectator.component.columnConfigs$).toBe('x', {
         x: [
           expect.objectContaining({
-            id: '$$state',
+            id: '$$selected',
             display: CoreTableCellRendererType.Checkbox,
             visible: true
           }),
@@ -371,16 +371,21 @@ describe('Table component', () => {
           map(columnConfigs => columnConfigs.map(columnConfig => spectator.component.isExpanderColumn(columnConfig)))
         )
       ).toBe('x', {
-        x: [true, false, false]
+        x: [true, false, false, false]
       });
 
       expectObservable(spectator.component.columnConfigs$).toBe('x', {
         x: [
           expect.objectContaining({
-            id: '$$state',
+            id: '$$expanded',
             display: CoreTableCellRendererType.RowExpander,
             visible: true
           }),
+          expect.objectContaining({
+            id: '$$selected',
+            display: CoreTableCellRendererType.Checkbox,
+            visible: true
+          }),
           expect.objectContaining({
             id: 'firstId'
           }),

projects/components/src/table/table.component.ts

@@ -194,15 +194,15 @@ export class TableComponent
   private static readonly SORT_DIRECTION_URL_PARAM: string = 'sort-direction';
 
   private readonly expandableToggleColumnConfig: TableColumnConfig = {
-    id: '$$state',
+    id: '$$expanded',
     width: '32px',
     visible: true,
     display: CoreTableCellRendererType.RowExpander,
     onClick: (row: StatefulTableRow) => this.toggleRowExpanded(row)
   };
 
   private readonly multiSelectRowColumnConfig: TableColumnConfig = {
-    id: '$$state',
+    id: '$$selected',
     width: '32px',
     visible: true,
     display: CoreTableCellRendererType.Checkbox,
@@ -569,11 +569,15 @@ export class TableComponent
   }
 
   private buildColumnConfigExtendeds(columnConfigs: TableColumnConfig[]): TableColumnConfigExtended[] {
-    const stateColumns = this.hasExpandableRows()
-      ? [this.expandableToggleColumnConfig]
-      : this.hasMultiSelect()
-      ? [this.multiSelectRowColumnConfig]
-      : [];
+    const stateColumns = [];
+
+    if (this.hasExpandableRows()) {
+      stateColumns.push(this.expandableToggleColumnConfig);
+    }
+
+    if (this.hasMultiSelect()) {
+      stateColumns.push(this.multiSelectRowColumnConfig);
+    }
 
     return this.tableService.buildExtendedColumnConfigs(
       [...stateColumns, ...columnConfigs],