@scania/tegel 0.0.4 → 0.0.5

package/dist/collection/components/data-table/table-component-custom-width.stories.js

@@ -24,16 +24,15 @@ export default {
     },
   },
   argTypes: {
-    verticalDivider: {
-      name: 'Vertical dividers',
-      description: 'When enabled, table has vertical dividers between columns.',
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
-        type: 'boolean',
+        type: 'radio',
       },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: 'Inherit from parent' },
       },
     },
     compactDesign: {
@@ -43,87 +42,65 @@ export default {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'The mode variant of the component',
+    responsiveDesign: {
+      name: 'Responsive table',
+      description: 'Enables table to take 100% of available width. For column values less than 192px, "No minimum width" has to be enabled too.',
       control: {
-        type: 'radio',
+        type: 'boolean',
       },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        defaultValue: { summary: false },
       },
     },
-    responsiveDesign: {
-      name: 'Responsive table',
-      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between table columns.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
     noMinWidth: {
       name: 'No minimum width',
-      description: 'Resets min-width rule and enabled setting column width value less then 192px which is default one. When enabled, controls for columns width will show here.',
+      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',
       control: {
         type: 'boolean',
       },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
     },
     column1Width: {
       name: 'Column 1 width',
-      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
+      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
       },
       if: { arg: 'noMinWidth', eq: true },
     },
     column2Width: {
       name: 'Column 2 width',
-      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
+      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
       },
       if: { arg: 'noMinWidth', eq: true },
     },
     column3Width: {
       name: 'Column 3 width',
-      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
+      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
       },
       if: { arg: 'noMinWidth', eq: true },
     },
     column4Width: {
       name: 'Column 4 width',
-      description: 'Value of width for column 4. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
+      description: 'Value of width for column 4. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
       },
       if: { arg: 'noMinWidth', eq: true },
     },
@@ -131,8 +108,8 @@ export default {
   args: {
     modeVariant: 'Inherit from parent',
     compactDesign: false,
-    verticalDivider: true,
     responsiveDesign: false,
+    verticalDivider: true,
     noMinWidth: true,
     column1Width: '321px',
     column2Width: '400px',
@@ -140,7 +117,7 @@ export default {
     column4Width: '110px',
   },
 };
-const BasicTemplate = ({ modeVariant, compactDesign, verticalDivider, responsiveDesign, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
   <sdds-table
       vertical-dividers="${verticalDivider}"
       compact-design="${compactDesign}"
@@ -194,5 +171,4 @@ const BasicTemplate = ({ modeVariant, compactDesign, verticalDivider, responsive
       </sdds-table-body>
   </sdds-table>`);
 export const CustomWidth = BasicTemplate.bind({});
-CustomWidth.args = {};
 //# sourceMappingURL=table-component-custom-width.stories.js.map

package/dist/collection/components/data-table/table-component-custom-width.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-component-custom-width.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-custom-width.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n  title: 'Components/Data Table/Web Component',\n  parameters: {\n    notes: {\n      'sdds-table': sddsTable,\n      'sdds-table-toolbar': sddsTableToolbar,\n      'sdds-header': sddsHeader,\n      'sdds-header-cell': sddsHeaderCell,\n      'sdds-table-body': sddsTableBody,\n      'sdds-body-row': sddsBodyRow,\n      'sdds-body-row-expandable': sddsBodyRowExpandable,\n      'sdds-body-cell': sddsBodyCell,\n      'sdds-table-footer': sddsTableFooter,\n    },\n  },\n  argTypes: {\n    verticalDivider: {\n      name: 'Vertical dividers',\n      description: 'When enabled, table has vertical dividers between columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    compactDesign: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'The mode variant of the component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    responsiveDesign: {\n      name: 'Responsive table',\n      description:\n        'Table takes 100% of available width. For column values less then 192px, \"No minimum width\" has to be enabled too. ',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    noMinWidth: {\n      name: 'No minimum width',\n      description:\n        'Resets min-width rule and enabled setting column width value less then 192px which is default one. When enabled, controls for columns width will show here.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    column1Width: {\n      name: 'Column 1 width',\n      description:\n        'Value of width for column 1. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column2Width: {\n      name: 'Column 2 width',\n      description:\n        'Value of width for column 2. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column3Width: {\n      name: 'Column 3 width',\n      description:\n        'Value of width for column 3. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column4Width: {\n      name: 'Column 4 width',\n      description:\n        'Value of width for column 4. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    verticalDivider: true,\n    responsiveDesign: false,\n    noMinWidth: true,\n    column1Width: '321px',\n    column2Width: '400px',\n    column3Width: '150px',\n    column4Width: '110px',\n  },\n};\n\nconst BasicTemplate = ({\n  modeVariant,\n  compactDesign,\n  verticalDivider,\n  responsiveDesign,\n  noMinWidth,\n  column1Width,\n  column2Width,\n  column3Width,\n  column4Width,\n}) =>\n  formatHtmlPreview(`\n  <sdds-table\n      vertical-dividers=\"${verticalDivider}\"\n      compact-design=\"${compactDesign}\"\n      enable-responsive=\"${responsiveDesign}\"\n      ${noMinWidth ? 'no-min-width' : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n  >\n      <sdds-table-header>\n          <sdds-header-cell column-key='truck' column-title='Truck type' ${\n            column1Width ? `custom-width=\"${column1Width}\"` : ''\n          } ></sdds-header-cell>\n          <sdds-header-cell column-key='driver' column-title='Driver name' ${\n            column2Width ? `custom-width=\"${column2Width}\"` : ''\n          }></sdds-header-cell>\n          <sdds-header-cell column-key='country' column-title='Country' ${\n            column3Width ? `custom-width=\"${column3Width}\"` : ''\n          }></sdds-header-cell>\n          <sdds-header-cell column-key='mileage' column-title='Mileage' ${\n            column4Width ? `custom-width=\"${column4Width}\"` : ''\n          } text-align='right'></sdds-header-cell>\n      </sdds-table-header>\n      <sdds-table-body>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 1\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 2\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 3\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 4\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 5\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 6\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 7\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 8\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 1\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 2\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 3\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 4\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 5\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 6\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 7\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 8\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 1\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 2\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 3\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 4\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 5\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 6\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 7\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 8\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n      </sdds-table-body>\n  </sdds-table>`);\n\nexport const CustomWidth = BasicTemplate.bind({});\nCustomWidth.args = {};\n"]}
+{"version":3,"file":"table-component-custom-width.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-custom-width.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n  title: 'Components/Data Table/Web Component',\n  parameters: {\n    notes: {\n      'sdds-table': sddsTable,\n      'sdds-table-toolbar': sddsTableToolbar,\n      'sdds-header': sddsHeader,\n      'sdds-header-cell': sddsHeaderCell,\n      'sdds-table-body': sddsTableBody,\n      'sdds-body-row': sddsBodyRow,\n      'sdds-body-row-expandable': sddsBodyRowExpandable,\n      'sdds-body-cell': sddsBodyCell,\n      'sdds-table-footer': sddsTableFooter,\n    },\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    compactDesign: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    responsiveDesign: {\n      name: 'Responsive table',\n      description: 'Enables table to take 100% of available width. For column values less than 192px, \"No minimum width\" has to be enabled too.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    verticalDivider: {\n      name: 'Vertical dividers',\n      description: 'Enables vertical dividers between table columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    noMinWidth: {\n      name: 'No minimum width',\n      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    column1Width: {\n      name: 'Column 1 width',\n      description: 'Value of width for column 1. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column2Width: {\n      name: 'Column 2 width',\n      description: 'Value of width for column 2. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column3Width: {\n      name: 'Column 3 width',\n      description: 'Value of width for column 3. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column4Width: {\n      name: 'Column 4 width',\n      description: 'Value of width for column 4. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    responsiveDesign: false,\n    verticalDivider: true,\n    noMinWidth: true,\n    column1Width: '321px',\n    column2Width: '400px',\n    column3Width: '150px',\n    column4Width: '110px',\n  },\n};\n\nconst BasicTemplate = ({\n  modeVariant,\n  compactDesign,\n  responsiveDesign,\n  verticalDivider,\n  noMinWidth,\n  column1Width,\n  column2Width,\n  column3Width,\n  column4Width,\n}) =>\n  formatHtmlPreview(`\n  <sdds-table\n      vertical-dividers=\"${verticalDivider}\"\n      compact-design=\"${compactDesign}\"\n      enable-responsive=\"${responsiveDesign}\"\n      ${noMinWidth ? 'no-min-width' : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n  >\n      <sdds-table-header>\n          <sdds-header-cell column-key='truck' column-title='Truck type' ${\n            column1Width ? `custom-width=\"${column1Width}\"` : ''\n          } ></sdds-header-cell>\n          <sdds-header-cell column-key='driver' column-title='Driver name' ${\n            column2Width ? `custom-width=\"${column2Width}\"` : ''\n          }></sdds-header-cell>\n          <sdds-header-cell column-key='country' column-title='Country' ${\n            column3Width ? `custom-width=\"${column3Width}\"` : ''\n          }></sdds-header-cell>\n          <sdds-header-cell column-key='mileage' column-title='Mileage' ${\n            column4Width ? `custom-width=\"${column4Width}\"` : ''\n          } text-align='right'></sdds-header-cell>\n      </sdds-table-header>\n      <sdds-table-body>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 1\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 2\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 3\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 4\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 5\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 6\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 7\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 8\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 1\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 2\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 3\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 4\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 5\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 6\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 7\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 8\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 1\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 2\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 3\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 4\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n          <sdds-table-body-row>\n              <sdds-body-cell cell-value=\"Test value 5\" cell-key=\"truck\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 6\" cell-key=\"driver\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 7\" cell-key=\"country\"></sdds-body-cell>\n              <sdds-body-cell cell-value=\"Test value 8\" cell-key=\"mileage\"></sdds-body-cell>\n          </sdds-table-body-row>\n      </sdds-table-body>\n  </sdds-table>`);\n\nexport const CustomWidth = BasicTemplate.bind({});"]}

package/dist/collection/components/data-table/table-component-event-listeners.stories.js

@@ -24,16 +24,15 @@ export default {
     },
   },
   argTypes: {
-    verticalDivider: {
-      name: 'Vertical dividers',
-      description: 'When enabled, table has vertical dividers between columns.',
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
-        type: 'boolean',
+        type: 'radio',
       },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: 'Inherit from parent' },
       },
     },
     compactDesign: {
@@ -43,70 +42,96 @@ export default {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'The mode variant of the component',
+    responsiveDesign: {
+      name: 'Responsive table',
+      description: 'Enables table to take 100% of available width. For column values less than 192px, "No minimum width" has to be enabled too.',
       control: {
-        type: 'radio',
+        type: 'boolean',
       },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        defaultValue: { summary: false },
       },
     },
-    responsiveDesign: {
-      name: 'Responsive table',
-      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between table columns.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
     noMinWidth: {
-      name: 'No column minimum width limitation',
-      description: 'Enable columns to shrink below width 192px.',
+      name: 'No minimum width',
+      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',
       control: {
         type: 'boolean',
       },
-      table: {
-        defaultValue: {
-          summary: 'false',
-        },
+    },
+    column1Width: {
+      name: 'Column 1 width',
+      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column2Width: {
+      name: 'Column 2 width',
+      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
       },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column3Width: {
+      name: 'Column 3 width',
+      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column4Width: {
+      name: 'Column 4 width',
+      description: 'Value of width for column 4. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
     },
   },
   args: {
     modeVariant: 'Inherit from parent',
     compactDesign: false,
-    verticalDivider: false,
     responsiveDesign: false,
+    verticalDivider: false,
     noMinWidth: false,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+    column4Width: '',
   },
 };
-const EventListenersTemplate = ({ verticalDivider, compactDesign, modeVariant, responsiveDesign, noMinWidth, }) => formatHtmlPreview(`
+const EventListenersTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
     <script>
       // Note: Script here is only for demo purposes
-      window.addEventListener('tableFilteringTerm', e => {
-        document.getElementById('event-name-textarea').value = 'tableFilteringTerm';
+      window.addEventListener('sddsFilter', e => {
+        document.getElementById('event-name-textarea').value = 'sddsFilter';
         document.getElementById('event-value-textarea').value = e.detail;
       });
 
-      window.addEventListener('sortColumnDataEvent', e => {
-        document.getElementById('event-name-textarea').value = 'sortColumnDataEvent';
+      window.addEventListener('sddsSortChange', e => {
+        document.getElementById('event-name-textarea').value = 'sddsSortChange';
         document.getElementById('event-value-textarea').value = e.detail;
       });
 
-      window.addEventListener('currentPageValueEvent', e => {
-        document.getElementById('event-name-textarea').value = 'currentPageValueEvent';
+      window.addEventListener('sddsPageChange', e => {
+        document.getElementById('event-name-textarea').value = 'sddsPageChange';
         document.getElementById('event-value-textarea').value = e.detail;
       });
     </script>
@@ -120,10 +145,10 @@ const EventListenersTemplate = ({ verticalDivider, compactDesign, modeVariant, r
    >
           <sdds-table-toolbar table-title="Disabled filtering, pagination and sorting - left to the user to listen to events" enable-filtering></sdds-table-toolbar>
           <sdds-table-header>
-              <sdds-header-cell column-key='truck' column-title='Truck type' sortable></sdds-header-cell>
-              <sdds-header-cell column-key='driver' column-title='Driver name' sortable></sdds-header-cell>
-              <sdds-header-cell column-key='country' column-title='Country' sortable></sdds-header-cell>
-              <sdds-header-cell column-key='mileage' column-title='Mileage' sortable text-align='right'></sdds-header-cell>
+              <sdds-header-cell column-key='truck' column-title='Truck type' sortable ${column1Width ? `custom-width="${column1Width}"` : ''}></sdds-header-cell>
+              <sdds-header-cell column-key='driver' column-title='Driver name' sortable ${column2Width ? `custom-width="${column2Width}"` : ''}></sdds-header-cell>
+              <sdds-header-cell column-key='country' column-title='Country' sortable ${column3Width ? `custom-width="${column3Width}"` : ''}></sdds-header-cell>
+              <sdds-header-cell column-key='mileage' column-title='Mileage' sortable text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></sdds-header-cell>
           </sdds-table-header>
           <sdds-table-body disable-pagination-function disable-filtering-function disable-sorting-function enable-dummy-data>
               <sdds-table-body-row>
@@ -148,5 +173,4 @@ const EventListenersTemplate = ({ verticalDivider, compactDesign, modeVariant, r
     <textarea id="event-value-textarea" rows="1" cols="50" readonly></textarea>
   </div>`);
 export const EventListeners = EventListenersTemplate.bind({});
-EventListeners.args = {};
 //# sourceMappingURL=table-component-event-listeners.stories.js.map

package/dist/collection/components/data-table/table-component-event-listeners.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-component-event-listeners.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-event-listeners.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n  title: 'Components/Data Table/Web Component',\n  parameters: {\n    notes: {\n      'sdds-table': sddsTable,\n      'sdds-table-toolbar': sddsTableToolbar,\n      'sdds-header': sddsHeader,\n      'sdds-header-cell': sddsHeaderCell,\n      'sdds-table-body': sddsTableBody,\n      'sdds-body-row': sddsBodyRow,\n      'sdds-body-row-expandable': sddsBodyRowExpandable,\n      'sdds-body-cell': sddsBodyCell,\n      'sdds-table-footer': sddsTableFooter,\n    },\n  },\n  argTypes: {\n    verticalDivider: {\n      name: 'Vertical dividers',\n      description: 'When enabled, table has vertical dividers between columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    compactDesign: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'The mode variant of the component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    responsiveDesign: {\n      name: 'Responsive table',\n      description:\n        'Table takes 100% of available width. For column values less then 192px, \"No minimum width\" has to be enabled too. ',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    noMinWidth: {\n      name: 'No column minimum width limitation',\n      description: 'Enable columns to shrink below width 192px.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: 'false',\n        },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    verticalDivider: false,\n    responsiveDesign: false,\n    noMinWidth: false,\n  },\n};\n\nconst EventListenersTemplate = ({\n  verticalDivider,\n  compactDesign,\n  modeVariant,\n  responsiveDesign,\n  noMinWidth,\n}) =>\n  formatHtmlPreview(`\n    <script>\n      // Note: Script here is only for demo purposes\n      window.addEventListener('tableFilteringTerm', e => {\n        document.getElementById('event-name-textarea').value = 'tableFilteringTerm';\n        document.getElementById('event-value-textarea').value = e.detail;\n      });\n\n      window.addEventListener('sortColumnDataEvent', e => {\n        document.getElementById('event-name-textarea').value = 'sortColumnDataEvent';\n        document.getElementById('event-value-textarea').value = e.detail;\n      });\n\n      window.addEventListener('currentPageValueEvent', e => {\n        document.getElementById('event-name-textarea').value = 'currentPageValueEvent';\n        document.getElementById('event-value-textarea').value = e.detail;\n      });\n    </script>\n\n   <sdds-table\n      vertical-dividers=\"${verticalDivider}\"\n      compact-design=\"${compactDesign}\"\n      enable-responsive=\"${responsiveDesign}\"\n      ${noMinWidth ? 'no-min-width' : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n   >\n          <sdds-table-toolbar table-title=\"Disabled filtering, pagination and sorting - left to the user to listen to events\" enable-filtering></sdds-table-toolbar>\n          <sdds-table-header>\n              <sdds-header-cell column-key='truck' column-title='Truck type' sortable></sdds-header-cell>\n              <sdds-header-cell column-key='driver' column-title='Driver name' sortable></sdds-header-cell>\n              <sdds-header-cell column-key='country' column-title='Country' sortable></sdds-header-cell>\n              <sdds-header-cell column-key='mileage' column-title='Mileage' sortable text-align='right'></sdds-header-cell>\n          </sdds-table-header>\n          <sdds-table-body disable-pagination-function disable-filtering-function disable-sorting-function enable-dummy-data>\n              <sdds-table-body-row>\n                  <sdds-body-cell cell-value=\"Test value 5\" cell-key=\"truck\"></sdds-body-cell>\n                  <sdds-body-cell cell-value=\"Test value 6\" cell-key=\"driver\"></sdds-body-cell>\n                  <sdds-body-cell cell-value=\"Test value 7\" cell-key=\"country\"></sdds-body-cell>\n                  <sdds-body-cell cell-value=\"Test value 8\" cell-key=\"mileage\"></sdds-body-cell>\n              </sdds-table-body-row>\n          </sdds-table-body>\n        <sdds-table-footer enable-client-pagination client-max-pages=\"10\"></sdds-table-footer>\n  </sdds-table>\n\n  <!-- Note: Code below is just for demo purposes -->\n  <div class=\"sdds-u-mt1\" style=\"width: 500px; background-color: lightblue; padding: 16px;\">\n  <p class=\"sdds-u-mt0\">Note: This box works only in \"Canvas\" tab.</p>\n    <h5 class=\"sdds-u-mt0 sdds-u-mb0\">Event test box</h5>\n    <h6 class=\"sdds-u-mt1 sdds-u-mb0\">Event name:</h6>\n    <textarea id=\"event-name-textarea\" rows=\"1\" cols=\"50\" readonly></textarea>\n    <h6 class=\"sdds-u-mt0 sdds-u-mb0\">Events value (aka detail)</h6>\n    <small>Event always sent an array of items, where first one is always an ID of tabel where event is emitted from</small>\n    <br>\n    <textarea id=\"event-value-textarea\" rows=\"1\" cols=\"50\" readonly></textarea>\n  </div>`);\n\nexport const EventListeners = EventListenersTemplate.bind({});\nEventListeners.args = {};\n"]}
+{"version":3,"file":"table-component-event-listeners.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-event-listeners.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n  title: 'Components/Data Table/Web Component',\n  parameters: {\n    notes: {\n      'sdds-table': sddsTable,\n      'sdds-table-toolbar': sddsTableToolbar,\n      'sdds-header': sddsHeader,\n      'sdds-header-cell': sddsHeaderCell,\n      'sdds-table-body': sddsTableBody,\n      'sdds-body-row': sddsBodyRow,\n      'sdds-body-row-expandable': sddsBodyRowExpandable,\n      'sdds-body-cell': sddsBodyCell,\n      'sdds-table-footer': sddsTableFooter,\n    },\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    compactDesign: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    responsiveDesign: {\n      name: 'Responsive table',\n      description: 'Enables table to take 100% of available width. For column values less than 192px, \"No minimum width\" has to be enabled too.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    verticalDivider: {\n      name: 'Vertical dividers',\n      description: 'Enables vertical dividers between table columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    noMinWidth: {\n      name: 'No minimum width',\n      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    column1Width: {\n      name: 'Column 1 width',\n      description:'Value of width for column 1. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column2Width: {\n      name: 'Column 2 width',\n      description: 'Value of width for column 2. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column3Width: {\n      name: 'Column 3 width',\n      description: 'Value of width for column 3. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column4Width: {\n      name: 'Column 4 width',\n      description: 'Value of width for column 4. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    responsiveDesign: false,\n    verticalDivider: false,\n    noMinWidth: false,\n    column1Width: '',\n    column2Width: '',\n    column3Width: '',\n    column4Width: '',\n  },\n};\n\nconst EventListenersTemplate = ({\n  modeVariant,\n  compactDesign,\n  responsiveDesign,\n  verticalDivider,\n  noMinWidth,\n  column1Width,\n  column2Width,\n  column3Width,\n  column4Width,\n}) =>\n  formatHtmlPreview(`\n    <script>\n      // Note: Script here is only for demo purposes\n      window.addEventListener('sddsFilter', e => {\n        document.getElementById('event-name-textarea').value = 'sddsFilter';\n        document.getElementById('event-value-textarea').value = e.detail;\n      });\n\n      window.addEventListener('sddsSortChange', e => {\n        document.getElementById('event-name-textarea').value = 'sddsSortChange';\n        document.getElementById('event-value-textarea').value = e.detail;\n      });\n\n      window.addEventListener('sddsPageChange', e => {\n        document.getElementById('event-name-textarea').value = 'sddsPageChange';\n        document.getElementById('event-value-textarea').value = e.detail;\n      });\n    </script>\n\n   <sdds-table\n      vertical-dividers=\"${verticalDivider}\"\n      compact-design=\"${compactDesign}\"\n      enable-responsive=\"${responsiveDesign}\"\n      ${noMinWidth ? 'no-min-width' : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n   >\n          <sdds-table-toolbar table-title=\"Disabled filtering, pagination and sorting - left to the user to listen to events\" enable-filtering></sdds-table-toolbar>\n          <sdds-table-header>\n              <sdds-header-cell column-key='truck' column-title='Truck type' sortable ${\n                column1Width ? `custom-width=\"${column1Width}\"` : ''\n              }></sdds-header-cell>\n              <sdds-header-cell column-key='driver' column-title='Driver name' sortable ${\n                column2Width ? `custom-width=\"${column2Width}\"` : ''\n              }></sdds-header-cell>\n              <sdds-header-cell column-key='country' column-title='Country' sortable ${\n                column3Width ? `custom-width=\"${column3Width}\"` : ''\n              }></sdds-header-cell>\n              <sdds-header-cell column-key='mileage' column-title='Mileage' sortable text-align='right' ${\n                column4Width ? `custom-width=\"${column4Width}\"` : ''\n              }></sdds-header-cell>\n          </sdds-table-header>\n          <sdds-table-body disable-pagination-function disable-filtering-function disable-sorting-function enable-dummy-data>\n              <sdds-table-body-row>\n                  <sdds-body-cell cell-value=\"Test value 5\" cell-key=\"truck\"></sdds-body-cell>\n                  <sdds-body-cell cell-value=\"Test value 6\" cell-key=\"driver\"></sdds-body-cell>\n                  <sdds-body-cell cell-value=\"Test value 7\" cell-key=\"country\"></sdds-body-cell>\n                  <sdds-body-cell cell-value=\"Test value 8\" cell-key=\"mileage\"></sdds-body-cell>\n              </sdds-table-body-row>\n          </sdds-table-body>\n        <sdds-table-footer enable-client-pagination client-max-pages=\"10\"></sdds-table-footer>\n  </sdds-table>\n\n  <!-- Note: Code below is just for demo purposes -->\n  <div class=\"sdds-u-mt1\" style=\"width: 500px; background-color: lightblue; padding: 16px;\">\n  <p class=\"sdds-u-mt0\">Note: This box works only in \"Canvas\" tab.</p>\n    <h5 class=\"sdds-u-mt0 sdds-u-mb0\">Event test box</h5>\n    <h6 class=\"sdds-u-mt1 sdds-u-mb0\">Event name:</h6>\n    <textarea id=\"event-name-textarea\" rows=\"1\" cols=\"50\" readonly></textarea>\n    <h6 class=\"sdds-u-mt0 sdds-u-mb0\">Events value (aka detail)</h6>\n    <small>Event always sent an array of items, where first one is always an ID of tabel where event is emitted from</small>\n    <br>\n    <textarea id=\"event-value-textarea\" rows=\"1\" cols=\"50\" readonly></textarea>\n  </div>`);\n\nexport const EventListeners = EventListenersTemplate.bind({});\n"]}

package/dist/collection/components/data-table/table-component-expandable-rows.stories.js

@@ -24,16 +24,15 @@ export default {
     },
   },
   argTypes: {
-    verticalDivider: {
-      name: 'Vertical dividers',
-      description: 'When enabled, table has vertical dividers between columns.',
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
-        type: 'boolean',
+        type: 'radio',
       },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: 'Inherit from parent' },
       },
     },
     compactDesign: {
@@ -43,56 +42,82 @@ export default {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'The mode variant of the component',
+    responsiveDesign: {
+      name: 'Responsive table',
+      description: 'Enables table to take 100% of available width. For column values less than 192px, "No minimum width" has to be enabled too.',
       control: {
-        type: 'radio',
+        type: 'boolean',
       },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        defaultValue: { summary: false },
       },
     },
-    responsiveDesign: {
-      name: 'Responsive table',
-      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between table columns.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
     noMinWidth: {
-      name: 'No column minimum width limitation',
-      description: 'Enable columns to shrink below width 192px.',
+      name: 'No minimum width',
+      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',
       control: {
         type: 'boolean',
       },
-      table: {
-        defaultValue: {
-          summary: 'false',
-        },
+    },
+    column1Width: {
+      name: 'Column 1 width',
+      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column2Width: {
+      name: 'Column 2 width',
+      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
       },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column3Width: {
+      name: 'Column 3 width',
+      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column4Width: {
+      name: 'Column 4 width',
+      description: 'Value of width for column 4. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
     },
   },
   args: {
     modeVariant: 'Inherit from parent',
     compactDesign: false,
-    verticalDivider: false,
     responsiveDesign: false,
+    verticalDivider: false,
     noMinWidth: false,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+    column4Width: '',
   },
 };
-const ExpandableRowTemplate = ({ verticalDivider, compactDesign, modeVariant, responsiveDesign, noMinWidth, }) => formatHtmlPreview(`
+const ExpandableRowTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
   <sdds-table
     enable-expandable-rows
     vertical-dividers="${verticalDivider}"
@@ -102,10 +127,10 @@ const ExpandableRowTemplate = ({ verticalDivider, compactDesign, modeVariant, re
     ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
     >
       <sdds-table-header>
-          <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>
-          <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>
-          <sdds-header-cell column-key='country' column-title='Country'></sdds-header-cell>
-          <sdds-header-cell column-key='mileage' column-title='Mileage'  text-align='right'></sdds-header-cell>
+          <sdds-header-cell column-key='truck' column-title='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></sdds-header-cell>
+          <sdds-header-cell column-key='driver' column-title='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></sdds-header-cell>
+          <sdds-header-cell column-key='country' column-title='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></sdds-header-cell>
+          <sdds-header-cell column-key='mileage' column-title='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></sdds-header-cell>
       </sdds-table-header>
       <sdds-table-body>
         <sdds-table-body-row-expandable>
@@ -132,5 +157,4 @@ const ExpandableRowTemplate = ({ verticalDivider, compactDesign, modeVariant, re
       </sdds-table-body>
   </sdds-table>`);
 export const ExpandableRows = ExpandableRowTemplate.bind({});
-ExpandableRows.args = {};
 //# sourceMappingURL=table-component-expandable-rows.stories.js.map