developer guide
Two-Line Cells in a JavaScript Data Grid
A two-line cell carries the main value and its supporting detail in the same column, which keeps a wide record readable in a narrow space. Give the rows the height to show both, through rowHeight or a roomier density.
Developer guide › Columns and cell rendering › Two-Line Cells in a JavaScript Data Grid
Two-line cells
A bold primary line over a quieter secondary one, taken from a second property of the same row. A name over an email, a title over a category, a company over its sector.
Naming the second line
{ field: 'name', cell: { render: 'twoline', props: { secondary: 'email' } } }
// a dot path reaches a nested field without a callback
{ field: 'name', cell: { render: 'twoline', props: { secondary: 'contact.email' } } }
// a function for anything the row does not already hold
{ field: 'name', cell: { render: 'twoline', props: {
secondary: (p) => `${p.data.city}, ${p.data.country}`,
} } }
// `format` decorates whatever `secondary` produced
props: { secondary: 'user', format: (v) => v ? `User: ${v}` : '' }It needs the room. Two lines do not fit in a 28px row. Pair it with
density: 'comfortable' or 'spacious', or a rowHeight
of 40 or more. Nothing stops you using it in a shorter row; the second line is simply
clipped.
The second line reads the row's data, not another column. It is usually a field nobody wants a column of, and requiring one would mean declaring a column purely to hide it. A path that does not resolve leaves the line empty rather than throwing, and a cell with no second line collapses to one centred line rather than leaving a gap.
Both lines truncate; neither wraps. A wrapped second line would change the row height, and in a fixed-height grid that means being cut off mid-descender instead. The accessible name carries both lines as one string, so a screen reader gets the half of the cell that disambiguates the first.