Full-Row Cells

Enterprise

Introduction

A full-width row is drawn as one cell that spans the entire content width — every column — instead of the usual per-column cells. It’s how you drop a group header, a detail panel, a call-to-action, or any embedded content into the flow of the grid without inventing a fake column. The rest of the rows render normally and scroll around it.

How it works

Full-width rows ship in @zengrid/enterprise. You hand the grid a provider through the fullWidthProvider option via fullWidthRows():

import { fullWidthRows } from '@zengrid/enterprise/grid';

const grid = new Zengrid(el, {
  fullWidthProvider: fullWidthRows({
    // Decide which rows go full-width. Return true → the row spans all columns.
    isFullWidth: ({ data }) => data[0] === '__group__',
    // Produce the cell's content — an HTML string or an element.
    render: ({ data }) => `<strong>${data[1]}</strong>`,
    // Optional class/style on the full-width cell (static or a per-row callback).
    cellClass: 'group-banner',
    cellStyle: { backgroundColor: '#1f2937', color: '#fff' },
  }),
  columns: [/* … */],
});

For each visible row the grid asks isFullWidth. When it returns true the row’s per-column cells are skipped and a single cell is drawn from the row’s left edge to the right edge of the last column, painted by render plus any cellClass / cellStyle. The callbacks receive { row, data } — the display index and that row’s record — so what a row shows can be driven entirely by its own data.

Callbacks and customization

• isFullWidth({ row, data }) — the only required option. Cheap and pure; it’s consulted per visible row each render pass.
• render({ row, data }) — return a string (set as HTML) or an HTMLElement (appended as-is, so you can wire up your own DOM). Omit it and the cell falls back to the row’s first value as text.
• cellClass — a class string/array, or a ({ row, data }) => … callback for data-driven classes.
• cellStyle — inline styles (camelCase or kebab-case keys; custom properties pass through), static or a callback.

Row height

A full-width row uses its row height like any other row. For a taller detail panel, give the grid a rowHeight array and make the detail rows taller — the full-width cell grows to fill it.

Try it live

Each tab is a different use of full-width rows. Edit the snippet — change which rows go full-width, or what they render — and the grid re-renders.

Group headersDetail panelsData-driven style

CodeDemoSplit

ResetRun ⌘⏎

isFullWidth spots the group-header rows (sentinel in slot 0) and render() draws the banner. Change a department name or add a person and re-run.

Notes

• Full-width rows are decided per render pass. isFullWidth runs for each visible row; make it cheap. Because it reads the row’s data, which rows are full-width can change live — swap the data and the grid re-evaluates.
• The cell spans the content width. It runs from the first column’s left edge to the last column’s right edge and scrolls horizontally with the body, so keep the total column width within the viewport if you want the content always in view (as these demos do).
• render owns the content. Return a string (set as HTML) or an element (appended). The provider reuses one renderer instance across all full-width rows, so there’s no per-row churn.
• Height comes from the row. Use a rowHeight array to make specific full-width rows taller (see the detail-panel tab).

Next

• Row Data — supply the rows, including the ones you mark full-width.
• Styling Rows — style whole normal rows across every cell.
• Row Pinning — keep summary rows fixed in a band.