@scania/tegel 0.0.9 → 0.0.11

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

@@ -0,0 +1,201 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import tdsTable from './table/readme.md';
+import tdsTableToolbar from './table-toolbar/readme.md';
+import tdsHeader from './table-header/readme.md';
+import tdsHeaderCell from './table-header-cell/readme.md';
+import tdsTableBody from './table-body/readme.md';
+import tdsBodyRow from './table-body-row/readme.md';
+import tdsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import tdsBodyCell from './table-body-cell/readme.md';
+import tdsTableFooter from './table-footer/readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Table`,
+  parameters: {
+    notes: {
+      'tds-table': tdsTable,
+      'tds-table-toolbar': tdsTableToolbar,
+      'tds-header': tdsHeader,
+      'tds-header-cell': tdsHeaderCell,
+      'tds-table-body': tdsTableBody,
+      'tds-body-row': tdsBodyRow,
+      'tds-body-row-expandable': tdsBodyRowExpandable,
+      'tds-body-cell': tdsBodyCell,
+      'tds-table-footer': tdsTableFooter,
+    },
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    compactDesign: {
+      name: 'Compact design',
+      description: 'Enables compact design of the Table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    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: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    batchArea: {
+      name: 'Batch code',
+      description: 'Enables code to be injected into the toolbar area.',
+      control: {
+        type: 'text',
+      },
+    },
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between Table columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    noMinWidth: {
+      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',
+      },
+    },
+    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,
+    responsiveDesign: false,
+    batchArea: formatHtmlPreview(`<div slot="end"><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,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+    column4Width: '',
+  },
+};
+const BatchActionTemplate = ({ modeVariant, compactDesign, responsiveDesign, batchArea, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+   <tds-table
+        enable-multiselect
+        vertical-dividers="${verticalDivider}"
+        compact-design="${compactDesign}"
+        enable-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};"` : ''} column-key='truck' column-title='Truck type'></tds-header-cell>
+              <tds-header-cell ${column2Width ? `style="width: ${column2Width};"` : ''} column-key='driver' column-title='Driver name'></tds-header-cell>
+              <tds-header-cell ${column3Width ? `style="width: ${column3Width};"` : ''} column-key='country' column-title='Country'></tds-header-cell>
+              <tds-header-cell ${column4Width ? `style="width: ${column4Width};"` : ''} column-key='mileage' column-title='Mileage' text-align='right'></tds-header-cell>
+          </tds-table-header>
+          <tds-table-body>
+          </tds-table-body>
+  </tds-table>
+  <script>
+      /* ONLY WORKS IN THE CANVAS TAB. */
+      tableBody = document.querySelector('tds-table-body');
+      tableBody.bodyData = [
+        {
+          "truck": "L-series",
+          "driver": "Sonya Bruce",
+          "country": "Brazil",
+          "mileage": 123987
+        },
+        {
+          "truck": "P-series",
+          "driver": "Guerra Bowman",
+          "country": "Sweden",
+          "mileage": 2000852
+        },
+        {
+          "truck": "G-series",
+          "driver": "Ferrell Wallace",
+          "country": "Germany",
+          "mileage": 564
+        },
+        {
+          "truck": "R-series",
+          "driver": "Cox Burris",
+          "country": "Spain",
+          "mileage": 1789357
+        },
+        {
+          "truck": "S-series",
+          "driver": "Montgomery Cervantes",
+          "country": "Croatia",
+          "mileage": 65
+        },
+        {
+          "truck": "L-series",
+          "driver": "Sheryl Nielsen",
+          "country": "Greece",
+          "mileage": 365784
+        },
+        {
+          "truck": "G-series",
+          "driver": "Benton Gomez",
+          "country": "France",
+          "mileage": 80957
+        }
+      ]
+  </script>
+  `);
+export const BatchAction = BatchActionTemplate.bind({});

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

@@ -0,0 +1,101 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import tdsTable from './table/readme.md';
+import tdsTableToolbar from './table-toolbar/readme.md';
+import tdsHeader from './table-header/readme.md';
+import tdsHeaderCell from './table-header-cell/readme.md';
+import tdsTableBody from './table-body/readme.md';
+import tdsBodyRow from './table-body-row/readme.md';
+import tdsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import tdsBodyCell from './table-body-cell/readme.md';
+import tdsTableFooter from './table-footer/readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Table`,
+  parameters: {
+    notes: {
+      'tds-table': tdsTable,
+      'tds-table-toolbar': tdsTableToolbar,
+      'tds-header': tdsHeader,
+      'tds-header-cell': tdsHeaderCell,
+      'tds-table-body': tdsTableBody,
+      'tds-body-row': tdsBodyRow,
+      'tds-body-row-expandable': tdsBodyRowExpandable,
+      'tds-body-cell': tdsBodyCell,
+      'tds-table-footer': tdsTableFooter,
+    },
+  },
+  argTypes: {
+    bodyData: {
+      name: 'Data',
+      description: 'An array of objects with keys matching the header cell `column-key` attributes. Can be passed as an array object, or as a stringified array.',
+      control: {
+        type: 'array',
+      },
+    },
+  },
+  args: {
+    bodyData: [
+      {
+        truck: 'L-series',
+        driver: 'Sonya Bruce',
+        country: 'Brazil',
+        mileage: 123987,
+      },
+      {
+        truck: 'P-series',
+        driver: 'Guerra Bowman',
+        country: 'Sweden',
+        mileage: 2000852,
+      },
+      {
+        truck: 'G-series',
+        driver: 'Ferrell Wallace',
+        country: 'Germany',
+        mileage: 564,
+      },
+      {
+        truck: 'R-series',
+        driver: 'Cox Burris',
+        country: 'Spain',
+        mileage: 1789357,
+      },
+      {
+        truck: 'S-series',
+        driver: 'Montgomery Cervantes',
+        country: 'Croatia',
+        mileage: 65,
+      },
+      {
+        truck: 'L-series',
+        driver: 'Sheryl Nielsen',
+        country: 'Greece',
+        mileage: 365784,
+      },
+      {
+        truck: 'G-series',
+        driver: 'Benton Gomez',
+        country: 'France',
+        mileage: 80957,
+      },
+    ],
+  },
+};
+const DataPropertyTemplate = ({ bodyData }) => formatHtmlPreview(`
+    <tds-table enable-expandable-rows="false">
+    <tds-table-toolbar table-title="'body-data' property example"></tds-table-toolbar>
+      <tds-table-header>
+          <tds-header-cell column-key='truck' column-title='Truck type'></tds-header-cell>
+          <tds-header-cell column-key='driver' column-title='Driver name'></tds-header-cell>
+          <tds-header-cell column-key='country' column-title='Country'></tds-header-cell>
+          <tds-header-cell column-key='milage' column-title='Milage'></tds-header-cell>
+      </tds-table-header>
+      <tds-table-body>
+      </tds-table-body>
+  </tds-table>
+  
+  <script>
+    /* ONLY WORKS IN THE CANVAS TAB. */
+    tableBody = document.querySelector('tds-table-body');
+    tableBody.bodyData = ${JSON.stringify(bodyData)}
+  </script>`);
+export const DataProperty = DataPropertyTemplate.bind({});

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

@@ -0,0 +1,174 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import tdsTable from './table/readme.md';
+import tdsTableToolbar from './table-toolbar/readme.md';
+import tdsHeader from './table-header/readme.md';
+import tdsHeaderCell from './table-header-cell/readme.md';
+import tdsTableBody from './table-body/readme.md';
+import tdsBodyRow from './table-body-row/readme.md';
+import tdsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import tdsBodyCell from './table-body-cell/readme.md';
+import tdsTableFooter from './table-footer/readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Table`,
+  parameters: {
+    notes: {
+      'tds-table': tdsTable,
+      'tds-table-toolbar': tdsTableToolbar,
+      'tds-header': tdsHeader,
+      'tds-header-cell': tdsHeaderCell,
+      'tds-table-body': tdsTableBody,
+      'tds-body-row': tdsBodyRow,
+      'tds-body-row-expandable': tdsBodyRowExpandable,
+      'tds-body-cell': tdsBodyCell,
+      'tds-table-footer': tdsTableFooter,
+    },
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    compactDesign: {
+      name: 'Compact design',
+      description: 'Enables compact design of the Table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    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: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between Table columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    noMinWidth: {
+      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',
+      },
+    },
+    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,
+    responsiveDesign: false,
+    verticalDivider: true,
+    noMinWidth: true,
+    column1Width: '321px',
+    column2Width: '400px',
+    column3Width: '150px',
+    column4Width: '110px',
+  },
+};
+const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+  <tds-table
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      enable-responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+  >
+      <tds-table-header>
+          <tds-header-cell column-key='truck' column-title='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''} ></tds-header-cell>
+          <tds-header-cell column-key='driver' column-title='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+          <tds-header-cell column-key='country' column-title='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+          <tds-header-cell column-key='mileage' column-title='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-event-listeners.stories.js

@@ -0,0 +1,193 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import tdsTable from './table/readme.md';
+import tdsTableToolbar from './table-toolbar/readme.md';
+import tdsHeader from './table-header/readme.md';
+import tdsHeaderCell from './table-header-cell/readme.md';
+import tdsTableBody from './table-body/readme.md';
+import tdsBodyRow from './table-body-row/readme.md';
+import tdsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import tdsBodyCell from './table-body-cell/readme.md';
+import tdsTableFooter from './table-footer/readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Table`,
+  parameters: {
+    notes: {
+      'tds-table': tdsTable,
+      'tds-table-toolbar': tdsTableToolbar,
+      'tds-header': tdsHeader,
+      'tds-header-cell': tdsHeaderCell,
+      'tds-table-body': tdsTableBody,
+      'tds-body-row': tdsBodyRow,
+      'tds-body-row-expandable': tdsBodyRowExpandable,
+      'tds-body-cell': tdsBodyCell,
+      'tds-table-footer': tdsTableFooter,
+    },
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    compactDesign: {
+      name: 'Compact design',
+      description: 'Enables compact design of the Table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    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: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between Table columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    noMinWidth: {
+      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',
+      },
+    },
+    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,
+    responsiveDesign: false,
+    verticalDivider: false,
+    noMinWidth: false,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+    column4Width: '',
+  },
+};
+const EventListenersTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+    <script>
+      // Note: Script here is only for demo purposes
+      window.addEventListener('tdsFilterChange', e => {
+        document.getElementById('event-name-textarea').value = 'tdsFilterChange';
+        document.getElementById('event-value-textarea').value = JSON.stringify(e.detail)
+      });
+
+      window.addEventListener('tdsSortChange', e => {
+        document.getElementById('event-name-textarea').value = 'tdsSortChange';
+        document.getElementById('event-value-textarea').value = JSON.stringify(e.detail);
+      });
+
+      window.addEventListener('tdsPageChange', e => {
+        document.getElementById('event-name-textarea').value = 'tdsPageChange';
+        document.getElementById('event-value-textarea').value = JSON.stringify(e.detail);
+      });
+    </script>
+
+   <tds-table
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      enable-responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+   >
+          <tds-table-toolbar table-title="Disabled filtering, pagination and sorting - left to the user to listen to events" enable-filtering></tds-table-toolbar>
+          <tds-table-header>
+              <tds-header-cell column-key='truck' column-title='Truck type' sortable ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
+              <tds-header-cell column-key='driver' column-title='Driver name' sortable ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+              <tds-header-cell column-key='country' column-title='Country' sortable ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+              <tds-header-cell column-key='mileage' column-title='Mileage' sortable text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
+          </tds-table-header>
+          <tds-table-body>
+              <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 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>
+              </tds-table-body-row>
+              <tds-table-body-row>
+                  <tds-body-cell cell-value="Test value 13" cell-key="truck"></tds-body-cell>
+                  <tds-body-cell cell-value="Test value 14" cell-key="driver"></tds-body-cell>
+                  <tds-body-cell cell-value="Test value 15" cell-key="country"></tds-body-cell>
+                  <tds-body-cell cell-value="Test value 16" cell-key="mileage"></tds-body-cell>
+              </tds-table-body-row>
+              <tds-table-body-row>
+                  <tds-body-cell cell-value="Test value 17" cell-key="truck"></tds-body-cell>
+                  <tds-body-cell cell-value="Test value 18" cell-key="driver"></tds-body-cell>
+                  <tds-body-cell cell-value="Test value 19" cell-key="country"></tds-body-cell>
+                  <tds-body-cell cell-value="Test value 20" cell-key="mileage"></tds-body-cell>
+              </tds-table-body-row>
+          </tds-table-body>
+        <tds-table-footer pagination pages="4"></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="1" cols="50" readonly></textarea>
+  </div>`);
+export const EventListeners = EventListenersTemplate.bind({});