Description
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);
});
}
}
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}
`