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. 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. Update Person interface and then 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.

interface Person {
    name: string;
    surname: string;
    birth: Date | undefined;    mobile: number;    company: string;    occupation: string;}

const getPeople = (): Person[] => [
    {
        name: "Thomas",
        surname: "Goldman",
        birth: new Date("1970-12-02"),        mobile: 574839457,        company: "Snatia Ebereum",        occupation: "CEO"    },
    {
        name: "Mathew Lawrence",
        surname: "Joshua",
        birth: new Date("1943-12-02"),        mobile: 684739283,        company: "De-Jaiz Mens Clothing",        occupation: "Technical recruiter"    },
    {
        name: "Susie Evelyn",
        surname: "Spencer",
        birth: new Date("1976-01-23"),        mobile: 684739283,        company: "Harold Powell",        occupation: "Concrete paving machine operator"    },
    {
        name: "",
        surname: "",
        birth: undefined,        mobile: NaN,        company: "",        occupation: ""    }
];

const getColumns = (): 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: 230 }];

  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