OLAP Grid – row number column

OLAP Grid – row number column

Posted by: mary431982 on 2 February 2026, 11:44 am EST

• 

  mary431982

  • Post Options:
  • Link
    Copy

  Posted 2 February 2026, 11:44 am EST

  Hello Wijmo Support,

  We are using the Wijmo OLAP Grid and would like to add a row number column as the first column of the grid.

  The row numbers should reflect the current visible rows (after grouping, sorting, filtering, expand/collapse).

  What is the recommended way to implement this in an OLAP Grid?
  
  A brief code example would be appreciated.

  Best regards,
  
  Mary

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 3 February 2026, 2:16 am EST

  Hi Mary,
  
  You can push an extra column in the rowHeaders panel of the pivotGrid and handle the formatItem event to assign the row numbers to the required cells. Please refer to the following sample demonstrating the same - https://jscodemine.mescius.io/share/8_xuc61_ikuAoYDE7PE64Q/
  
  Please note that the row number column will be added at the last index in the rowHeaders panel. It can’t be kept at the first index because that will conflict with the default cell formatting and cell merging in the grid, and could result in a distorted grid layout.
  
  Regards

• 

  mary431982

  • Post Options:
  • Link
    Copy

  Posted 3 February 2026, 1:26 pm EST

  Thank you!!

  It works!

  I used to that with the following and the formatItem, but we had some errors…
  
  const lPivotFieldRowNo = new PivotField(this.pivotEngine, ROW_NO_COLUMN_BINDING, ‘#’);
  
  lEngine.fields.push(lPivotFieldRowNo);
  
  lEngine.rowFields.push(lPivotFieldRowNo);

  I have just one more question - how to avoid row number for row Grand Total?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 4 February 2026, 5:00 am EST

  Hi Mary,
  
  In that case, you can use the ‘loadedRows’ event to assign a row number to each row and then use the formatItem event to show the row numbers on the required rows. You can refer to the following updated sample for the same - https://jscodemine.mescius.io/share/eUh6GsMqYEm2p5yNOFpfPw/
  
  Regards

• 

  mary431982

  • Post Options:
  • Link
    Copy

  Posted 4 February 2026, 6:52 am EST

  I have error msg: Property ‘rowCounter’ doesn’t exist on type ‘Row’…

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 4 February 2026, 8:51 am EST

  Hi Mary,
  
  This seems like a typescript error; you can set the ‘row’ type to any to resolve this issue. Please refer to the following updated code -

  loadedRows: (s, e) => {
              let idx = s.rowHeaders.columns.findIndex(c => c.binding == 'counterCol');
              if (idx == -1) {
                  s.rowHeaders.columns.push(new wjGrid.Column({ binding: 'counterCol', header: 'Row Count', width: 90, align: 'center' }))
              }
  
              // to assign a row number to each row
              let rowCounter = 0;
              // for typescript
              s.rows.forEach((row: any) => {
                  if (!row.rowCounter) {
                      let internalData = JSON.stringify(row._ubv).toLowerCase();
                      // use this if you want to remove row number from subtotal rows as well
                      // if (internalData.indexOf('subtotal') == -1 && internalData.indexOf('grand total') == -1) {
                      if (internalData.indexOf('grand total') == -1) {
                          row.rowCounter = ++rowCounter;
                      }
                  }
              })
          },
          // to add row numbers
          formatItem: (s, e) => {
              if (e.panel == s.rowHeaders) {
                  let col = e.getColumn();
                  let row = s.rows[e.row] as any;
  
                  if (col.binding == 'counterCol') {
                      e.cell.textContent = row.rowCounter;
                  }
              }
          }

  You can also use the following code in the previous sample we shared, if you only want to remove the row number from the grand total row, which is always the last row in the grid -

  formatItem: (s, e) => {
             if (e.panel == s.rowHeaders) {
                 let col = e.getColumn();
                 if (col.binding == 'counterCol' && e.row != s.rows.length-1) {
                     e.cell.textContent = e.row + 1;
                 }
             }
         }

  Regards