bvaughn/react-virtualized · warning

Rendered cell should include style property for positioning.

Error message

Rendered cell should include style property for positioning.

What it means

Grid's default cell range renderer warns (once per Grid instance) when a cell rendered by `cellRenderer` has no `style` prop. Grid positions cells absolutely via the injected `style`; without it cells overlap at the top-left corner and scrolling breaks visually. The check triggers only in development and only the first time.

Source

Thrown at source/Grid/defaultCellRangeRenderer.js:170

function warnAboutMissingStyle(parent, renderedCell) {
  if (process.env.NODE_ENV !== 'production') {
    if (renderedCell) {
      // If the direct child is a CellMeasurer, then we should check its child
      // See issue #611
      if (renderedCell.type && renderedCell.type.__internalCellMeasurerFlag) {
        renderedCell = renderedCell.props.children;
      }

      if (
        renderedCell &&
        renderedCell.props &&
        renderedCell.props.style === undefined &&
        parent.__warnedAboutMissingStyle !== true
      ) {
        parent.__warnedAboutMissingStyle = true;

        console.warn(
          'Rendered cell should include style property for positioning.',
        );
      }
    }
  }
}

View on GitHub (pinned to c737715486)

Solutions

1. Spread the injected `style` onto the outermost element your cellRenderer returns.
2. If using a wrapper component, forward the style to the DOM element it renders.
3. Ensure `key` and `style` props passed to cellRenderer are applied, not ignored.

Example fix

// before
cellRenderer={({key, style}) => <div key={key}>{cell}</div>}

// after
cellRenderer={({key, style}) => <div key={key} style={style}>{cell}</div>}

const safeCellRenderer = (props) => {
  if (!props.style) console.warn('cellRenderer dropped style for index', props.index);
  return <div {...props}>{renderCell(props)}</div>;
};

When it happens

Trigger: A custom `cellRenderer` that builds its own JSX and omits `{...style}` or `style`; destructuring the cellRenderer props and dropping `style`; a cellRenderer that returns a fragment or wrapper that doesn't apply the style to the outermost rendered element.

Common situations: Custom cell renderers for formatting (badges, links) that recreate the container div; migrating cellRenderers between react-virtualized components; forgetting spread of remaining props.

Related errors

• Fixed height CellMeasurerCache should specify a :defaultHeig
• Fixed width CellMeasurerCache should specify a :defaultWidth
• Invalid metadata returned for cell ${index}: x:${cel
• Unexpected child type registered; only Grid/MultiGrid childr
• Requested index ${index} is outside of range 0..${this._cell

AI-assisted analysis of bvaughn/react-virtualized@c737715486 (2026-08-30). Data as JSON: /api/errors/b04eb581116c1247. Report an issue: GitHub.