Format data using the `formattext` event

Two events run for every cell's text. formattext fires first, before the text is measured and wrapped: change e.cell.formattedValue here to control what is drawn. rendertext fires afterwards, right before the text is painted: change e.ctx (fill style, font) here to control how it is drawn, or call e.preventDefault() to draw the text yourself. Setting formattedValue inside rendertext is too late, which is why this example uses formattext.

import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data,
  schema: [
    { name: 'col1' },
    {
      name: 'col2',
      type: 'date',
    },
    { name: 'col3' },
  ],
});

grid.addEventListener('formattext', function (e) {
  if (e.cell.rowIndex > -1 && e.cell.header.name === 'col2') {
    const date = new Date(e.cell.value);
    if (!Number.isNaN(date.getTime())) {
      e.cell.formattedValue = date.toISOString();
    }
  }
});

app.append(gridElement);