Modus Table: emit row click event

stencil-workspace/src/components.d.ts

@@ -20,7 +20,7 @@ import { ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/app
 import { RadioButton } from "./components/modus-radio-group/modus-radio-button";
 import { ModusSentimentScaleType } from "./components/modus-sentiment-scale/modus-sentiment-scale.models";
 import { ModusSideNavigationItemInfo } from "./components/modus-side-navigation/modus-side-navigation.models";
-import { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnSort, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableExpandedState, ModusTableManualPaginationOptions, ModusTableManualSortingOptions, ModusTablePaginationState, ModusTableRowAction, ModusTableRowActionClick, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
+import { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnSort, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableExpandedState, ModusTableManualPaginationOptions, ModusTableManualSortingOptions, ModusTablePaginationState, ModusTableRowAction, ModusTableRowActionClick, ModusTableRowClick, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
 import { Cell, Column, Row } from "@tanstack/table-core";
 import { TableCellEdited, TableContext } from "./components/modus-table/models/table-context.models";
 import { Tab } from "./components/modus-tabs/modus-tabs";
@@ -43,7 +43,7 @@ export { ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/app
 export { RadioButton } from "./components/modus-radio-group/modus-radio-button";
 export { ModusSentimentScaleType } from "./components/modus-sentiment-scale/modus-sentiment-scale.models";
 export { ModusSideNavigationItemInfo } from "./components/modus-side-navigation/modus-side-navigation.models";
-export { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnSort, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableExpandedState, ModusTableManualPaginationOptions, ModusTableManualSortingOptions, ModusTablePaginationState, ModusTableRowAction, ModusTableRowActionClick, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
+export { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnSort, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableExpandedState, ModusTableManualPaginationOptions, ModusTableManualSortingOptions, ModusTablePaginationState, ModusTableRowAction, ModusTableRowActionClick, ModusTableRowClick, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
 export { Cell, Column, Row } from "@tanstack/table-core";
 export { TableCellEdited, TableContext } from "./components/modus-table/models/table-context.models";
 export { Tab } from "./components/modus-tabs/modus-tabs";
@@ -1287,6 +1287,10 @@ export namespace Components {
           * (Optional) To display expanded rows.
          */
         "rowsExpandable": boolean;
+        /**
+          * (Optional) To show a pointer on row hover.
+         */
+        "showPointerOnHover": boolean;
         /**
           * (Optional) To display sort icon on hover.
          */
@@ -2593,6 +2597,7 @@ declare global {
         "rowSelectionChange": unknown;
         "sortChange": ModusTableSortingState;
         "paginationChange": ModusTablePaginationState;
+        "rowClick": ModusTableRowClick;
     }
     interface HTMLModusTableElement extends Components.ModusTable, HTMLStencilElement {
         addEventListener<K extends keyof HTMLModusTableElementEventMap>(type: K, listener: (this: HTMLModusTableElement, ev: ModusTableCustomEvent<HTMLModusTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4315,6 +4320,10 @@ declare namespace LocalJSX {
           * An event that fires when a row action is clicked.
          */
         "onRowActionClick"?: (event: ModusTableCustomEvent<ModusTableRowActionClick>) => void;
+        /**
+          * Emits selected page index and size
+         */
+        "onRowClick"?: (event: ModusTableCustomEvent<ModusTableRowClick>) => void;
         /**
           * Emits expanded state of the columns
          */
@@ -4345,6 +4354,10 @@ declare namespace LocalJSX {
           * (Optional) To display expanded rows.
          */
         "rowsExpandable"?: boolean;
+        /**
+          * (Optional) To show a pointer on row hover.
+         */
+        "showPointerOnHover"?: boolean;
         /**
           * (Optional) To display sort icon on hover.
          */

stencil-workspace/src/components/modus-table/models/modus-table.models.ts

@@ -152,3 +152,8 @@ export interface ModusTableManualSortingOptions {
 }
 
 export type ModusTableColumnSort = ColumnSort;
+
+export interface ModusTableRowClick {
+  row: unknown;
+  column: string;
+}

stencil-workspace/src/components/modus-table/models/table-context.models.ts

@@ -14,6 +14,7 @@ import {
   ModusTableSortingState,
   ModusTablePaginationState,
   ModusTableManualPaginationOptions,
+  ModusTableRowClick,
 } from './modus-table.models';
 import { Row, Table, Updater } from '@tanstack/table-core';
 import ModusTableCore from '../modus-table.core';
@@ -82,6 +83,8 @@ export interface TableContext {
 
   rowActionClick: EventEmitter<ModusTableRowActionClick>;
 
+  rowClick: EventEmitter<ModusTableRowClick>;
+
   rowExpanded: EventEmitter<ModusTableExpandedState>;
 
   rowSelectionChange: EventEmitter<unknown>;
@@ -102,6 +105,8 @@ export interface TableContext {
 
   wrapText: boolean;
 
+  showPointerOnHover: boolean;
+
   getRowId: (originalRow: unknown, index: number, parent?: Row<unknown>) => string;
   updateData: (updater: Updater<unknown>, context: TableCellEdited) => void;
   onColumnsChange: (newVal: ModusTableColumn<unknown>[]) => void;

stencil-workspace/src/components/modus-table/modus-table.e2e.ts

@@ -902,6 +902,30 @@ describe('modus-table', () => {
     expect(lastPage.textContent).toBe('19');
   });
 
+  it('should emit an event on row click', async () => {
+    page = await newE2EPage();
+
+    await page.setContent('<modus-table  />');
+    const component = await page.find('modus-table');
+
+    const rowClick = await page.spyOnEvent('rowClick');
+
+    component.setProperty('columns', MockColumns);
+    component.setProperty('data', MockData);
+
+    await page.waitForChanges();
+
+    const cell = await page.find('modus-table >>> td');
+
+    cell.focus();
+    await page.waitForChanges();
+
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+
+    expect(rowClick).toHaveReceivedEvent();
+  });
+
   describe('Header Text: Tooltip', () => {
     it('Should display a tooltip when header text is hover when a column have not been sorted', async () => {
       page = await newE2EPage();

stencil-workspace/src/components/modus-table/modus-table.scss

@@ -417,6 +417,10 @@ table {
         background-color: $modus-table-selected-bg;
       }
     }
+
+    &.show-pointer {
+      cursor: pointer;
+    }
   }
 
   .sticky-right {

stencil-workspace/src/components/modus-table/modus-table.tsx

@@ -52,6 +52,7 @@ import {
   ModusTableSortingState,
   ModusTableRowWithId,
   ModusTableColumnSort,
+  ModusTableRowClick,
 } from './models/modus-table.models';
 import ColumnDragState from './models/column-drag-state.model';
 import {
@@ -274,6 +275,9 @@ export class ModusTable {
   /** (Optional) To wrap text that overflows the cell. */
   @Prop() wrapText = false;
 
+  /** (Optional) To show a pointer on row hover. */
+  @Prop() showPointerOnHover = false;
+
   /** Emits the cell value that was edited */
   @Event() cellValueChange: EventEmitter<ModusTableCellValueChange>;
 
@@ -304,6 +308,9 @@ export class ModusTable {
   /** Emits selected page index and size */
   @Event() paginationChange: EventEmitter<ModusTablePaginationState>;
 
+  /** Emits selected page index and size */
+  @Event() rowClick: EventEmitter<ModusTableRowClick>;
+
   @State() itemDragState: ColumnDragState;
   @Watch('itemDragState')
   handleItemDragState(newValue: string, oldValue: string) {
@@ -510,6 +517,7 @@ export class ModusTable {
       rowSelectionChange: this.rowSelectionChange,
       rowExpanded: this.rowExpanded,
       rowActionClick: this.rowActionClick,
+      rowClick: this.rowClick,
       sortChange: this.sortChange,
       paginationChange: this.paginationChange,
       columnSizingChange: this.columnSizingChange,
@@ -530,6 +538,7 @@ export class ModusTable {
       tableCore: this.tableCore,
       tableInstance: this.tableCore.getTableInstance(),
       wrapText: this.wrapText,
+      showPointerOnHover: this.showPointerOnHover,
       onColumnsChange: this.onColumnsChange,
       onColumnResizeChange: this.onColumnResizeChange,
       onColumnReorderChange: this.onColumnReorderChange,

stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx

@@ -93,6 +93,9 @@ export class ModusTableCellMain {
 
     if (this.cell.column.columnDef[this.cellEditableKey]) {
       this.editMode = true;
+    } else {
+      const { rowClick } = this.context;
+      rowClick.emit({ row: this.cell.row.original, column: this.cell.column.id });
     }
   };
 
@@ -133,9 +136,14 @@ export class ModusTableCellMain {
     const key = event.key?.toLowerCase();
     const isCellEditable = this.cell.column.columnDef[this.cellEditableKey];
 
-    if (isCellEditable && !this.editMode && key === KEYBOARD_ENTER) {
-      this.editMode = true;
+    if (key === KEYBOARD_ENTER) {
       event.stopPropagation();
+      if (isCellEditable && !this.editMode) {
+        this.editMode = true;
+      } else {
+        const { rowClick } = this.context;
+        rowClick.emit({ row: this.cell.row.original, column: this.cell.column.id });
+      }
     } else {
       NavigateTableCells({
         eventKey: event.key,

stencil-workspace/src/components/modus-table/parts/modus-table-body.tsx

@@ -57,9 +57,9 @@ export const ModusTableBody: FunctionalComponent<ModusTableBodyProps> = ({ conte
       {table.getRowModel()?.rows.map((row) => {
         const { getIsSelected, getIsAllSubRowsSelected, getVisibleCells, subRows, id } = row;
         const isChecked = getIsSelected() && (subRows?.length ? getIsAllSubRowsSelected() : true);
-
+        const { showPointerOnHover } = context;
         return (
-          <tr key={id} class={{ 'enable-hover': hover, 'row-selected': isChecked }}>
+          <tr key={id} class={{ 'enable-hover': hover, 'row-selected': isChecked, 'show-pointer': showPointerOnHover }}>
             {rowSelection && (
               <ModusTableCellCheckbox
                 multipleRowSelection={multipleRowSelection}

stencil-workspace/src/components/modus-table/readme.md

@@ -28,6 +28,7 @@
 | `rowSelection`            | `row-selection`           | (Optional) To display checkbox.                                                                                                                                                       | `boolean`                                 | `false`                                                   |
 | `rowSelectionOptions`     | --                        | (Optional) To control multiple row selection.                                                                                                                                         | `ModusTableRowSelectionOptions`           | `{     multiple: false,     subRowSelection: false,   }`  |
 | `rowsExpandable`          | `rows-expandable`         | (Optional) To display expanded rows.                                                                                                                                                  | `boolean`                                 | `false`                                                   |
+| `showPointerOnHover`      | `show-pointer-on-hover`   | (Optional) To show a pointer on row hover.                                                                                                                                            | `boolean`                                 | `false`                                                   |
 | `showSortIconOnHover`     | `show-sort-icon-on-hover` | (Optional) To display sort icon on hover.                                                                                                                                             | `boolean`                                 | `false`                                                   |
 | `sort`                    | `sort`                    | (Optional) To sort data in table.                                                                                                                                                     | `boolean`                                 | `false`                                                   |
 | `sortIconStyle`           | `sort-icon-style`         | (Optional) To display a-z or arrow sort icons.                                                                                                                                        | `"alphabetical" \| "directional"`         | `'alphabetical'`                                          |
@@ -48,6 +49,7 @@
 | `columnVisibilityChange` | Emits visibility state of each column             | `CustomEvent<{ [x: string]: boolean; }>`            |
 | `paginationChange`       | Emits selected page index and size                | `CustomEvent<PaginationState>`                      |
 | `rowActionClick`         | An event that fires when a row action is clicked. | `CustomEvent<ModusTableRowActionClick>`             |
+| `rowClick`               | Emits selected page index and size                | `CustomEvent<ModusTableRowClick>`                   |
 | `rowExpanded`            | Emits expanded state of the columns               | `CustomEvent<boolean \| { [x: string]: boolean; }>` |
 | `rowSelectionChange`     | Emits rows selected                               | `CustomEvent<unknown>`                              |
 | `sortChange`             | Emits column sort order                           | `CustomEvent<ColumnSort[]>`                         |

stencil-workspace/src/index.html

@@ -17,7 +17,50 @@
 
   <body data-mwc-theme="light">
     <main>
-      <!-- Test components -->
+      <modus-table />
+      <script>
+        const table = document.querySelector('modus-table');
+        const MockColumns = [
+          {
+            header: 'Mock Column One',
+            accessorKey: 'mockColumnOne',
+            id: 'mock-column-one',
+            dataType: 'text',
+            footer: 'Total',
+          },
+          {
+            header: 'Mock Column Two',
+            accessorKey: 'mockColumnTwo',
+            id: 'mock-column-two',
+            dataType: 'integer',
+            showTotal: true,
+          },
+        ];
+
+        const MockData = [
+          {
+            mockColumnOne: 'Mock Data One 1',
+            mockColumnTwo: 330160,
+          },
+          {
+            mockColumnOne: 'Mock Data One 2',
+            mockColumnTwo: 900293,
+          },
+        ];
+
+        const displayOptions = {
+          borderless: true,
+          cellBorderless: true,
+        };
+        table.columns = MockColumns;
+        table.data = MockData;
+        table.showPointerOnHover = true;
+        table.hover = true;
+        table.displayOptions = displayOptions;
+        table.addEventListener('rowClick', (event) => {
+          console.log('Row Clicked', event.detail);
+        });
+      </script>
     </main>
   </body>
 </html>

stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx

@@ -765,6 +765,11 @@ interface ModusTableManualSortingOptions {
   currentSortingState: ModusTableSortingState
 }
 
+interface ModusTableRowClick {
+  row: unknown;
+  column: string;
+}
+
 ```
 
 ### Accessibility
@@ -804,6 +809,7 @@ Users can use keyboard navigation to perform different actions.
 | `rowSelection`            | `row-selection`           | (Optional) To display checkbox.                                                                                                                                                               | `boolean`                              | `false`                                                   |
 | `rowSelectionOptions`     | --                        | (Optional) To control multiple row selection.                                                                                                                                                 | `ModusTableRowSelectionOptions`        | `{     multiple: false,     subRowSelection: false,   }`  |
 | `rowsExpandable`          | `rows-expandable`         | (Optional) To display expanded rows.                                                                                                                                                          | `boolean`                              | `false`                                                   |
+| `showPointerOnHover`      | `show-pointer-on-hover`   | (Optional) To display a pointer on row hover.                                                                                                                                                 | `boolean`                              | `false`                                                   |
 | `showSortIconOnHover`     | `show-sort-icon-on-hover` | (Optional) To display sort icon on hover.                                                                                                                                                     | `boolean`                              | `false`                                                   |
 | `sort`                    | `sort`                    | (Optional) To sort data in table.                                                                                                                                                             | `boolean`                              | `false`                                                   |
 | `summaryRow`              | `summary-row`             | (Optional) To display summary row.                                                                                                                                                            | `boolean`                              | `false`                                                   |
@@ -822,6 +828,7 @@ Users can use keyboard navigation to perform different actions.
 | `columnVisibilityChange` | Emits visibility state of each column             | `CustomEvent<{ [x: string]: boolean; }>`            |
 | `paginationChange`       | Emits selected page index and size                | `CustomEvent<PaginationState>`                      |
 | `rowActionClick`         | An event that fires when a row action is clicked. | `CustomEvent<ModusTableRowActionClick>`             |
+| `rowClick`               | Emits the row clicked and the column id           | `CustomEvent<ModusTableRowClick>`                   |
 | `rowExpanded`            | Emits expanded state of the columns               | `CustomEvent<boolean \| { [x: string]: boolean; }>` |
 | `rowSelectionChange`     | Emits rows selected                               | `CustomEvent<unknown>`                              |
 | `sortChange`             | Emits column sort order                           | `CustomEvent<ColumnSort[]>`                         |