How to use Methods

[MateoAtwi]

I cannot figure out how to use methods like updateData. I tried doing
let activeTable = document.getElementById('table') as ActiveTable;

But that didn't work. I just don't understand where you call updateData function. I can get the table to update by hiding and showing it, but I can't get it to update in real time when I change external elements that change the table. Please advise!

`<script lang="ts">
import { coilHeaders, type coil } from '$lib/data/coil';
import { getCollectionFromFirebase } from '$lib/firebase';
import { Timestamp } from 'firebase/firestore';
import type { PageData } from './$types';
import { onMount } from 'svelte';
import { ActiveTable } from 'active-table';

export let data: PageData;
let isLoaded = false;
let showHideButtonText = 'Hide';
let isVisible = true;
onMount(async () => {
	await import('active-table');
});
let activeTable = document.getElementById('table') as ActiveTable;
let tableHeaders = Object.keys(coilHeaders).map((key) => coilHeaders[key]);
let tableKeys = Object.keys(coilHeaders);
let coilTable: any[][] = [tableHeaders];
let coilsData: coil[] = [];
let columnVisibilityTable: [{ HeaderName: string; Visibility: boolean; Key: string }] = [];
let i = 0;
tableHeaders.forEach((header) => {
	columnVisibilityTable.push({ HeaderName: header, Visibility: false, Key: tableKeys[i] });
	i++;
});
columnVisibilityTable[0].Visibility = true;
columnVisibilityTable[2].Visibility = true;
columnVisibilityTable[5].Visibility = true;
columnVisibilityTable[6].Visibility = true;
columnVisibilityTable[7].Visibility = true;
columnVisibilityTable[8].Visibility = true;
columnVisibilityTable[9].Visibility = true;
columnVisibilityTable[10].Visibility = true;
columnVisibilityTable[11].Visibility = true;
columnVisibilityTable[12].Visibility = true;
//Coil Unique ID
//Gauge
//Thickness
//Slit Width
//Weight Received
//Coating Weight
//Yield Strength
//Notes
//Coil Unique ID
let visibleCoilTable: any[][] = [[]];
let visibleKeys: string[] = [];
columnVisibilityTable.forEach((header) => {
	if (header.Visibility) {
		visibleCoilTable[0].push(header.HeaderName);
		visibleKeys.push(header.Key);
	}
});

getCollectionFromFirebase('activeCoils').then((activeCoils) => {
	activeCoils.forEach((coil) => {
		let coilData = coil.data();
		coilData.Date_Input = (coilData.Date_Input as Timestamp).toDate();
		coilData.Date_Received = (coilData.Date_Received as Timestamp).toDate();
		coilsData.push(coilData as coil);
		let coilRow = Object.keys(coilHeaders).map((key) => coilData[key]);
		let visibleCoilRow = visibleKeys.map((key) => coilData[key]);
		coilTable.push(coilRow);
		visibleCoilTable.push(visibleCoilRow);
	});

	isLoaded = true;
});

function showHide() {
	if (!isVisible) {
		showHideButtonText = 'Hide';
		refreshTable();
	} else {
		showHideButtonText = 'Show';
	}
	isVisible = !isVisible;
	console.log('Clicked' + isVisible);
}

function refreshTable() {
	console.log('refresh');

	visibleCoilTable = [[]];
	visibleKeys = [];
	if (isLoaded) {
		columnVisibilityTable.forEach((header) => {
			if (header.Visibility) {
				visibleCoilTable[0].push(header.HeaderName);
				visibleKeys.push(header.Key);
			}
		});
		coilsData.forEach((singleCoil) => {
			let visibleCoilRow = visibleKeys.map((key) => singleCoil[key]);
			visibleCoilTable.push(visibleCoilRow);
		});
	}
}

</script>

Coil Database


{#each columnVisibilityTable as { HeaderName, Visibility }, i}
{i}. {HeaderName}
<input
type="checkbox"
value={Visibility}
bind:checked={Visibility}
on:click={() => refreshTable()}
/>


{/each}
<button class="hide" on:click={() => showHide()}>{showHideButtonText}


{#if isLoaded && isVisible}

<!-- !!!!Svelte version 4.2.2 or higher!!!! -->
<!-- data is an example of passing a state object into the property -->
<!-- headerStyles is an example of directly passing an object -->
<!--availableDefaultColumnTypes={JSON.stringify(['Select', 'Number', 'Number', 'Select', 'Text'])}-->
<active-table
	id="table"
	headerStyles={JSON.stringify({ default: { backgroundColor: '#d6d6d630' } })}
	displayAddNewColumn="false"
	defaultText="-"
	onData
	data={visibleCoilTable}
/>

<!-- !!!!Svelte version 4.2.1 or lower!!!! -->
<!-- data is an example of passing a state object into the property -->
<!-- !!!!properties with CAMEL CASE names need to have their values stringified!!!! this is illustrated in frameComponentsStyles -->
<!-- headerStyles is an example of directly stringifying an object -->
<!-- <active-table
  data={data}
  frameComponentsStyles={JSON.stringify(frameComponentsStyles)}
  headerStyles={'{"default":{"backgroundColor": "#d6d6d630"}}'}
/> -->

{/if}
`

[MateoAtwi]

I was able to access the element, but I'm still unable to update properly. I get the following error: