31:Tc87,async function PersistentTable( tableName = "data", // the name of the table in the storage { value = [], tableOptions, storageName = "PersistentTable", // Name of IndexedDB storage keyName = "data", label = (widget) => `PersistentTable: ${tableName} (${widget.value.length})`, // can return an html element exportFormat = "csv", // Can also be json summaryWidget = Inputs.table, confirm = false // Confirm only works outside observable } = {} ) { tableOptions = { select: false, layout: "fixed", ...tableOptions }; // IndexedDB Initialization const db = IndexedDBStorage({ storageName, tableName }); let table; const labelHolder = htl.html``; const tableHolder = htl.html`

`; const clearButton = htl.html``; const exportButtonHolder = htl.html``; const importButton = await dataInput({ value: value, label: "Import" }); const target = htl.html`

${labelHolder}

${importButton} ${exportButtonHolder} ${clearButton}

${tableHolder}

`; // Tries to load the cached value value = (await db.get(keyName)) || value; const widget = ReactiveWidget(target, { value, showValue }); // Stores the value and update the widget async function cacheValue(data) { await db.set(keyName, data); widget.setValue(data); } // Updates the widget, not calling the event async function showValue() { exportButtonHolder.innerHTML = ""; exportButtonHolder.appendChild( DOM.download( exportFormat.toLowerCase() === "csv" ? new Blob([d3.csvFormat(widget.value)], { type: "text/csv" }) : new Blob([JSON.stringify(widget.value)], { type: "application/json" }), `${tableName}.${exportFormat}`, "Export" ) // DOM.download( // new Blob([JSON.stringify(widget.value)], { type: "application/json" }), // `${tableName}.json`, // "Export" // ) ); // console.log("PersistentTable showValue"); labelHolder.innerHTML = ""; labelHolder.appendChild(htl.html`${label(widget)}`); tableHolder.innerHTML = ""; table = await summaryWidget(widget.value, { ...tableOptions, value: table?.value }); table.addEventListener("input", (evt) => { // console.log("PersistentTable widget input", table); evt.preventDefault(); evt.stopPropagation(); }); tableHolder.appendChild(table); } // Clearing clearButton.addEventListener("click", async () => { const doClear = async () => { await db.clear(keyName); cacheValue([]); }; // When running withing observable modals are disallowed try { if ( confirm && !window.confirm("Do you want to delete your whole selection?") ) { return; } doClear(); } catch { doClear(); } }); importButton.addEventListener("input", () => { cacheValue(importButton.value); }); widget.update = cacheValue; widget.push = (val) => cacheValue(target.value.concat(val)); widget.value = value; return target; }32:[] 2f:{"title":"Persistent Table","cells":[{"id":0,"value":"# Persistent Table\n\nA basic reactive widget that behaves like a simple table that persist using local storage\n\n## Usage\n\n~~~js\nimport {PersistentTable} from \"@john-guerra/persistent-table\"\n// Create your table\nviewof myTable = PersisentTable(\"people\")\n// Update the table's value\n(viewof table).update(arrayOfObjects)\n~~~\n\n## TODO\n\n* Download, upload\n* Add blob","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"viewof table = PersistentTable(\"names\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"viewof name = Inputs.text({ label: \"Add some names\" , submit: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"You can change the summary widget with any other reactive widget that can show tabular data","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"viewof navioTable = PersistentTable(\"penguins\", {\n summaryWidget: navio,\n value: penguins\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"navioTable","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"A table with a remove button","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"onNameSubmit = {\n if (!name) return;\n (viewof table).update([...viewof table.value, { name: name }]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"import {IndexedDBStorage} from \"@john-guerra/indexeddb-storage\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"import {dataInput} from \"@john-guerra/data-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"import { navio } from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"ReactiveWidget = require(\"reactive-widget-helper@0.0.3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"isSandboxedIframe()","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"function isSandboxedIframe() {\n if (window.parent === window) return 'no-iframe';\n try { var f = window.frameElement; } catch(err) { f = null; }\n if(f === null) {\n if(document.domain !== '') return 'unkown'; // Probably 'non-sandboxed'\n if(location.protocol !== 'data:') return 'sandboxed';\n return 'unkown'; // Can be 'sandboxed' on Firefox\n }\n return f.hasAttribute('sandbox') ? 'sandboxed' : 'non-sandboxed';\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}