Buttons in custom widget to navigate rows in a table

Developers
1

I have a table where each row corresponds to a meeting with the following columns:

  • Date
  • Time
  • Speaker
  • Theme

I present this information as html via a custom widget. When a row is selected in the table widget the data in the html updates with the info in the currently selected row.

I’d like to put two buttons at the bottom of the html to “<< prev” and “next>>” to navigate to the previous or next row entry. Is there something in the api which will allow me to navigate to the next or previous row ?

2

of course. The widget is connected to the table. It fetches data from all the rows. You don´t need a specific API command to move between rows. That is pure Java Script

Do you want to show both the table and widget at the same time? But move in the table depending on the widget next/previous buttons? Connect the table widget to the custom widget.

image
image1396×574 53.2 KB

3 
<div id="meeting-view">
  <h2 id="theme"></h2>
  <p><strong>Date:</strong> <span id="date"></span></p>
  <p><strong>Time:</strong> <span id="time"></span></p>
  <p><strong>Speaker:</strong> <span id="speaker"></span></p>
  <div style="margin-top: 20px;">
    <button onclick="prev()">« Prev</button>
    <button onclick="next()">Next »</button>
  </div>
</div>


let records = [];
let currentIndex = 0;

function render() {
  if (!records.length) return;
  const record = records[currentIndex];
  document.getElementById("date").textContent = record.Date || '';
  document.getElementById("time").textContent = record.Time || '';
  document.getElementById("speaker").textContent = record.Speaker || '';
  document.getElementById("theme").textContent = record.Theme || '';
  grist.setCursorPos(currentIndex);  // Isso agora funcionará corretamente!
}

function prev() {
  if (currentIndex > 0) {
    currentIndex--;
    render();
  }
}

function next() {
  if (currentIndex < records.length - 1) {
    currentIndex++;
    render();
  }
}

grist.ready({ requiredAccess: 'read table', supportsCursor: true });

grist.onRecords((table) => {
  records = table;
  currentIndex = 0;
  render();
});