Word wrap in dashboards
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-26-2024 01:57 PM
When I'm displaying a Table-style visualization in a notebook dashboard, is there a setting I can apply to a text column so that it automatically word-wraps text longer than the display width of the column?
For example, in the following dashboard display, I have clicked the pointer symbol in row 2 to make the entire string visible. I want the notebook to do this automatically for all cells, or for all cells in a specific column.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-26-2024 11:54 PM - edited 09-26-2024 11:54 PM
Hi @DavidKxx ,
That is quite similar question to one about displaying array as bullet list.
Since you were successful in implementing displayHTML, what do you think about doing similar in this case?
# Sample DataFrame with long text
data = [
(1, 'This is a short text.'),
(2, 'This is a much longer text that would normally be truncated in a standard table visualization, but we want it to wrap automatically within the cell without needing to expand the cell manually.')
]
df = spark.createDataFrame(data, ['id', 'text'])
# Collect data to the driver
rows = df.collect()
# Start building the HTML string
table_html = '''
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
text-align: left;
padding: 8px;
word-wrap: break-word;
word-break: break-word;
max-width: 200px; /* Adjust the max-width as needed */
}
</style>
<table>
<tr>
<th>id</th>
<th>text</th>
</tr>
'''
# Add table rows
for row in rows:
table_html += '<tr>'
table_html += f'<td>{row["id"]}</td>'
table_html += f'<td>{row["text"]}</td>'
table_html += '</tr>'
table_html += '</table>'
displayHTML(table_html)

