demo D232
Value diagnostics in ESM
A setting the grid cannot use, named on the spot instead of ignored
grid.diagnostics.warnings
This names a configuration value the grid cannot use the moment it meets one, rather than silently ignoring it. It surfaces a mistyped option while you are building, so a feature never quietly fails to work because a setting was wrong.
This is the ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.min.css">
<div id="grid" style="height: 300px"></div>
<pre id="report" style="margin-top: 12px; font: 12px ui-monospace, monospace"></pre>
<script type="module">
import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.esm.min.js';
const grid = createGrid(document.getElementById('grid'), {
rowKey: 'id',
// Two settings this grid cannot use: each names a value the option does not
// accept, so each is reported and the safe default is used instead.
density: 'roomy',
selection: 'lots',
columns: [
{ field: 'setting', title: 'Setting', layout: { width: 150, pin: 'start' } },
{ field: 'given', title: 'Given', layout: { width: 130 } },
],
rows, // the probes: setting, given
});
// grid.diagnostics.warnings() returns everything the grid flagged, newest
// first, each with a stable id a support conversation can name. A value it
// understood carries none, so the absence of a warning is the all-clear.
const report = document.getElementById('report');
report.textContent = grid.diagnostics.warnings()
.map((w) => w.id + ': ' + w.message)
.join('\n') || 'Nothing flagged.';
</script>Catching a setting the grid could not use
Value diagnostics tells you the moment a configuration value is one the grid cannot use, so a mistyped option or a wrong type surfaces while you are building rather than turning up later as a feature that quietly never worked. A value the grid does not understand no longer disappears without a word: the grid names the setting, says what it expected, shows the value it saw, and carries on with the safe default so the grid still renders. A developer reaches for this after wiring up a grid that looks almost right, when a colour scheme did not take, a mode that should be on appears to do nothing, or a value pasted from another config never had any effect. Lattice Grid surfaces each finding on grid.diagnostics.warnings() and in the console, one entry per setting, each naming the option and carrying a plain description of what was wrong. A value the grid understands raises nothing at all: the check is deliberately conservative, so a correct grid stays completely silent and a warning always means a real setting to fix. The demo builds a grid carrying two values it cannot use and reports, live and in your own browser, exactly what the grid said about each one, beside a setting that is correct and stays silent.
How do I find out why a grid setting is being ignored?
Read grid.diagnostics.warnings() for any entry naming that setting. When a configuration value is one the option cannot accept, Lattice Grid reports it by name with a plain description of what it expected and the value it received, in the console and on the diagnostics API, then falls back to the safe default so the grid keeps rendering. A setting that raises no warning is one the grid understood and is using, so the absence of a warning is itself the answer.