Update table width

Author: ElishaSamPeterPrabhu

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

@@ -3,6 +3,7 @@
 :host {
   align-items: center;
   display: flex;
+  justify-content: center;
 }
 
 .modus-checkbox {

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;

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,

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

@@ -31,11 +31,12 @@ export const ModusTableHeader: FunctionalComponent<ModusTableHeaderProps> = ({
     rowSelection,
     componentId,
     rowActions,
+    rowActionSize,
   } = context;
 
   const tableHeadClass = { 'show-resize-cursor': getColumnResizing(), 'show-column-reorder-cursor': columnReorder };
   const headerGroups: HeaderGroup<unknown>[] = 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 (
     <thead class={tableHeadClass}>

stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx

@@ -14,12 +14,20 @@ export const ModusTableHeaderCheckbox: FunctionalComponent<ModusTableHeaderCheck
     rowSelectionOptions,
     density,
   } = context;
+  const densityWidths = new Map<string, string>([
+    ['compact', '38px'],
+    ['comfortable', '46px'],
+    ['relaxed', '46px'],
+  ]);
+
   let checkboxSize: 'medium' | 'small' = 'medium';
   if (density === 'compact') {
     checkboxSize = 'small';
   }
+
+  const width = densityWidths.get(density) || '46px';
   return (
-    <th class={'row-checkbox sticky-left ' + checkboxSize}>
+    <th class={'row-checkbox sticky-left ' + checkboxSize} style={{ width: width }}>
       {rowSelectionOptions?.multiple && (
         <modus-checkbox
           ariaLabel="Select all rows"

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

@@ -25,6 +25,7 @@
 | `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[]`                   | `[]`                                                                                         |
 | `rowSelection`            | `row-selection`           | (Optional) To display checkbox.                                                                                                                                                       | `boolean`                                 | `false`                                                                                      |
 | `rowSelectionOptions`     | --                        | (Optional) To control multiple row selection.                                                                                                                                         | `ModusTableRowSelectionOptions`           | `{     multiple: false,     subRowSelection: false,   }`                                     |

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

@@ -937,6 +937,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  `                                                                               |
 | `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`                                                                                     |

stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx

@@ -59,6 +59,7 @@ function initializeTable(props) {
     displayOptions,
     rowSelectionOptions,
     rowActions,
+    rowActionSize,
     manualPaginationOptions,
     manualSortingOptions,
     defaultSort,
@@ -77,6 +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.manualPaginationOptions = ${JSON.stringify(manualPaginationOptions)};
   modusTable.manualSortingOptions = ${JSON.stringify(manualSortingOptions)};
   modusTable.defaultSort = ${JSON.stringify(defaultSort)};
@@ -329,6 +331,7 @@ const DefaultArgs = {
   maxHeight: '',
   maxWidth: '',
   rowActions: [],
+  rowActionSize: 0,
   rowSelection: false,
   rowSelectionOptions: {},
   wrapText: false,
@@ -506,6 +509,15 @@ export default {
       },
       type: { required: false },
     },
+    rowActionSize: {
+      name: 'rowActionSize',
+      description: "The size of the row action's column",
+      control: 'number',
+      table: {
+        defaultValue: { summary: false },
+        type: { summary: 'number' },
+      },
+    },
     maxHeight: {
       name: 'maxHeight',
       description: 'To display a vertical scrollbar when the height is exceeded.',
@@ -644,6 +656,7 @@ const Template = ({
   maxHeight,
   maxWidth,
   rowActions,
+  rowActionSize,
   rowSelection,
   rowSelectionOptions,
   manualPaginationOptions,
@@ -681,6 +694,7 @@ const Template = ({
     displayOptions,
     rowSelectionOptions,
     rowActions,
+    rowActionSize,
     manualPaginationOptions,
     manualSortingOptions,
     defaultSort,
@@ -982,6 +996,7 @@ LargeDataset.args = {
 export const RowActions = Template.bind({});
 RowActions.args = {
   ...DefaultArgs,
+  rowActionSize: 160,
   rowActions: [
     {
       id: '1',