Suggestion for docs/examples: Non-sorting row index

[BilboBaagins]

Hey @glin,

Thanks for a great package!

Not sure if this is detailed somewhere, but I couldn't easily find it. I think this may be useful for others to know, and possibly worthwhile adding as an example to the docs.

I have a large table with a fixed height that is scrollable. I wanted to have a row counter to give me context of where I am during scroll, and also a way of knowing the total number of records (disappears when you turn off pagination to get the scroll working).

I realised after reading through the docs that I could use cellInfo.viewIndex for this purpose. It seems to work nicely for my use case, so I thought I'd share it.

The 1:n row counter isn't affected by sorting other columns, while the number of records updates dynamically as you filter our records.

library(reactable)

data <- cbind(Row = NA, iris)

reactable(
  data,
  pagination = FALSE,
  height = "calc(100vh - 315px)",
  filterable = TRUE,
  columns = list(
    Row = colDef(
      name = "",
      sortable = FALSE,
      filterable = FALSE,
      minWidth = 120,
      cell = JS("
        function(cellInfo) {
          return '<span style=\"color: #808080;\">' + 
                   (cellInfo.viewIndex + 1) + 
                 '</span>'
        }
      "),
      footer = JS("
        function(colInfo) {
          const total = colInfo.data.length
          return '<span style=\"color: #808080; font-weight: 500;\">' + 
                   'No. Rows: ' + total + 
                 '</span>'
        }
      "),
      html = TRUE,
      align = 'center'
    )
  )
)

[glin]

Hey @BilboBaagins, thanks for the suggestions. I like it, viewIndex is used for a handful of examples but nothing like this, so I'll see if there's a good place to slot a similar example in.

For pagination, you can also force-show pagination using reactable(..., pagination = FALSE, showPagination = TRUE). Again, that probably deserves its own example or callout under the no pagination section.