demo D109
Redaction
Masking values a viewer must not see
grid.redaction
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 540px"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
selection: 'multiple',
toolPanel: {
side: 'left',
panels: ['columns', 'filters', 'views', 'quick'],
actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
exportName: 'lattice-demo',
},
// Redaction is grid state, which is why it can be seeded here at all: it
// travels in a saved view and undoes like any other change rather than being
// a switch outside the model.
state: { version: 1, redaction: ['monthlyCost', 'budget'] },
columns: [
{ field: 'service', title: 'Service', layout: { pin: 'start', width: 160 } },
{ field: 'team', title: 'Team', filter: { type: 'set' } },
{ field: 'owner', title: 'Owner', filter: { type: 'set' } },
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'headcount', title: 'Headcount', type: 'number', total: 'sum' },
{ field: 'monthlyCost', title: 'Monthly cost', type: 'number', format: { style: 'currency', currency: 'USD' }, total: 'sum' },
{ field: 'budget', title: 'Budget', type: 'number', format: { style: 'currency', currency: 'USD' }, total: 'sum' },
],
rows, // service records
});
</script>Masking values a viewer must not see
Redaction hides the contents of specific cells from a viewer while leaving the row and column structure intact, so a support agent can scan customer records without ever rendering the card number or national insurance number underneath the mask. It sits below permissions in the access model: permissions decide whether a role can see a column at all, while redaction handles the case where a role can see that a value exists but not the value itself. A developer reaches for it wherever regulation or internal policy demands that data be visible to some sessions and masked for others without shipping two different views of the same JavaScript data grid. Lattice Grid exposes this through grid.redaction, which a host wires to its own entitlement check per cell so the masking decision is made once per render pass rather than recomputed on every scroll event. Masked cells still occupy their row height and column width, so a viewer’s layout does not shift when a value is hidden, and screen readers announce the mask state rather than reading a blank cell as empty data. Because the check runs against the currently rendered viewport, applying or lifting a redaction rule across thousands of rows costs a lookup per visible cell, not a pass over every record in the grid.
How do you mask sensitive data in a JavaScript data grid?
Data masking in Lattice Grid runs through grid.redaction, which a host application uses to mark specific cells as hidden from the current session based on its own entitlement logic. The grid renders a mask in place of the value, preserves the row and column layout, and reports the mask state to assistive technology, so a viewer without clearance sees that a field exists without ever receiving its contents.