# Barcode cells in a Svelte data grid (EAN-13) Render a real, scannable EAN-13 barcode in every row of your Svelte data grid - drawn as crisp SVG with no canvas, no `eval`, and no third-party dependency. This is the retail, warehouse, and inventory pattern: a product table where each row carries its own barcode label, sharp at any zoom and ready to print. > Live demo: Barcode label cells (EAN-13) - https://svgrid.com/demos/112-barcode-cells/ ## When to use it - Product catalogs, inventory, and stock-keeping grids (UPC / EAN). - Warehouse pick lists, shelf labels, and asset tags. - Any grid where a row maps to a physical item that needs a barcode. ## How it works A barcode is a pure function from a code to a set of bars. Encode the 13-digit value once, then render the bars as SVG through `renderSnippet` - the same way you would render any custom cell. Because it is SVG (not a canvas bitmap) it stays crisp when zoomed, themes with the grid, prints perfectly, and keeps your CSP-clean runtime intact. The examples on this page run against these rows: ```svelte ``` ```svelte {#snippet BarcodeCell(props: { code: string })} {@const bc = encode(props.code)} {/snippet} ``` Notes that matter in production: - **It scans.** EAN-13 uses three 7-module digit encodings (L / G / R) plus a parity table that lets the first digit ride along in the parity of the left group. The check digit is mod-10. Point a phone scanner at the screen to confirm. - **No dependency, CSP-clean.** The bars are Svelte SVG rects - no `eval`, no `new Function`, no canvas. Keep the encoder out of your shared bundle if only a few grids need it. - **Virtualization keeps it cheap.** Only the barcodes in the visible row window are ever in the DOM, so it scales to thousands of products. See [Cell components](https://svgrid.com/docs/help/cells/cell-components/) for the rendering model. ## Print-ready labels Because every code is SVG, the same markup scales to a shelf label or asset tag and prints razor-sharp. The [demo](https://svgrid.com/demos/112-barcode-cells/) pops a label preview on row click; pair it with the [Enterprise print / export pack](https://svgrid.com/docs/help/export/) to generate pick lists or label sheets from the grid. ## What about QR codes? QR codes follow the same cell-renderer pattern, but a correct QR encoder needs Reed-Solomon error correction and mask selection, so reach for a small library (for example `qrcode`) rather than hand-rolling it, then render its SVG output through `renderSnippet` exactly as above. ## Frequently asked questions ### Can SvGrid render barcodes in a data grid cell? Yes. A column's `cell` renderer can return any Svelte markup, including an inline SVG barcode. The example above renders a scannable EAN-13 per row with no third-party library. ### Does rendering barcodes need a barcode library? No, not for EAN-13 / UPC and other linear symbologies - the encoder is a small pure function and the bars are SVG rects. QR codes are the exception: use a library for the Reed-Solomon error correction. ### Will the rendered barcodes actually scan? Yes. The encoder implements the GS1 EAN-13 specification (L/G/R digit encodings, the first-digit parity table, and the mod-10 check digit), so a standard barcode reader decodes it. ### Is it fast with thousands of rows? Yes. The grid virtualizes rows, so only the barcodes in the visible window are in the DOM regardless of how many products the grid holds. ## Try it A barcode is a cell renderer like any other. The bars here are drawn from the value so the example runs without a font or a library - swap them for your encoder and nothing else changes. ```svelte {#snippet Barcode(props: { row: Person })} {#each bars(props.row.id) as w} {/each} {String(props.row.id).padStart(6, '0')} {/snippet} renderSnippet(Barcode, { row: ctx.row.original }) }, ] satisfies GridColumns} rowHeight={38} /> ``` ## See also - [Demo 112-barcode-cells source](https://github.com/sv-grid/sv-grid/blob/main/examples/src/demos/112-barcode-cells.svelte) - [Cell components](https://svgrid.com/docs/help/cells/cell-components/) - the custom-cell rendering model - [Sparkline cell renderer](https://svgrid.com/docs/recipes/sparkline-cells/) - the same SVG-in-a-cell pattern - [Data export and printing - Enterprise](https://svgrid.com/docs/help/export/) - print labels and pick lists - [Recipes index](https://github.com/sv-grid/sv-grid/blob/main/docs/recipes/index.md) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/recipes/barcode-cells/ . All docs: https://svgrid.com/llms.txt