Manage selected state in the data-table component instead of in the data itself

Currently the data-table stores its state within the data itself, which I find highly problematic.

Storing view state in data models

Pros Not sure

Cons

• You have to map selected state to every data item.
• That gets complicated if your data is reactive.
• And even more complicated if your data is immutable, e.g. from a data store like Vuex.
• And even more complicated if the same data is used in a table more than once as the selected state is remembered in the store.
• And even more complicated if your server enforces schema or doesn’t sanitize your submitted data
• Lastly, you risk data corruption in case your data entries already have a value property and you’re unaware that the selected state by default overwrites the value.

Many of the cons listed can be tackled through various boilerplate, methods, computed methods, watchers, server sanitation etc., but the crux of the matter is, view state shouldn’t leak into the data in the first place.

The current data-table uses the following scope

  props: {
    item: {
      value: false,
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      sodium: 129,
      calcium: '8%',
      iron: '1%'
    }
  }

I propose this

  props: {
    checked: false,
    item: {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      sodium: 129,
      calcium: '8%',
      iron: '1%'
    }
  }

Move the checked state out of the item and into props and keep the logic inside the data table component. The selected state can be be queried through $ref as well as emitted from the data table component.

[nekosaur]

Implemented in #516

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord