How can i remove the item count in parenthesis of the group header in the GroupedList example?

[Hackerdaniel2012]

I have the same problem as in this post: https://stackoverflow.com/questions/52427192/how-to-customize-the-header-in-groupedlist-component-in-react-ui-fabric-library but i only need to remove the item count from the header. The change to the JS functions is already shown there i just dont know how to add this into shiny. I would appreciate any help. Thanks :)

[jakubsob]

Hi @Hackerdaniel2012,

please take a look at the following example:

library(shiny)
library(shiny.fluent)

ui <- fluentPage(
  GroupedList(
    items = list("Item A", "Item B", "Item C", "Item D", "Item E"),
    groups = list(
      list(key = "g1", name = "Some items", startIndex = 0, count = 2),
      list(key = "g2", name = "More items", startIndex = 2, count = 3)
    ),
    selectionMode = 0,
    onRenderCell = JS(
      "(depth, item) => (
        jsmodule['react'].createElement('span', { style: { paddingLeft: 50 } }, item)
      )"
    ),
    groupProps = list(
      onRenderHeader = JS(
        "(props) => (
          jsmodule['react'].createElement(
            jsmodule['@fluentui/react'].GroupHeader,
            { ...props, styles: { headerCount: { display: 'none' } } },
            props
          )
        )"
      )
    )
  )
)

server <- function(input, output) { }

shinyApp(ui, server)

I'm using groupProps to pass custom onRenderHeader function which creates a GroupHeader with custom style that removes headerCount. Does this example solve your problem? If it does, please mark this comment as an answer ;)

[Hackerdaniel2012]

Thanks a lot! :)