diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 702994fbc..b7ebefb37 100644 --- a/stencil-workspace/src/components.d.ts +++ b/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(type: K, listener: (this: HTMLModusTableElement, ev: ModusTableCustomEvent) => 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) => void; + /** + * Emits selected page index and size + */ + "onRowClick"?: (event: ModusTableCustomEvent) => 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. */ diff --git a/stencil-workspace/src/components/modus-table/models/modus-table.models.ts b/stencil-workspace/src/components/modus-table/models/modus-table.models.ts index f3c9e7501..d1f556ac7 100644 --- a/stencil-workspace/src/components/modus-table/models/modus-table.models.ts +++ b/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; +} diff --git a/stencil-workspace/src/components/modus-table/models/table-context.models.ts b/stencil-workspace/src/components/modus-table/models/table-context.models.ts index 32b7b91a9..9fbfad2cf 100644 --- a/stencil-workspace/src/components/modus-table/models/table-context.models.ts +++ b/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; + rowClick: EventEmitter; + rowExpanded: EventEmitter; rowSelectionChange: EventEmitter; @@ -102,6 +105,8 @@ export interface TableContext { wrapText: boolean; + showPointerOnHover: boolean; + getRowId: (originalRow: unknown, index: number, parent?: Row) => string; updateData: (updater: Updater, context: TableCellEdited) => void; onColumnsChange: (newVal: ModusTableColumn[]) => void; diff --git a/stencil-workspace/src/components/modus-table/modus-table.e2e.ts b/stencil-workspace/src/components/modus-table/modus-table.e2e.ts index ca0c2a0df..973476674 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.e2e.ts +++ b/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(''); + 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(); diff --git a/stencil-workspace/src/components/modus-table/modus-table.scss b/stencil-workspace/src/components/modus-table/modus-table.scss index 54bc0d51d..a85fb4faa 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.scss +++ b/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 { diff --git a/stencil-workspace/src/components/modus-table/modus-table.tsx b/stencil-workspace/src/components/modus-table/modus-table.tsx index 81fba9616..a6099cd82 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.tsx +++ b/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; @@ -304,6 +308,9 @@ export class ModusTable { /** Emits selected page index and size */ @Event() paginationChange: EventEmitter; + /** Emits selected page index and size */ + @Event() rowClick: EventEmitter; + @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, diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 722d54ade..381329889 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/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, diff --git a/stencil-workspace/src/components/modus-table/parts/modus-table-body.tsx b/stencil-workspace/src/components/modus-table/parts/modus-table-body.tsx index 7d4d71ccf..f8c40c77c 100644 --- a/stencil-workspace/src/components/modus-table/parts/modus-table-body.tsx +++ b/stencil-workspace/src/components/modus-table/parts/modus-table-body.tsx @@ -57,9 +57,9 @@ export const ModusTableBody: FunctionalComponent = ({ conte {table.getRowModel()?.rows.map((row) => { const { getIsSelected, getIsAllSubRowsSelected, getVisibleCells, subRows, id } = row; const isChecked = getIsSelected() && (subRows?.length ? getIsAllSubRowsSelected() : true); - + const { showPointerOnHover } = context; return ( - + {rowSelection && ( ` | | `paginationChange` | Emits selected page index and size | `CustomEvent` | | `rowActionClick` | An event that fires when a row action is clicked. | `CustomEvent` | +| `rowClick` | Emits selected page index and size | `CustomEvent` | | `rowExpanded` | Emits expanded state of the columns | `CustomEvent` | | `rowSelectionChange` | Emits rows selected | `CustomEvent` | | `sortChange` | Emits column sort order | `CustomEvent` | diff --git a/stencil-workspace/src/index.html b/stencil-workspace/src/index.html index 77729b596..66276bc1d 100644 --- a/stencil-workspace/src/index.html +++ b/stencil-workspace/src/index.html @@ -17,7 +17,50 @@
- + +
diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx index 0a8f9825a..bd3ae94ba 100644 --- a/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx +++ b/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` | | `rowActionClick` | An event that fires when a row action is clicked. | `CustomEvent` | +| `rowClick` | Emits the row clicked and the column id | `CustomEvent` | | `rowExpanded` | Emits expanded state of the columns | `CustomEvent` | | `rowSelectionChange` | Emits rows selected | `CustomEvent` | | `sortChange` | Emits column sort order | `CustomEvent` | diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx index 6349baac9..fe169eace 100644 --- a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx @@ -313,6 +313,7 @@ const DefaultArgs = { columnReorder: false, pagination: false, showSortIconOnHover: false, + showPointerOnHover: false, summaryRow: false, fullWidth: false, pageSizeList: [7, 10, 20], @@ -360,6 +361,16 @@ export default { }, type: { required: false }, }, + showPointerOnHover: { + name: 'showPointerOnHover', + description: 'Shows a pointer cursor on hover', + control: 'boolean', + table: { + defaultValue: { summary: false }, + type: { summary: 'boolean' }, + }, + type: { required: false }, + }, sort: { name: 'sort', description: 'Enables sort for table columns', @@ -596,6 +607,7 @@ export default { 'rowUpdated', 'sortChange', 'rowActionClick', + 'rowClick', ], }, controls: { expanded: true, sort: 'requiredFirst' }, @@ -638,6 +650,7 @@ const Template = ({ density, wrapText, customSort, + showPointerOnHover, }) => html`