Sticky rows and columns

Introduction

ReactGrid allows you to stick chosen rows and columns at the top or left side and additionally on the right and at the bottom of the ReactGrid viewport only in PRO version. Sticky rows or columns will be visible at all times, no matter what the scroll position is.

Sticky rows and columns can be enabled by adding dedicated ReactGrid component properties:

  • stickyTopRows

  • stickyBottomRows

  • stickyLeftColumns

  • stickyRightColumns

All of these properties are numeric and determine the number of columns or rows sticky next to the grid’s edges.

How to make columns and rows sticky?

This guide is based on getting started .

  1. Add some more data to the table, so that it’s more likely for a scrollbar to appear or reduce the height of the grid container

const [columns] = React.useState<Column[]>(() => [
  { columnId: "Name", width: 150 },
  { columnId: "Surname", width: 100 },
  { columnId: "Birth Data", width: 100 },  { columnId: "Phone", width: 100 },  { columnId: "Company", width: 150 },  { columnId: "Occupation", width: 250 }]);
const [rows, setRows] = React.useState<Row[]>(() => [
  {
    rowId: 0,
    cells: [
      { type: "header", text: "Name" },
      { type: "header", text: "Surname" },
      { type: "header", text: "Birth Data" },      { type: "header", text: "Phone" },      { type: "header", text: "Company" },      { type: "header", text: "Occupation" }    ]
  },
  {
    rowId: 1,
    cells: [
      { type: "text", text: "Thomas Anthony" },
      { type: "text", text: "Goldman" },
      { type: "date", date: new Date("1989-04-01") },      { type: "number", value: 293827394 },      { type: "text", text: "Electronic Geek" },      { type: "text", text: "Textile and furnishings occupation" }    ]
  },
  {
    rowId: 2,
    cells: [
      { type: "text", text: "Susie Evelyn" },
      { type: "text", text: "Spencer" },
      { type: "date", date: new Date("1970-12-02") },      { type: "number", value: 684739283 },      { type: "text", text: "Harold Powell" },      { type: "text", text: "Concrete paving machine operator" }    ]
  },
  {
    rowId: 3,
    cells: [
      { type: "text", text: "Mathew Lawrence" },
      { type: "text", text: "Joshua" },
      { type: "date", date: new Date("1970-12-02") },      { type: "number", value: 684739283 },      { type: "text", text: "De-Jaiz Mens Clothing" },      { type: "text", text: "Technical recruiter" }    ]
  },
  {
    rowId: 4,
    cells: [
      { type: "text", text: "" },
      { type: "text", text: "" },
      { type: "date", date: undefined },      { type: "number", value: NaN },      { type: "text", text: "" },      { type: "text", text: "" }    ]
  }
]);

  1. Use the properties mentioned in the introduction to set the number of sticky ranges at each edge

return (
	<ReactGrid
		rows={rows}
		columns={columns}
		stickyLeftColumns={1}		stickyRightColumns={1}		stickyTopRows={1}		stickyBottomRows={1}	/>
);

Result

Here’s how sticky rows and columns look in action (we recommend playing with this demo in the fullscreen mode):

Sticky live demo

Prev:

Column and row reordering

Next:

Selections