Lattice Grid Buy a licence

demo D42

Two-line cells

A primary value with a caption beneath, at full row density

render: 'twoline'

Building…
Loading a live grid…

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',
    // Two lines do not fit a 28px row. Without the density this renderer
    // draws a cell with its second line cut off, which is worse than one
    // line would have been.
    density: 'comfortable',
    selection: 'multiple',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo',
    },
    columns: [
      { field: 'owner', title: 'Owner', layout: { pin: 'start', width: 240 },
        cell: { render: 'twoline', props: { secondary: 'email' } } },
      { field: 'service', title: 'Service', layout: { width: 220 },
        cell: { render: 'twoline', props: { secondary: 'region' } } },
      // `format` decorates the second line, so the caption can say what the
      // number is rather than just repeating it.
      { field: 'team', title: 'Team', layout: { width: 210 },
        cell: { render: 'twoline', props: { secondary: 'cost', format: (v) => `$${Math.round(Number(v)).toLocaleString('en-GB')} a month` } } },
      { field: 'status', title: 'Status', layout: { width: 130 },
        cell: { render: 'pill', props: { variant: {
          map: { healthy: 'success', degraded: 'warning', failing: 'danger' },
          default: 'neutral',
        } } } },
      { field: 'price', title: 'Rate', type: 'number', layout: { width: 130 },
        format: { style: 'currency', currency: 'USD', decimals: 2 } },
    ],
    rows,  // rendering demo rows
  });
</script>

Stacking a primary value and caption in one cell

Two-line cells give a column a primary value and a secondary caption without giving up row density: a name over an email address, a ticket title over its reference number, a metric over its unit. Lattice Grid renders this with render: 'twoline', which draws both lines inside the standard row height rather than doubling it, so a table pairing identifiers with detail keeps the same scan rate as a single-line grid. Most JavaScript data grid libraries handle this pairing by doubling row height across the table or by hand-building a custom cell template per column; twoline keeps the row height fixed and applies the split only where needed, so a dense operational table can mix single-line numeric columns with two-line identity columns in one view. The caption line renders at reduced weight and a lower-contrast colour token from the active theme, so the hierarchy between primary and secondary text holds under both light and dark themes without a per-column override. Because the split is a render mode rather than a second DOM row, it costs nothing extra in layout: the cell still occupies one row slot in the grid’s virtual scrolling, so a 50,000-row list of two-line cells scrolls at the same rate as one of plain text, with only rows in the viewport ever mounted.

How do you show two lines of text in one grid cell?

Set render: 'twoline' on the column and supply a primary value plus a caption for each row. Lattice Grid draws the caption beneath the primary value inside the existing row height, using a lower-contrast style from the active theme, so identity or detail pairs such as name and email stay on one row without increasing the height of every row in the table.

Related demos