Retrieving Edited CSV Data via JS API

[sukazavr]

Hello Grist Labs Team,

I am exploring the grist-static repository and am interested in the capabilities of the JS API regarding CSV data manipulation. Specifically, I'm looking to understand whether it's possible to retrieve data from an edited CSV through the API.

If such functionality is not currently available, I would like to request its consideration for implementation. Additionally, any guidance on potential workarounds leveraging JS would be appreciated.

Thank you for your efforts in maintaining this project 👍

[paulfitz]

Hi @sukazavr, that's not a thing you can do with grist-static, although it'd be great if you could. I'm having trouble imagining how to do it, you'd need to have a server somewhere I think to store some data. What you edit in grist-static is just in your particular browser, and there's no way for someone else on another device to reach in and read that. There are peer to peer technologies that could perhaps be used, but would still likely need some kind of server or servers somewhere...

If the API access is going to be within the same browser, perhaps there's something that could be done.

If you are willing to set up a server, grist-core could be what you need.

[sukazavr]

Hi @paulfitz!

Thank you for the clarification. To refine my question: I am specifically looking for a way to utilize browser-based JavaScript to interact with grist-static data. My goal is to enable JS API access to the CSV data that has been manipulated client-side, without setting up a separate server for this purpose.

If you have any insights into client-side solutions or any planned updates that might accommodate this functionality, I'd be eager to hear more.

[sukazavr]

Here’s an example of how the JavaScript API could be structured:

// Assume the <csv-viewer/> component is already rendered on the page

// Function to load CSV data into the <csv-viewer/>
function loadCSVData(csvData) {
  const csvViewer = document.querySelector('csv-viewer');
  csvViewer.loadData(csvData);
}

// Function to retrieve the current state of the CSV data from the <csv-viewer/>
function getEditedCSVData() {
  const csvViewer = document.querySelector('csv-viewer');
  return csvViewer.getEditedData(); // This would return the edited CSV data
}

// Example usage:
// Load initial CSV data
loadCSVData(initialCSVData);

// Set up a listener for edit events on the <csv-viewer/>
document.querySelector('csv-viewer').addEventListener('edit', () => {
  // This callback is executed every time the CSV data is edited
  const updatedCSVData = getEditedCSVData();
  console.log('CSV data has been edited:', updatedCSVData);
});

[paulfitz]

Ah ok, I understand now. That kind of thing would indeed be possible. E.g. on the grist-static demo page, with the "weresheet" demo loaded, you can do:

frame = document.getElementsByTagName('iframe')[0];
gristDoc = d.contentWindow.gristDocPageModel.gristDoc.get()
gristDoc.getTableModel('MOONPHASE_').getNumRows()

It would need some work to set up the hooks you envisage, but there's no technical problem.

[sukazavr]

Understood, and this approach seems sufficient for my current needs. Thank you for the guidance – it's much appreciated.