@scania/tegel 1.0.0 → 1.0.1

package/dist/collection/components/table/table-component-batch-actions.stories.js

@@ -117,8 +117,8 @@ export default {
     modeVariant: 'Inherit from parent',
     compactDesign: false,
     responsiveDesign: false,
-    batchArea: formatHtmlPreview(`<div slot="end" class="tds-u-flex tds-u-align-items-center tds-u-h-100 tds-u-gap1"><tds-button type="ghost" size="sm">
-      <tds-icon slot="icon" class="tds-btn-icon" size="16px" name="settings"></tds-icon>
+    batchArea: formatHtmlPreview(`<div slot="end" class="tds-u-flex tds-u-align-items-center tds-u-h-100 tds-u-gap1"><tds-button type="ghost" size="sm">
+      <tds-icon slot="icon" class="tds-btn-icon" size="16px" name="settings"></tds-icon>
     </tds-button><tds-button  type="primary" size="sm" text="Download"></tds-button></div>`),
     verticalDivider: false,
     noMinWidth: false,
@@ -128,61 +128,61 @@ export default {
     column4Width: '',
   },
 };
-const BatchActionTemplate = ({ modeVariant, compactDesign, responsiveDesign, batchArea, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
-   <tds-table
-        vertical-dividers="${verticalDivider}"
-        compact-design="${compactDesign}"
-        responsive="${responsiveDesign}"
-        ${noMinWidth ? 'no-min-width' : ''}
-        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      >
-          <tds-table-toolbar table-title="Batch action">
-          ${batchArea}
-        </tds-table-toolbar>
-          <tds-table-header>
-              <tds-header-cell ${column1Width ? `style="width: ${column1Width};"` : ''} cell-key='truck' cell-value='Truck type'></tds-header-cell>
-              <tds-header-cell ${column2Width ? `style="width: ${column2Width};"` : ''} cell-key='driver' cell-value='Driver name'></tds-header-cell>
-              <tds-header-cell ${column3Width ? `style="width: ${column3Width};"` : ''} cell-key='country' cell-value='Country'></tds-header-cell>
-              <tds-header-cell ${column4Width ? `style="width: ${column4Width};"` : ''} cell-key='mileage' cell-value='Mileage' text-align='right'></tds-header-cell>
-          </tds-table-header>
-          <tds-table-body>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-      </tds-table-body>
-  </tds-table>
+const BatchActionTemplate = ({ modeVariant, compactDesign, responsiveDesign, batchArea, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+   <tds-table
+        vertical-dividers="${verticalDivider}"
+        compact-design="${compactDesign}"
+        responsive="${responsiveDesign}"
+        ${noMinWidth ? 'no-min-width' : ''}
+        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      >
+          <tds-table-toolbar table-title="Batch action">
+          ${batchArea}
+        </tds-table-toolbar>
+          <tds-table-header>
+              <tds-header-cell ${column1Width ? `style="width: ${column1Width};"` : ''} cell-key='truck' cell-value='Truck type'></tds-header-cell>
+              <tds-header-cell ${column2Width ? `style="width: ${column2Width};"` : ''} cell-key='driver' cell-value='Driver name'></tds-header-cell>
+              <tds-header-cell ${column3Width ? `style="width: ${column3Width};"` : ''} cell-key='country' cell-value='Country'></tds-header-cell>
+              <tds-header-cell ${column4Width ? `style="width: ${column4Width};"` : ''} cell-key='mileage' cell-value='Mileage' text-align='right'></tds-header-cell>
+          </tds-table-header>
+          <tds-table-body>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+      </tds-table-body>
+  </tds-table>
   `);
 export const BatchAction = BatchActionTemplate.bind({});

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

@@ -118,57 +118,57 @@ export default {
     column4Width: '110px',
   },
 };
-const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
-  <tds-table
-      vertical-dividers="${verticalDivider}"
-      compact-design="${compactDesign}"
-      responsive="${responsiveDesign}"
-      ${noMinWidth ? 'no-min-width' : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-  >
-      <tds-table-header>
-          <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''} ></tds-header-cell>
-          <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
-          <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
-          <tds-header-cell cell-key='mileage' cell-value='Mileage' ${column4Width ? `custom-width="${column4Width}"` : ''} text-align='right'></tds-header-cell>
-      </tds-table-header>
-      <tds-table-body>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-      </tds-table-body>
+const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+  <tds-table
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+  >
+      <tds-table-header>
+          <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''} ></tds-header-cell>
+          <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+          <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+          <tds-header-cell cell-key='mileage' cell-value='Mileage' ${column4Width ? `custom-width="${column4Width}"` : ''} text-align='right'></tds-header-cell>
+      </tds-table-header>
+      <tds-table-body>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+          </tds-table-body-row>
+      </tds-table-body>
   </tds-table>`);
 export const CustomWidth = BasicTemplate.bind({});

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

@@ -118,43 +118,43 @@ export default {
     column4Width: '',
   },
 };
-const ExpandableRowTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
-  <tds-table
-    expandable-rows
-    vertical-dividers="${verticalDivider}"
-    compact-design="${compactDesign}"
-    responsive="${responsiveDesign}"
-    ${noMinWidth ? 'no-min-width' : ''}
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-      <tds-table-header>
-          <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
-          <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
-          <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
-          <tds-header-cell cell-key='mileage' cell-value='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
-      </tds-table-header>
-      <tds-table-body>
-        <tds-table-body-row-expandable>
-          <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          <div slot="expand-row">Hello world 1</div>
-        </tds-table-body-row-expandable>
-         <tds-table-body-row-expandable>
-          <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          <div slot="expand-row">Hello to you too</div>
-        </tds-table-body-row-expandable>
-        <tds-table-body-row-expandable>
-          <tds-body-cell cell-value="Test value 9" cell-key="truck"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 10" cell-key="driver"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 11" cell-key="country"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 12" cell-key="mileage"></tds-body-cell>
-          <div slot="expand-row"><tds-button type="primary" text="Call to action"></tds-button></div>
-        </tds-table-body-row-expandable>
-      </tds-table-body>
+const ExpandableRowTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+  <tds-table
+    expandable-rows
+    vertical-dividers="${verticalDivider}"
+    compact-design="${compactDesign}"
+    responsive="${responsiveDesign}"
+    ${noMinWidth ? 'no-min-width' : ''}
+    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      <tds-table-header>
+          <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
+          <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+          <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+          <tds-header-cell cell-key='mileage' cell-value='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
+      </tds-table-header>
+      <tds-table-body>
+        <tds-table-body-row-expandable>
+          <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+          <div slot="expand-row">Hello world 1</div>
+        </tds-table-body-row-expandable>
+         <tds-table-body-row-expandable>
+          <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+          <div slot="expand-row">Hello to you too</div>
+        </tds-table-body-row-expandable>
+        <tds-table-body-row-expandable>
+          <tds-body-cell cell-value="Test value 9" cell-key="truck"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 10" cell-key="driver"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 11" cell-key="country"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 12" cell-key="mileage"></tds-body-cell>
+          <div slot="expand-row"><tds-button type="primary" text="Call to action"></tds-button></div>
+        </tds-table-body-row-expandable>
+      </tds-table-body>
   </tds-table>`);
 export const ExpandableRows = ExpandableRowTemplate.bind({});

package/dist/collection/components/table/table-component-filtering.stories.js

@@ -126,76 +126,76 @@ export default {
     column4Width: '',
   },
 };
-const FilteringTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
-   <tds-table
-      vertical-dividers="${verticalDivider}"
-      compact-design="${compactDesign}"
-      ${responsiveDesign ? 'responsive' : ''}
-      ${noMinWidth ? 'no-min-width' : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-  >
-          <tds-table-toolbar table-title="Filter" filter></tds-table-toolbar>
-          <tds-table-header>
-              <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='mileage' cell-value='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
-          </tds-table-header>
-            <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-          <tds-table-footer>              
-          </tds-table-footer>
-  </tds-table>
-  <!-- Note: Code below is just for demo purposes -->
-  <div class="tds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
-  <p class="tds-u-mt0">Note: This box works only in "Canvas" tab.</p>
-    <h5 class="tds-u-mt0 tds-u-mb0">Event test box</h5>
-    <h6 class="tds-u-mt1 tds-u-mb0">Event name:</h6>
-    <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
-    <h6 class="tds-u-mt0 tds-u-mb0">Events value (aka detail)</h6>
-    <br>
-    <textarea id="event-value-textarea" rows="4" cols="50" readonly></textarea>
-  </div>
-  
-  <script>  
-  
-  window.addEventListener('tdsFilter', e => {
-    document.getElementById('event-name-textarea').value = e.type;
-    document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
-  });
+const FilteringTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+   <tds-table
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      ${responsiveDesign ? 'responsive' : ''}
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+  >
+          <tds-table-toolbar table-title="Filter" filter></tds-table-toolbar>
+          <tds-table-header>
+              <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='mileage' cell-value='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
+          </tds-table-header>
+            <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+          <tds-table-footer>              
+          </tds-table-footer>
+  </tds-table>
+  <!-- Note: Code below is just for demo purposes -->
+  <div class="tds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
+  <p class="tds-u-mt0">Note: This box works only in "Canvas" tab.</p>
+    <h5 class="tds-u-mt0 tds-u-mb0">Event test box</h5>
+    <h6 class="tds-u-mt1 tds-u-mb0">Event name:</h6>
+    <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
+    <h6 class="tds-u-mt0 tds-u-mb0">Events value (aka detail)</h6>
+    <br>
+    <textarea id="event-value-textarea" rows="4" cols="50" readonly></textarea>
+  </div>
+  
+  <script>  
+  
+  window.addEventListener('tdsFilter', e => {
+    document.getElementById('event-name-textarea').value = e.type;
+    document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
+  });
 </script>`);
 export const Filtering = FilteringTemplate.bind({});