Vue Data Grid: Rendering 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
Returns the displayed
Returns the total number of displayed rows.
Get the index of the first displayed row due to scrolling (includes invisible rendered rows in the buffer).
Get the index of the last displayed row due to scrolling (includes invisible rendered rows in the buffer).
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.
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.