Locked Rows

The grid supports locking rows at the top of the grid. This is useful when you want to display a summary row at the top of the grid. To lock rows, set the lockedDataProvider prop of the GridOptions interface.

Locked Rows

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("annualSalary", "currency", "Annual Salary"), ]; return ( <ReactDataGrid style={{ height: "600px", width: "100%", backgroundColor: "white" }} gridOptions={{ cellStyleFunction: (node) => { if (node.rowPosition.type === RowType.LockedBody) { return { backgroundColor: "lightgray" }; } return {}; }, lockedDataProvider: [ { employeeId: "Median", annualSalary: 75000, }, { employeeId: "Average", annualSalary: 50000, }, { employeeId: "Total", annualSalary: 1000000, } ], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFilters:false, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("annualSalary", "currency", "Annual Salary"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "600px", width: "100%", backgroundColor: "white" }}
      gridOptions={{
        cellStyleFunction: (node) => {
          if (node.rowPosition.type === RowType.LockedBody) {
            return { backgroundColor: "lightgray" };
          }
          return {};
        },
        lockedDataProvider: [
            {
                employeeId: "Median",
                annualSalary: 75000,
            },
            {
                employeeId: "Average",
                annualSalary: 50000,
            },
            {
                employeeId: "Total",
                annualSalary: 1000000,
            }
        ],
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFilters:false,
      }}
    />
  );
}

Result

Loading...

In the example above, we set the cellStyleFunction prop of the GridOptions interface to set the background color of the locked rows to light gray. This is useful when you want to visually distinguish the locked rows from the body rows.

CSS Customization

In case you wish to globally style the locked rows, you can use the following CSS selectors:

.ezgrid-dg-lockedbody-cell{
    background-color: lightgray;
}

Tip

When you modify css classes, please create a new css file and import it in your application after importing the datagrid css file. This will ensure that your css overrides do not get overwritten by future updates.