Skip to content

Commit 22c3f2b

Browse files
ElishaSamPeterPrabhuElishaSamPeterPrabhu
committed
Update table width
1 parent 834b852 commit 22c3f2b

File tree

8 files changed

+35
-2
lines changed

8 files changed

+35
-2
lines changed

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

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
:host {
44
align-items: center;
55
display: flex;
6+
justify-content: center;
67
}
78

89
.modus-checkbox {

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

+2
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ export interface TableContext {
5555

5656
rowActions: TableRowActionWithOverflow[];
5757

58+
rowActionSize: number;
59+
5860
rowsExpandable: boolean;
5961

6062
rowSelection: boolean;

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

+4
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,9 @@ export class ModusTable {
172172
/** (Optional) Actions that can be performed on each row. A maximum of 4 icons will be shown, including overflow menu and expand icons. */
173173
@Prop() rowActions: ModusTableRowAction[] = [];
174174

175+
/**(Optional) The size of the row action's column*/
176+
@Prop() rowActionSize: number;
177+
175178
/** (Optional) To display expanded rows. */
176179
@Prop() rowsExpandable = false;
177180
@Watch('rowsExpandable') onRowsExpandableChange(newVal: boolean) {
@@ -520,6 +523,7 @@ export class ModusTable {
520523
rowSelectionChange: this.rowSelectionChange,
521524
rowExpanded: this.rowExpanded,
522525
rowActionClick: this.rowActionClick,
526+
rowActionSize: this.rowActionSize,
523527
sortChange: this.sortChange,
524528
paginationChange: this.paginationChange,
525529
columnSizingChange: this.columnSizingChange,

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,12 @@ export const ModusTableHeader: FunctionalComponent<ModusTableHeaderProps> = ({
3131
rowSelection,
3232
componentId,
3333
rowActions,
34+
rowActionSize,
3435
} = context;
3536

3637
const tableHeadClass = { 'show-resize-cursor': getColumnResizing(), 'show-column-reorder-cursor': columnReorder };
3738
const headerGroups: HeaderGroup<unknown>[] = getHeaderGroups();
38-
const rowActionsLength = Math.min(Math.max(rowActions.length * 40, 90), 160);
39+
const rowActionsLength = rowActionSize ? rowActionSize : Math.min(Math.max(rowActions.length * 40, 90), 160);
3940

4041
return (
4142
<thead class={tableHeadClass}>

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

+9-1
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,20 @@ export const ModusTableHeaderCheckbox: FunctionalComponent<ModusTableHeaderCheck
1414
rowSelectionOptions,
1515
density,
1616
} = context;
17+
const densityWidths = new Map<string, string>([
18+
['compact', '38px'],
19+
['comfortable', '46px'],
20+
['relaxed', '46px'],
21+
]);
22+
1723
let checkboxSize: 'medium' | 'small' = 'medium';
1824
if (density === 'compact') {
1925
checkboxSize = 'small';
2026
}
27+
28+
const width = densityWidths.get(density) || '46px';
2129
return (
22-
<th class={'row-checkbox sticky-left ' + checkboxSize}>
30+
<th class={'row-checkbox sticky-left ' + checkboxSize} style={{ width: width }}>
2331
{rowSelectionOptions?.multiple && (
2432
<modus-checkbox
2533
ariaLabel="Select all rows"

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

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
| `maxWidth` | `max-width` | (Optional) To display a horizontal scrollbar when the width is exceeded. | `string` | `undefined` |
2626
| `pageSizeList` | -- | | `number[]` | `PAGINATION_DEFAULT_SIZES` |
2727
| `pagination` | `pagination` | | `boolean` | `undefined` |
28+
| `rowActionSize` | `row-action-size` | (Optional) The size of the row action's column | `number` | `undefined` |
2829
| `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[]` | `[]` |
2930
| `rowSelection` | `row-selection` | (Optional) To display checkbox. | `boolean` | `false` |
3031
| `rowSelectionOptions` | -- | (Optional) To control multiple row selection. | `ModusTableRowSelectionOptions` | `{ multiple: false, subRowSelection: false, }` |

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

+1
Original file line numberDiff line numberDiff line change
@@ -937,6 +937,7 @@ Users can use keyboard navigation to perform different actions.
937937
| `pageSizeList` | -- | | `number[]` | `PAGINATION_DEFAULT_SIZES` |
938938
| `pagination` | `pagination` | | `boolean` | `undefined` |
939939
| `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[]` | `[]` |
940+
| `rowActionSize` | `row-action-size` | (Optional) The size of the row action's column | `number` | `undefined ` |
940941
| `rowSelection` | `row-selection` | (Optional) To display checkbox. | `boolean` | `false` |
941942
| `rowSelectionOptions` | -- | (Optional) To control multiple row selection. | `ModusTableRowSelectionOptions` | `{ multiple: false, subRowSelection: false, }` |
942943
| `rowsExpandable` | `rows-expandable` | (Optional) To display expanded rows. | `boolean` | `false` |

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

+15
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ function initializeTable(props) {
5959
displayOptions,
6060
rowSelectionOptions,
6161
rowActions,
62+
rowActionSize,
6263
manualPaginationOptions,
6364
manualSortingOptions,
6465
defaultSort,
@@ -77,6 +78,7 @@ function initializeTable(props) {
7778
modusTable.displayOptions = ${JSON.stringify(displayOptions)};
7879
modusTable.rowSelectionOptions = ${JSON.stringify(rowSelectionOptions)};
7980
modusTable.rowActions = ${JSON.stringify(rowActions)};
81+
modusTable.rowActionSize= ${JSON.stringify(rowActionSize)};
8082
modusTable.manualPaginationOptions = ${JSON.stringify(manualPaginationOptions)};
8183
modusTable.manualSortingOptions = ${JSON.stringify(manualSortingOptions)};
8284
modusTable.defaultSort = ${JSON.stringify(defaultSort)};
@@ -329,6 +331,7 @@ const DefaultArgs = {
329331
maxHeight: '',
330332
maxWidth: '',
331333
rowActions: [],
334+
rowActionSize: 0,
332335
rowSelection: false,
333336
rowSelectionOptions: {},
334337
wrapText: false,
@@ -506,6 +509,15 @@ export default {
506509
},
507510
type: { required: false },
508511
},
512+
rowActionSize: {
513+
name: 'rowActionSize',
514+
description: "The size of the row action's column",
515+
control: 'number',
516+
table: {
517+
defaultValue: { summary: false },
518+
type: { summary: 'number' },
519+
},
520+
},
509521
maxHeight: {
510522
name: 'maxHeight',
511523
description: 'To display a vertical scrollbar when the height is exceeded.',
@@ -644,6 +656,7 @@ const Template = ({
644656
maxHeight,
645657
maxWidth,
646658
rowActions,
659+
rowActionSize,
647660
rowSelection,
648661
rowSelectionOptions,
649662
manualPaginationOptions,
@@ -681,6 +694,7 @@ const Template = ({
681694
displayOptions,
682695
rowSelectionOptions,
683696
rowActions,
697+
rowActionSize,
684698
manualPaginationOptions,
685699
manualSortingOptions,
686700
defaultSort,
@@ -982,6 +996,7 @@ LargeDataset.args = {
982996
export const RowActions = Template.bind({});
983997
RowActions.args = {
984998
...DefaultArgs,
999+
rowActionSize: 160,
9851000
rowActions: [
9861001
{
9871002
id: '1',

0 commit comments

Comments
 (0)