Upload folder using huggingface_hub

README.md

@@ -1,12 +1,12 @@
+
 ---
-title: Dataframe Widths Main
-emoji: 🏢
+title: dataframe_widths_main 
+emoji: 🔥
 colorFrom: indigo
-colorTo: purple
+colorTo: indigo
 sdk: gradio
 sdk_version: 6.12.0
-app_file: app.py
+app_file: run.py
 pinned: false
+hf_oauth: true
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

requirements.txt

@@ -0,0 +1,2 @@
+gradio-client @ git+https://github.com/gradio-app/gradio@79c577680978adfb5eeaa01944635e14dc67e5f1#subdirectory=client/python
+https://huggingface.co/buckets/gradio/pypi-previews/resolve/79c577680978adfb5eeaa01944635e14dc67e5f1/gradio-6.12.0-py3-none-any.whl

run.py

@@ -0,0 +1,262 @@
+import gradio as gr
+
+headers = ["Short", "Medium Column", "Long Description", "Also Long"]
+
+short_row = ["id-1", "alpha", "small cell", "small cell"]
+long_row = [
+    "id-2",
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    (
+        "This is a deliberately very long cell value intended to exceed any "
+        "reasonable column width so we can see truncation and wrapping behavior "
+        "kick in. It keeps going and going and going so that the column must "
+        "either truncate with an ellipsis or wrap across multiple lines."
+    ),
+    "The quick brown fox jumps over the lazy dog several times in a row.",
+]
+unbreakable_row = [
+    "id-3",
+    "ok",
+    "Supercalifragilisticexpialidocious" * 4,
+    "word " * 30,
+]
+
+data = [
+    short_row,
+    long_row,
+    unbreakable_row,
+    short_row,
+    long_row,
+    unbreakable_row,
+    short_row,
+    long_row,
+    unbreakable_row,
+]
+
+with gr.Blocks(title="Dataframe widths & wrapping") as demo:
+    gr.Markdown(
+        """
+        # Dataframe column widths and wrapping
+
+        Demonstrates how `wrap` and `column_widths` interact. In every case the
+        column's max width is capped at 100% of the dataframe's viewport so a
+        single cell can never be wider than the scroll area.
+        """
+    )
+
+    with gr.Row():
+        with gr.Tab("Defaults (no wrap, auto widths)"):
+            gr.Markdown(
+                "No `wrap`, no `column_widths`. Columns size to the longest cell; "
+                "anything longer than the viewport truncates with an ellipsis."
+            )
+            gr.Dataframe(value=data, headers=headers)
+
+        with gr.Tab("wrap=True, auto widths"):
+            gr.Markdown(
+                "`wrap=True` and no `column_widths`. Columns still size to the "
+                "longest cell, but content that would exceed the viewport wraps "
+                "onto multiple lines instead of truncating."
+            )
+            gr.Dataframe(value=data, headers=headers, wrap=True)
+
+        with gr.Tab("Fixed pixel widths"):
+            gr.Markdown(
+                "`column_widths=['80px', '160px', '240px', '200px']`. Pixel widths "
+                "are honored exactly; long content truncates."
+            )
+            gr.Dataframe(
+                value=data,
+                headers=headers,
+                column_widths=["80px", "160px", "240px", "200px"],
+            )
+
+        with gr.Tab("Fixed pixel widths + wrap"):
+            gr.Markdown(
+                "Same fixed widths but `wrap=True`. Long content wraps within the "
+                "fixed column instead of truncating."
+            )
+            gr.Dataframe(
+                value=data,
+                headers=headers,
+                column_widths=["80px", "160px", "240px", "200px"],
+                wrap=True,
+            )
+
+        with gr.Tab("Percentage widths"):
+            gr.Markdown(
+                "`column_widths=['10%', '25%', '40%', '25%']`. Percentages resolve "
+                "against the dataframe's viewport width, so they re-flow when you "
+                "resize the window."
+            )
+            gr.Dataframe(
+                value=data,
+                headers=headers,
+                column_widths=["10%", "25%", "40%", "25%"],
+            )
+
+        with gr.Tab("Percentage widths + wrap"):
+            gr.Markdown("Same percentages, but with `wrap=True`.")
+            gr.Dataframe(
+                value=data,
+                headers=headers,
+                column_widths=["10%", "25%", "40%", "25%"],
+                wrap=True,
+            )
+
+        with gr.Tab("Mixed widths (px / % / int)"):
+            gr.Markdown(
+                "`column_widths=[120, '20%', 'auto', '30%']`. Integers are treated "
+                "as pixels; `'auto'` falls back to content-based sizing (capped at "
+                "the viewport)."
+            )
+            gr.Dataframe(
+                value=data,
+                headers=headers,
+                column_widths=[120, "20%", "auto", "30%"],
+            )
+
+        with gr.Tab("max_chars with wide data"):
+            gr.Markdown(
+                "`max_chars=20` truncates cell text to 20 characters with an "
+                "ellipsis. The column is sized to the rendered (truncated) text "
+                "rather than the full underlying value, so there's no wasted "
+                "horizontal space."
+            )
+            gr.Dataframe(
+                value=data,
+                headers=headers,
+                max_chars=20,
+            )
+
+        with gr.Tab("max_chars + fixed widths + wrap"):
+            gr.Markdown(
+                "`max_chars=15`, explicit pixel widths, and `wrap=True`. Text is "
+                "first truncated by character count, then wrapped to fit the "
+                "column."
+            )
+            gr.Dataframe(
+                value=data,
+                headers=headers,
+                max_chars=15,
+                column_widths=["80px", "160px", "200px", "200px"],
+                wrap=True,
+            )
+
+    with gr.Row():
+        with gr.Tab("Defaults (no wrap, auto widths)"):
+            gr.Markdown(
+                "No `wrap`, no `column_widths`. Columns size to the longest cell; "
+                "anything longer than the viewport truncates with an ellipsis."
+            )
+            gr.Dataframe(
+                value=data,
+                headers=headers,
+                interactive=True,
+            )
+
+        with gr.Tab("wrap=True, auto widths"):
+            gr.Markdown(
+                "`wrap=True` and no `column_widths`. Columns still size to the "
+                "longest cell, but content that would exceed the viewport wraps "
+                "onto multiple lines instead of truncating."
+            )
+            gr.Dataframe(
+                value=data,
+                headers=headers,
+                wrap=True,
+                interactive=True,
+            )
+
+        with gr.Tab("Fixed pixel widths"):
+            gr.Markdown(
+                "`column_widths=['80px', '160px', '240px', '200px']`. Pixel widths "
+                "are honored exactly; long content truncates."
+            )
+            gr.Dataframe(
+                interactive=True,
+                value=data,
+                headers=headers,
+                column_widths=["80px", "160px", "240px", "200px"],
+            )
+
+        with gr.Tab("Fixed pixel widths + wrap"):
+            gr.Markdown(
+                "Same fixed widths but `wrap=True`. Long content wraps within the "
+                "fixed column instead of truncating."
+            )
+            gr.Dataframe(
+                interactive=True,
+                value=data,
+                headers=headers,
+                column_widths=["80px", "160px", "240px", "200px"],
+                wrap=True,
+            )
+
+        with gr.Tab("Percentage widths"):
+            gr.Markdown(
+                "`column_widths=['10%', '25%', '40%', '25%']`. Percentages resolve "
+                "against the dataframe's viewport width, so they re-flow when you "
+                "resize the window."
+            )
+            gr.Dataframe(
+                interactive=True,
+                value=data,
+                headers=headers,
+                column_widths=["10%", "25%", "40%", "25%"],
+            )
+
+        with gr.Tab("Percentage widths + wrap"):
+            gr.Markdown("Same percentages, but with `wrap=True`.")
+            gr.Dataframe(
+                value=data,
+                interactive=True,
+                headers=headers,
+                column_widths=["10%", "25%", "40%", "25%"],
+                wrap=True,
+            )
+
+        with gr.Tab("Mixed widths (px / % / int)"):
+            gr.Markdown(
+                "`column_widths=[120, '20%', 'auto', '30%']`. Integers are treated "
+                "as pixels; `'auto'` falls back to content-based sizing (capped at "
+                "the viewport)."
+            )
+            gr.Dataframe(
+                value=data,
+                interactive=True,
+                headers=headers,
+                column_widths=[120, "20%", "auto", "30%"],
+            )
+
+        with gr.Tab("max_chars with wide data"):
+            gr.Markdown(
+                "`max_chars=20` truncates cell text to 20 characters with an "
+                "ellipsis. The column is sized to the rendered (truncated) text "
+                "rather than the full underlying value, so there's no wasted "
+                "horizontal space."
+            )
+            gr.Dataframe(
+                interactive=True,
+                value=data,
+                headers=headers,
+                max_chars=20,
+            )
+
+        with gr.Tab("max_chars + fixed widths + wrap"):
+            gr.Markdown(
+                "`max_chars=15`, explicit pixel widths, and `wrap=True`. Text is "
+                "first truncated by character count, then wrapped to fit the "
+                "column."
+            )
+            gr.Dataframe(
+                interactive=True,
+                value=data,
+                headers=headers,
+                max_chars=15,
+                column_widths=["80px", "160px", "200px", "200px"],
+                wrap=True,
+            )
+
+if __name__ == "__main__":
+    demo.launch()