specify different column widths in render.DataGrid()

[mdaeron]

Is there a canonical way to specify different column widths in render.DataGrid()?

In the following example, I'd like to keep columns a and b at a reasonably small width, while allowing column c to expand enough to accommodate long lines of text.

from shiny import App, Inputs, Outputs, Session, render, ui
import pandas as pd

df = pd.DataFrame(
  {
    "a": [0],
    "b": [0.1],
    "c": ["A very long line that goes on and on and on"],
  }
)

app_ui = ui.page_fluid(
  ui.card(
    ui.output_data_frame("odf"),
  ),
)

def server(input: Inputs, output: Outputs, session: Session):

  @render.data_frame
  def odf():
    return render.DataGrid(df)

app = App(app_ui, server)

[jeichenseerNRX]

You can try white-space: nowrap

  ui.card(
    ui.output_data_frame("odf",),
    style='white-space: nowrap',
  ),

[corey-dawson]

This is super frustrating that this issue hasn't been looked at. Here is a solution for you. Add in a css style sheet and set a 3rd column style to be n% of your table width. Can also specify a pixel width

sytle.css

td:nth-child(3) { /* Targets the third column */
    width: 50%;
}

Utilize style sheet in ui

app_ui = ui.page_fluid(
    ui.head_content(
        ui.include_css(Path(__file__).parent / "style.css")
    )
  ui.card(
    ui.output_data_frame("odf"),
  ),
)