Checkbox in datatable throwing js console error

[HDShabe]

Hi,

I've got a datatable which has a checkbox as one of it's columns (or multiple columns with a checkbox in this example, though the same happens with just 1 column with a checkbox. Here's a simplified version:

<ui-table :data="requestData"
                      :thead="thead"
                      :tbody="tbody"
                      show-progress
                      fullwidth>

  <template #enabled="{ data }">
      <ui-checkbox v-model="data.enabled"></ui-checkbox>
  </template>

  <template #selectToAdd="{ data }">
      <ui-checkbox v-model="data.add"></ui-checkbox>
  </template>
</ui-table>

data:

thead: [
  {
      value: 'ID',
      sort: 'asc',
      columnId: 'id'
  },
  'Enable',
  'Add'
  ],
  tbody: [
    'id'
    {
        slot: 'enabled'
    },
    {
        slot: 'selectToAdd'
    },
],
requestData: [],

When I select one of the checkboxes, I see the following error in console:

balm-ui.esm.js:1 Uncaught TypeError: Cannot read properties of undefined (reading '0') at Object.isCheckboxAtRowIndexChecked (balm-ui.esm.js:1) at e.handleRowCheckboxChange (balm-ui.esm.js:1) at HTMLTableSectionElement.handleRowCheckboxChange (balm-ui.esm.js:1)

However, if I add the row-checkbox property onto the data-table, like so:

<ui-table :data="requestData"
                      :thead="thead"
                      :tbody="tbody"
                      show-progress
                      row-checkbox
                      fullwidth>

The error now goes away, though i'm left with a set of checkboxes on the left of the datatable which I don't want.

I'm assuming this is a bug, can it be resolved?

Cheers.

[elf-mouse]

Thanks @HDShabe ,

It's a MDC(@material-components) official bug, I have fixed now.

You can reinstall new version and enjoy it.

<ui-table :data="requestData" :thead="thead" :tbody="tbody" fullwidth>
  <template #enabled="{ data }">
    <ui-radio v-model="enabled" :value="data.value"></ui-radio>
  </template>

  <template #selectToAdd="{ data }">
    <ui-checkbox v-model="add" :value="data.value"></ui-checkbox>
  </template>
</ui-table>

export default {
  data() {
    return {
      thead: [
        {
          value: 'ID',
          sort: 'asc',
          columnId: 'id'
        },
        'Enable',
        'Add'
      ],
      tbody: [
        'id',
        {
          slot: 'enabled'
        },
        {
          slot: 'selectToAdd'
        }
      ],
      requestData: [
        {
          id: 1,
          value: 'a'
        },
        {
          id: 2,
          value: 'b'
        }
      ],
      enabled: 'a',
      add: ['a', 'b']
    };
  }
};