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
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.
In case you wish to globally style the locked rows, you can use the following CSS selectors:
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.