From da9d9904140b080f8afed5ff44f4d1187e6aa23d Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Thu, 19 Sep 2024 13:01:20 +0530 Subject: [PATCH 1/4] Update table width --- .../components/modus-checkbox/modus-checkbox.scss | 1 + .../modus-table/models/table-context.models.ts | 2 ++ .../src/components/modus-table/modus-table.tsx | 4 ++++ .../modus-table/parts/modus-table-header.tsx | 3 ++- .../row/selection/modus-table-header-checkbox.tsx | 10 +++++++++- .../src/components/modus-table/readme.md | 1 + .../modus-table/modus-table-storybook-docs.mdx | 1 + .../modus-table/modus-table.stories.tsx | 15 +++++++++++++++ 8 files changed, 35 insertions(+), 2 deletions(-) diff --git a/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss b/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss index 83f55f187..62648ef07 100644 --- a/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss +++ b/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss @@ -3,6 +3,7 @@ :host { align-items: center; display: flex; + justify-content: center; } .modus-checkbox { 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 6031a5534..c27b8eef7 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 @@ -55,6 +55,8 @@ export interface TableContext { rowActions: TableRowActionWithOverflow[]; + rowActionSize: number; + rowsExpandable: boolean; rowSelection: boolean; diff --git a/stencil-workspace/src/components/modus-table/modus-table.tsx b/stencil-workspace/src/components/modus-table/modus-table.tsx index 45488b37d..a4d7691d2 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.tsx +++ b/stencil-workspace/src/components/modus-table/modus-table.tsx @@ -172,6 +172,9 @@ export class ModusTable { /** (Optional) Actions that can be performed on each row. A maximum of 4 icons will be shown, including overflow menu and expand icons. */ @Prop() rowActions: ModusTableRowAction[] = []; + /**(Optional) The size of the row action's column*/ + @Prop() rowActionSize: number; + /** (Optional) To display expanded rows. */ @Prop() rowsExpandable = false; @Watch('rowsExpandable') onRowsExpandableChange(newVal: boolean) { @@ -520,6 +523,7 @@ export class ModusTable { rowSelectionChange: this.rowSelectionChange, rowExpanded: this.rowExpanded, rowActionClick: this.rowActionClick, + rowActionSize: this.rowActionSize, sortChange: this.sortChange, paginationChange: this.paginationChange, columnSizingChange: this.columnSizingChange, diff --git a/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx b/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx index cb74c5282..e88b78d77 100644 --- a/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx +++ b/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx @@ -31,11 +31,12 @@ export const ModusTableHeader: FunctionalComponent = ({ rowSelection, componentId, rowActions, + rowActionSize, } = context; const tableHeadClass = { 'show-resize-cursor': getColumnResizing(), 'show-column-reorder-cursor': columnReorder }; const headerGroups: HeaderGroup[] = getHeaderGroups(); - const rowActionsLength = Math.min(Math.max(rowActions.length * 40, 90), 160); + const rowActionsLength = rowActionSize ? rowActionSize : Math.min(Math.max(rowActions.length * 40, 90), 160); return ( diff --git a/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx b/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx index 67c1e6910..95a2cce8c 100644 --- a/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx +++ b/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx @@ -14,12 +14,20 @@ export const ModusTableHeaderCheckbox: FunctionalComponent([ + ['compact', '38px'], + ['comfortable', '46px'], + ['relaxed', '46px'], + ]); + let checkboxSize: 'medium' | 'small' = 'medium'; if (density === 'compact') { checkboxSize = 'small'; } + + const width = densityWidths.get(density) || '46px'; return ( - + {rowSelectionOptions?.multiple && ( Date: Thu, 19 Sep 2024 13:01:20 +0530 Subject: [PATCH 2/4] Update table width --- .../components/modus-checkbox/modus-checkbox.scss | 1 + .../modus-table/models/table-context.models.ts | 2 ++ .../src/components/modus-table/modus-table.tsx | 4 ++++ .../modus-table/parts/modus-table-header.tsx | 3 ++- .../row/selection/modus-table-header-checkbox.tsx | 10 +++++++++- .../src/components/modus-table/readme.md | 1 + .../modus-table/modus-table-storybook-docs.mdx | 1 + .../modus-table/modus-table.stories.tsx | 15 +++++++++++++++ 8 files changed, 35 insertions(+), 2 deletions(-) diff --git a/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss b/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss index 83f55f187..62648ef07 100644 --- a/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss +++ b/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss @@ -3,6 +3,7 @@ :host { align-items: center; display: flex; + justify-content: center; } .modus-checkbox { 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 6031a5534..c27b8eef7 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 @@ -55,6 +55,8 @@ export interface TableContext { rowActions: TableRowActionWithOverflow[]; + rowActionSize: number; + rowsExpandable: boolean; rowSelection: boolean; diff --git a/stencil-workspace/src/components/modus-table/modus-table.tsx b/stencil-workspace/src/components/modus-table/modus-table.tsx index 45488b37d..a4d7691d2 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.tsx +++ b/stencil-workspace/src/components/modus-table/modus-table.tsx @@ -172,6 +172,9 @@ export class ModusTable { /** (Optional) Actions that can be performed on each row. A maximum of 4 icons will be shown, including overflow menu and expand icons. */ @Prop() rowActions: ModusTableRowAction[] = []; + /**(Optional) The size of the row action's column*/ + @Prop() rowActionSize: number; + /** (Optional) To display expanded rows. */ @Prop() rowsExpandable = false; @Watch('rowsExpandable') onRowsExpandableChange(newVal: boolean) { @@ -520,6 +523,7 @@ export class ModusTable { rowSelectionChange: this.rowSelectionChange, rowExpanded: this.rowExpanded, rowActionClick: this.rowActionClick, + rowActionSize: this.rowActionSize, sortChange: this.sortChange, paginationChange: this.paginationChange, columnSizingChange: this.columnSizingChange, diff --git a/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx b/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx index cb74c5282..e88b78d77 100644 --- a/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx +++ b/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx @@ -31,11 +31,12 @@ export const ModusTableHeader: FunctionalComponent = ({ rowSelection, componentId, rowActions, + rowActionSize, } = context; const tableHeadClass = { 'show-resize-cursor': getColumnResizing(), 'show-column-reorder-cursor': columnReorder }; const headerGroups: HeaderGroup[] = getHeaderGroups(); - const rowActionsLength = Math.min(Math.max(rowActions.length * 40, 90), 160); + const rowActionsLength = rowActionSize ? rowActionSize : Math.min(Math.max(rowActions.length * 40, 90), 160); return ( diff --git a/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx b/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx index 67c1e6910..95a2cce8c 100644 --- a/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx +++ b/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx @@ -14,12 +14,20 @@ export const ModusTableHeaderCheckbox: FunctionalComponent([ + ['compact', '38px'], + ['comfortable', '46px'], + ['relaxed', '46px'], + ]); + let checkboxSize: 'medium' | 'small' = 'medium'; if (density === 'compact') { checkboxSize = 'small'; } + + const width = densityWidths.get(density) || '46px'; return ( - + {rowSelectionOptions?.multiple && ( Date: Wed, 25 Sep 2024 14:50:02 +0530 Subject: [PATCH 3/4] Added th title and modified cance icon in row actions --- .../src/components/modus-table/parts/modus-table-header.tsx | 2 +- .../stories/components/modus-table/modus-table.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx b/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx index e88b78d77..5c4dfc92e 100644 --- a/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx +++ b/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx @@ -57,7 +57,7 @@ export const ModusTableHeader: FunctionalComponent = ({ /> ); })} - {rowActions.length > 0 && } + {rowActions.length > 0 && Row Actions Column} ))} 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 725bfea32..c39509677 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 @@ -1014,7 +1014,7 @@ RowActions.args = { { id: '3', - icon: 'cancel', + icon: 'cancel_circle', label: 'Cancel', index: 2, }, From d680e2e1391dd64d8965773bd742d0ed8ad20daf Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Fri, 4 Oct 2024 09:59:56 +0530 Subject: [PATCH 4/4] Update with rowactionsconfig --- .../modus-table/models/modus-table.models.ts | 5 ++++ .../models/table-context.models.ts | 2 ++ .../components/modus-table/modus-table.tsx | 8 +++--- .../modus-table/parts/modus-table-header.tsx | 15 +++++++++-- .../src/components/modus-table/readme.md | 2 +- .../modus-table-storybook-docs.mdx | 7 ++++- .../modus-table/modus-table.stories.tsx | 26 ++++++++++--------- 7 files changed, 46 insertions(+), 19 deletions(-) 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 3c7509952..a5caaf004 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 @@ -71,6 +71,11 @@ export interface ModusTableRowAction { isDisabled?: (row: unknown) => boolean; } +export interface ModusTableRowActionConfig { + header?: string; + width?: number; +} + export interface ModusTableRowActionClick { actionId: string; row: unknown; 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 c27b8eef7..120c29a7f 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 @@ -57,6 +57,8 @@ export interface TableContext { rowActionSize: number; + rowActionHeader: string; + rowsExpandable: boolean; rowSelection: boolean; diff --git a/stencil-workspace/src/components/modus-table/modus-table.tsx b/stencil-workspace/src/components/modus-table/modus-table.tsx index a4d7691d2..c8c8ea0ba 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.tsx +++ b/stencil-workspace/src/components/modus-table/modus-table.tsx @@ -53,6 +53,7 @@ import { ModusTableRowWithId, ModusTableColumnSort, ModusTableErrors, + ModusTableRowActionConfig, } from './models/modus-table.models'; import ColumnDragState from './models/column-drag-state.model'; import { @@ -172,8 +173,8 @@ export class ModusTable { /** (Optional) Actions that can be performed on each row. A maximum of 4 icons will be shown, including overflow menu and expand icons. */ @Prop() rowActions: ModusTableRowAction[] = []; - /**(Optional) The size of the row action's column*/ - @Prop() rowActionSize: number; + /** (Optional) The width and header of the rowActionsConfig. */ + @Prop() rowActionsConfig: ModusTableRowActionConfig; /** (Optional) To display expanded rows. */ @Prop() rowsExpandable = false; @@ -523,7 +524,8 @@ export class ModusTable { rowSelectionChange: this.rowSelectionChange, rowExpanded: this.rowExpanded, rowActionClick: this.rowActionClick, - rowActionSize: this.rowActionSize, + rowActionSize: this.rowActionsConfig?.width, + rowActionHeader: this.rowActionsConfig?.header, sortChange: this.sortChange, paginationChange: this.paginationChange, columnSizingChange: this.columnSizingChange, diff --git a/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx b/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx index 5c4dfc92e..c2cded77e 100644 --- a/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx +++ b/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx @@ -32,11 +32,18 @@ export const ModusTableHeader: FunctionalComponent = ({ componentId, rowActions, rowActionSize, + rowActionHeader, } = context; const tableHeadClass = { 'show-resize-cursor': getColumnResizing(), 'show-column-reorder-cursor': columnReorder }; const headerGroups: HeaderGroup[] = getHeaderGroups(); - const rowActionsLength = rowActionSize ? rowActionSize : Math.min(Math.max(rowActions.length * 40, 90), 160); + const rowActionsLength = + rowActionSize && rowActionSize >= 40 ? rowActionSize : Math.min(Math.max(rowActions.length * 40, 90), 160); + const rowActionsHeader = rowActionHeader ? rowActionHeader : 'Row Actions Column'; + const rowActionsConfig: { + header?: string; + width?: number; + } = { header: rowActionsHeader, width: rowActionsLength }; return ( @@ -57,7 +64,11 @@ export const ModusTableHeader: FunctionalComponent = ({ /> ); })} - {rowActions.length > 0 && Row Actions Column} + {rowActions.length > 0 && ( + + {rowActionsConfig.header} + + )} ))} diff --git a/stencil-workspace/src/components/modus-table/readme.md b/stencil-workspace/src/components/modus-table/readme.md index 2a39da43a..7951705ef 100644 --- a/stencil-workspace/src/components/modus-table/readme.md +++ b/stencil-workspace/src/components/modus-table/readme.md @@ -25,8 +25,8 @@ | `maxWidth` | `max-width` | (Optional) To display a horizontal scrollbar when the width is exceeded. | `string` | `undefined` | | `pageSizeList` | -- | | `number[]` | `PAGINATION_DEFAULT_SIZES` | | `pagination` | `pagination` | | `boolean` | `undefined` | -| `rowActionSize` | `row-action-size` | (Optional) The size of the row action's column | `number` | `undefined` | | `rowActions` | -- | (Optional) Actions that can be performed on each row. A maximum of 4 icons will be shown, including overflow menu and expand icons. | `ModusTableRowAction[]` | `[]` | +| `rowActionsConfig` | -- | (Optional) The width and header of the rowActionsConfig. | `ModusTableRowActionConfig` | `undefined` | | `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` | 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 487c46291..c8c72bb5e 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 @@ -884,6 +884,11 @@ interface ModusTableRowAction { isDisabled?: (row: unknown) => boolean; } +interface ModusTableRowActionConfig { + header?: string; + width?: number; +} + interface ModusTableManualPaginationOptions { currentPageIndex: number; currentPageSize: number; @@ -937,7 +942,7 @@ Users can use keyboard navigation to perform different actions. | `pageSizeList` | -- | | `number[]` | `PAGINATION_DEFAULT_SIZES` | | `pagination` | `pagination` | | `boolean` | `undefined` | | `rowActions` | -- | (Optional) Actions that can be performed on each row. A maximum of 4 icons will be shown, including overflow menu and expand icons. | `ModusTableRowAction[]` | `[]` | -| `rowActionSize` | `row-action-size` | (Optional) The size of the row action's column | `number` | `undefined ` | +| `rowActionsConfig` | -- | (Optional) The configuration for the row action's column | `ModusTableRowActionConfig` | `undefined` | | `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` | 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 c39509677..483655f2e 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 @@ -59,7 +59,7 @@ function initializeTable(props) { displayOptions, rowSelectionOptions, rowActions, - rowActionSize, + rowActionsConfig, manualPaginationOptions, manualSortingOptions, defaultSort, @@ -78,7 +78,7 @@ function initializeTable(props) { modusTable.displayOptions = ${JSON.stringify(displayOptions)}; modusTable.rowSelectionOptions = ${JSON.stringify(rowSelectionOptions)}; modusTable.rowActions = ${JSON.stringify(rowActions)}; - modusTable.rowActionSize= ${JSON.stringify(rowActionSize)}; + modusTable.rowActionsConfig= ${JSON.stringify(rowActionsConfig)}; modusTable.manualPaginationOptions = ${JSON.stringify(manualPaginationOptions)}; modusTable.manualSortingOptions = ${JSON.stringify(manualSortingOptions)}; modusTable.defaultSort = ${JSON.stringify(defaultSort)}; @@ -331,7 +331,7 @@ const DefaultArgs = { maxHeight: '', maxWidth: '', rowActions: [], - rowActionSize: 0, + rowActionsConfig: {}, rowSelection: false, rowSelectionOptions: {}, wrapText: false, @@ -509,14 +509,13 @@ export default { }, type: { required: false }, }, - rowActionSize: { - name: 'rowActionSize', - description: "The size of the row action's column", - control: 'number', + rowActionsConfig: { + name: 'rowActionsConfig', + description: "The configuration for the row action's column ", table: { - defaultValue: { summary: false }, - type: { summary: 'number' }, + type: { summary: 'ModusTableRowActionConfig' }, }, + type: { required: false }, }, maxHeight: { name: 'maxHeight', @@ -656,7 +655,7 @@ const Template = ({ maxHeight, maxWidth, rowActions, - rowActionSize, + rowActionsConfig, rowSelection, rowSelectionOptions, manualPaginationOptions, @@ -694,7 +693,7 @@ const Template = ({ displayOptions, rowSelectionOptions, rowActions, - rowActionSize, + rowActionsConfig, manualPaginationOptions, manualSortingOptions, defaultSort, @@ -996,7 +995,10 @@ LargeDataset.args = { export const RowActions = Template.bind({}); RowActions.args = { ...DefaultArgs, - rowActionSize: 160, + rowActionsConfig: { + header: 'Row Actions Column', + width: 160, + }, rowActions: [ { id: '1',