Checkbox selection doesn't work correctly with cell template (grid native)

[Stefan]

As I said in the title: Checkbox selection doesn't work correctly with cell template (grid native).

Broken grid screen

The checkboxes didin't show up correctly, instead all data moved one column to the left. There is my code:

HTML:

<Grid
  ref="grid"
  :data-items="gridData"
  :columns="gridHeaders"
  :pageable="pageable"
  :skip="skip"
  :take="take"
  :page-size="pageSize"
  :total="tasks.totalElements"
  @columnreorder="columnReorder"
  :cell-render="'myTemplate'"
  :scrollable="'none'"
  :selected-field="selectedField"
>
  <template slot="myTemplate" slot-scope="{props}">
    <td :class="props.className">
      <span v-if="props.field === 'actions'">
        <VTooltip
          v-if="type !== 'user'"
          bottom
        >
          <VIcon
            slot="activator"
            style="cursor: pointer"
            @click="assignTask([props.dataItem])"
          >
            {{ assignIcon }}
          </VIcon>
          <span>{{ assignToolTip }}</span>
        </VTooltip>
        <VTooltip
          v-if="type === 'user'"
          bottom
        >
          <VIcon
            slot="activator"
            style="cursor: pointer"
            :disabled="!resolverRegistered(props.dataItem)"
            @click.stop="resolveTask(props.dataItem)"
          >
            check
          </VIcon>
          <span>Resolve</span>
        </VTooltip>
      </span>
      <span v-else>{{ getNestedValue(props.field, props.dataItem) }}</span>
    </td>
  </template>
</Grid>

Computed:

gridData() {
        if (this.tasks.content) {
          return this.tasks.content.map(item => {return {'selected': false, ...item}})
        } else {
          return []
        }
      },
      areAllSelected() {
        if (this.tasks.content) {
          return this.tasks.content.findIndex(item => item.selected === false) === -1
        } else {
          return false
        }
      },
      gridHeaders() {
        return [
          {field: 'selected', headerSelectionValue: this.areAllSelected}, ...this.headers
        ]
      }

Methods:

getNestedValue(fieldName, dataItem) {
        const path = fieldName.split('.');
        let data = dataItem;
        path.forEach((p) => {
            data = data ? data[p] : undefined;
        });

        return data;
      },

Data:

selectedField: 'selected',

 

Am I doing something in a wrong way? Or I have to implement those checkboxes in my own way.

I would be grateful for any help! :)

[Stefan]

I've found answer. I have to use cell in a header object to defined template for the particular cell.