Render speed

Source of demo: fps/run.astro.

const rowCount = 10;
const columnCount = 10;
const bodyData =
  Array.from(Array(rowCount).keys()).map((r) =>
    Array.from(Array(columnCount).keys()).map((c) => 0)
  );
const headerData = [Array.from(Array(columnCount).keys()).map((c) => String.fromCharCode(97 + c))];
const footerData = [Array.from(Array(columnCount).keys()).map((c) => String.fromCharCode(97 + c))];
const tableOptions = new TableOptions();

const tableModel = TableFactory.createTableModel({
  headerData,
  bodyData,
  footerData,
  overridingColumnWidth: cellWidth
});

Updating table cells

function sendUpdateTableModelEvents() {
  count++;
  x = x + 1;
  if (x === columnCount) {
    x = 0;
    y = y + 1;
    if (y === rowCount) {
      y = 0;
      val = val===1 ? -1 : 1;
      oddTick = !oddTick;
    }
  }

  if (count > 120) {
    const now = Date.now();
    const deltaTime = now - lastTick;
    eleOut.innerText = `${Math.round(10*count / deltaTime * 1000)/10} fps`;
    lastTick = now;
    count = 0;
  }

  const cssClasses = {
    'bg-green-0': val === 1 && !oddTick,
    'bg-green-1': val === 1 && oddTick,
    'bg-red-0': val === -1 && !oddTick,
    'bg-red-1': val === -1 && oddTick,
  };
  tableApi.updateCells([new TableCellUpdateEvent('body', y, x, val, cssClasses)]); // <- sending update event

  requestAnimationFrame(() => sendUpdateTableModelEvents());
}