demo D232
Value diagnostics in React
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 React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.min.css">
<div id="app"></div>
<script type="module">
import React from 'https://esm.sh/react@18';
import { createRoot } from 'https://esm.sh/react-dom@18/client';
import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.esm.min.js';
import { createLatticeReact } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/modules/react.esm.min.js';
const { LatticeGrid } = createLatticeReact({ React, createGrid });
const columns = [
{ field: 'setting', title: 'Setting', layout: { width: 150, pin: 'start' } },
{ field: 'given', title: 'Given', layout: { width: 130 } },
];
const rows = [/* the probes: setting, given */];
function App() {
const [report, setReport] = React.useState('');
const onGridReady = (grid) => {
// grid.diagnostics.warnings() returns everything the grid flagged,
// newest first, each with a stable id a support conversation can name.
const text = grid.diagnostics.warnings().map((w) => w.id + ': ' + w.message).join('
') || 'Nothing flagged.';
setReport(text);
};
return (
<>
{/* 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. */}
<LatticeGrid rowKey="id" density="roomy" selection="lots" columns={columns} rows={rows} onGridReady={onGridReady} style={{ height: '300px' }} />
<pre style={{ marginTop: '12px', font: '12px ui-monospace, monospace' }}>{report}</pre>
</>
);
}
createRoot(document.getElementById('app')).render(<App />);
</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.