Are you a member of the Splunk Community?
- Find Answers
- :
- Using Splunk
- :
- Splunk Search
- :
- How to wrap text in a table?
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
How to wrap text in a table?
I have a query in a panel, that is being outputted in a table.
Can I adjust the width of one of the columns, shrinking it, so that text is then wrapped across multiple lines?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
You need to use CSS and the following styling
<row depends="$showformat$">
<panel>
<html>
<style>
#table_id th[data-sort-key=column_name] {
width: 20% !important;
}
</style>
</html>
</panel>
</row>That is a new hidden row in your dashboard that contains the CSS. You table should have the id="table_id"
<table id="table_id">
...and the 'column_name' is the name of the column you are sizing.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
How do I use CSS in a query?
I have a search query that ends in a table output like this:
| table column1, column2, etc.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
You don't 'use' CSS in a query, it is just styling commands for your table - edit your dashboard and add that row and table id and change your column_name for the column you want to size.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thanks. Now I see how to edit the dashboard and get the styling, it's in "Edit Dashboard --> Source".
When I do "<row depends="$showformat$">, it breaks the visualization, nothing appears. Only if I remove the $ does something appear again. But, then nothing appears differently. It appears the same as before. I tried setting the width anywhere from 5 - 40%, and it appears the same no matter what.
<row depends="showformat">
<panel>
<table id="table_id">
<search>
<query> (omit)
| table methodParamValue</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
<html>
<style>
#table_id th[data-sort-key=methodParamValue] {
width: 5%;
}
</style>
</html>
</panel>
</row>- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
The <row depends="$...$"> is a hidden row on it's own - do not include the table in that row.
The width will only enforce the width if there is more than one field in the table. If you are looking to set the panel size, then use this in the CSS style section
#row_name .dashboard-cell:nth-child(1){
width:5% !important;
}and this assumes you have <row id="row_name"> and you want to set the width of the 1st panel to 5%
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Yes my table has more than one field, I just didn't include it in my splunk query that I pasted here because I was omitting most of the query.
You said not to include the table within the row.
Let me paste the panel CSS that was generated, without any changes. It included a table within the row.
I then took that CSS and tried to make it fit. Where exactly should I put that row line then, if this is how it generated the CSS without any alterations?
If you look at what I posted a few replies ago, I added the table ID attribute to the table node that was within the row node, because that's how this CSS was structured.
The table node is within the row, and the search query is within the table.
<row>
<panel>
<table>
<search>
<query>
| table XYZ, methodName, ABC, DEF</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
The CSS <row> can go anywhere, it doesn't matter - it's invisible - it's a placeholder for defining style.
All you then need to do is add you table ID parameter to your existing table in its current <row> and then in your CSS row, you can define the column widths using that table id as previously shown.
Community Content Calendar, September edition
Splunkbase Unveils New App Listing Management Public Preview
Leveraging Automated Threat Analysis Across the Splunk Ecosystem
