Full width header

Introduction

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 (
  <div style={{ width: "1200px", height: "200px" }}>
    <ReactGrid
      rows={rows}
      columns={columns}
      enableFullWidthHeader
      stickyTopRows={1}
    />
  </div>
);

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.