🎉 ReactGrid 5.0 is released. Read more →
Introduction
3.0
Implementing core features
Full width header

Introduction

💡

Full width header feature is experimental and it can be changed in the future

This feature extends width of top sticky pane to full available space inside ReactGrid's parent.

Usage

  1. Add enableFullWidthHeader property to ReactGrid component and add any number of stickyTopRows. In our example, the sample ReactGrid component was also wrapped inside a div element that is wider than all columns.
return (
    <ReactGrid
      rows={rows}
      columns={columns}
      enableFullWidthHeader // highlight-line
      stickyTopRows={1}  // highlight-line
    />
);

Issues

  • If the width of ReactGrid's parent is less then the sum of all the columns (including left sticky), there might be bugs
  • enabling right and bottom sticky panes can cause bugs related with scrolling, ranges selection etc.
Focus managementGroup Id