Skip to content

Suggestion for docs/examples: Non-sorting row index #420

@BilboBaagins

Description

@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'
    )
  )
)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions