Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

React Data GridRendering API

Displayed rows are rows that the grid tries to render. For example, if you have a group that is closed, the children of that group will not appear in the displayed rows. The grid renders the displayed rows onto the screen.

The displayed rows have indexes. For example, if the grid is rendering 20 rows, then will have indexes 0 to 19.

You can look up the rows by index. This is dependent on anything that changes the index. For example, if you apply a sort or filter, then the rows and corresponding indexes will change.

Displayed Rows API

getDisplayedRowAtIndex
Function
Returns the displayed RowNode at the given index. 
getDisplayedRowAtIndex = (index: number) => IRowNode<TData> | undefined;
getDisplayedRowCount
Function
Returns the total number of displayed rows. 
getDisplayedRowCount = () => number;
getFirstDisplayedRow
Function
Get the index of the first displayed row due to scrolling (includes invisible rendered rows in the buffer). 
getFirstDisplayedRow = () => number;
getLastDisplayedRow
Function
Get the index of the last displayed row due to scrolling (includes invisible rendered rows in the buffer). 
getLastDisplayedRow = () => number;

Accessing Displayed Rows Example

The example below demonstrates the following:

  • Get Displayed Row 0: Returns back the first row in the grid. This is not impacted by what page you are one, eg if you navigate to the second page, this method will still return the first row on the first page. If you sort, the first row will be changed.
  • Get Displayed Row Count: Returns back the total number of rows across all pages. If you filter, this number will change accordingly.
  • Print All Displayed Rows: Demonstrates looping through all rows on the screen across all pages.
  • Print Page Displayed Rows: Demonstrates looping through all rows on the screen on one page.

Displayed Rows & Grouping

When grouping, displayed rows are those rows that are currently visible with regards the the open / closed state of the parent rows.

In the example below getDisplayedRowCount() will return back 7. This is composed of 5 top level 'Language' rows and two second level 'Country' rows. Each of the 7 displayed rows will have a row index from 0 to 6. All rows not displayed (as they are contained within closed groups) are not displayed and do not have a row index.

Row Groups

Displayed Rows & Loading

If using Server-Side Row Model or Infinite Row Model, the getDisplayedRowCount() will include the 'loading rows'. This is because Displayed Rows are a concern of the grid's rendering engine and not the underlying data. As far as the rendering engine is concerned, the 'loading row' is just another row to render.

For example, calling getDisplayedRowCount() below will return 5 as there are 4 normal rows and 1 loading row.

Server Side Loading