Barcode Cells in a Data Grid: Code 128, EAN-13 and Data Matrix From the Cell Value

Every warehouse, lab and field-service application ends up with the same split. The data grid shows the SKU as text. Somewhere else there is a label screen that turns the same SKU into a barcode with a separate library. Two renderings of one value, maintained in two places, and sooner or later they drift.

Lattice Grid now draws the code itself. Set a column’s cell renderer to barcode, choose the symbology, and the cell’s own value becomes the bars.

{ field: 'sku', title: 'SKU', cell: { render: 'barcode', props: { type: 'code128', height: 34 } } }
{ field: 'ean', title: 'Retail code', cell: { render: 'barcode', props: { type: 'ean13' } } }
{ field: 'serial', title: 'Serial', cell: { render: 'barcode', props: { type: 'datamatrix', moduleWidth: 2 } } }

Ordinary cells, not images

Each symbol is inline SVG produced by the grid’s own encoder, so there is no extra library, no canvas and no image service. It scales cleanly on a high-density screen and prints sharp. Because the barcode is a renderer on an ordinary column, everything the grid does with any other column still applies: sorting and filtering on the underlying value, virtual scrolling through a long parts list, selection, export, and live updates when the value changes.

A parts list makes the point. The SKU column is Code 128, the retail code is EAN-13 and the serial is a Data Matrix, all from plain string values in the rows. The text line under a linear code is drawn by the renderer too, so the human-readable value and the scannable one can never disagree.

Thirteen symbologies and a safety rule

The encoders cover Code 39 and Code 39 Extended, Code 93 and Code 93 Extended, Code 128 with automatic subset selection, Code 11, Codabar, Code 32, EAN-13, EAN-8, UPC-A, UPC-E and Data Matrix (ECC 200), alongside the existing QR code. Check digits are computed for the symbologies that carry one.

A value that cannot encode correctly, through a bad character, the wrong length or a failed check digit, is never drawn as a code that would scan wrong. The cell shows a placeholder and the console says why, once. A label that looks right but scans as a different part is worse than no label, so the renderer refuses rather than guesses.

Three surfaces

The same encoders are available as a form display control, bound to the form item’s own value or to another item’s, and as a standalone call for drawing one symbol anywhere on a page, such as a printed label or a packing slip. One renderer, one encoder, one value, wherever the code has to appear.