fix(Datatable): fix exception when using checkbox

Author: hobbitronics

components/mdc/Datatable/Datatable.svelte

@@ -2,15 +2,24 @@
 <script>
 import { MDCDataTable } from '@material/data-table'
 import { createEventDispatcher, onMount } from 'svelte'
-
+/**
+ * @prop {string}
+ * @description used for aria-label
+ */
 export let label = ''
+/**
+ * @prop {any}
+ * @description used to register new Datatable Checkboxes when length changes
+ */
+export let checkboxIsMountedArray = []
 
 const dispatch = createEventDispatcher()
+let dataTable = {}
 
 let element = {}
 
 onMount(() => {
-  const dataTable = new MDCDataTable(element)
+  dataTable = new MDCDataTable(element)
 
   dataTable.listen('MDCDataTable:sorted', (event) => {
     dispatch('sorted', event.detail)
@@ -30,8 +39,10 @@ onMount(() => {
 
   // This does not work because of an MDC bug. See https://github.com/material-components/material-components-web/issues/6385
   // If checkboxes are needed, check for a release of the PR linked to the above issue, or pull in the destroy code here.
-  //return () => dataTable.destroy()
+  return () => dataTable.destroy()
 })
+
+$: checkboxIsMountedArray.length && dataTable?.layout()
 </script>
 
 <div class="mdc-data-table w-100 {$$props.class}" bind:this={element}>

components/mdc/Datatable/DatatableCheckbox.svelte

@@ -1,13 +1,15 @@
 <script>
 import { generateRandomID } from '../../../random'
-import { createEventDispatcher } from 'svelte'
+import { createEventDispatcher, onMount } from 'svelte'
 
 export let disabled = false
 
-let checked = false
+let checked
 
 const inputID = generateRandomID('checkbox-')
 
+onMount(() => dispatch('mounted'))
+
 $: checked, handleChange()
 
 const dispatch = createEventDispatcher()

components/mdc/Datatable/_index.scss

@@ -1,4 +1,6 @@
-@use '@material/data-table/data-table';
+@use "@material/checkbox"; // Required only for data table with row selection.
+@use "@material/data-table/data-table";
 
+@include checkbox.core-styles;
 @include data-table.core-styles;
 @include data-table.theme-baseline;