DetailsList column alligment

[ugurdar]

I try to formatting detailslist in Shiny Fluent. For example, except first column I want to make columns right alligment. Also, I try to add comma separator for thousands and % as prefix for first column.

Any idea?

[jakubsob]

Hi @ugurdar,

Please take a look at the following example, you can use onRenderItemColumn callback create custom render function for rendering columns:

library(shiny.fluent)
library(shiny)

items <- list(
  list(
    key = "1",
    name = "Mark",
    number = "2"
  ),
  list(
    key = "2",
    name = "Josh",
    number = "1"
  )
)

columns <- list(
  list(
    key = "name",
    fieldName = "name",
    name = "Name"
  ),
  list(
    key = "number",
    fieldName = "number",
    name = "Number"
  )
)

shinyApp(
  ui = DetailsList(
    items = items,
    columns = columns,
    onRenderItemColumn = JS("(item, index, column) => {
      const fieldContent = item[column.fieldName]
      switch (column.key) {
        case 'name':
           return React.createElement('span', { style: { textAlign: 'right', width: '100%', display: 'block' } }, fieldContent);
        case 'number':
           return React.createElement('span', { style: { textAlign: 'left', width: '100%', display: 'block' } }, `%${fieldContent}`);
        default:
          return React.createElement('span', null, fieldContent);
      }
    }")
  ),
  server = function(input, output) {}
)

[ugurdar]

Thank you :)