SbDataTable does not render headers in correct position on single select

[jsve]

Expected Behavior

I should be able to use the table in single-select mode and still have the headers correctly placed over each column. The expected behaviour is illustrated in the storybook here: https://5fb5253d9fbaa1002177207a-pfgnjdmtcy.chromatic.com/?path=/docs/design-system-components-sbdatatable--selection-mode

Current Behavior

The header does not generate the necessary over the column with checkboxes, and the headers is offset by one column to the left. I.e the expected header over column 2 is places over the checkbox column instead (column 1).

Steps to Reproduce

1. use selectionMode="single" and allowSelection on SbData table (see code below for full example)

<template>
  <SbDataTable
    :actions="[]"
    allowSelection
    :headers='[{"label":"Dessert (100g serving)","value":"name","main":true,"sortable":true},{"label":"Calories","value":"calories","sortable":true},{"label":"Fat (g)","value":"fat"},{"label":"Carbs (g)","value":"carbs"},{"label":"Protein (g)","value":"protein"},{"label":"Iron (%)","value":"iron"}]'
    :hideHeader="false"
    :hideLabelActionsBreakpoint="null"
    :isLoading="false"
    :keepSelectedOnChange="false"
    :items='[{"name":"Frozen Yogurt","calories":262,"fat":6,"carbs":24,"protein":4,"iron":"1%"},{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%"},{"name":"Eclair","calories":159,"fat":16,"carbs":23,"protein":6,"iron":"7%"},{"name":"Cupcake","calories":305,"fat":3.7,"carbs":67,"protein":4.3,"iron":"8%"},{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"}]'
    selectionMode="single"
    :striped="false"
    :stickyMenu="false"
    :hideActionsMenu="false"
  />
</template>

Fix

something around this line needs changing: https://github.com/storyblok/storyblok-design-system/blob/3a99be264b32a6f2a8a8ba1eea8deaa301da02f0/src/components/DataTable/components/SbDataTableHeader.vue#L5

[github-actions[bot]]

:tada: This issue has been resolved in version 3.20.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: