How to wrap text in a table?

alakhotia · ‎10-17-2022

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?

bowesmana · ‎10-17-2022

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.

alakhotia · ‎10-17-2022

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.

bowesmana · ‎10-17-2022

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.

alakhotia · ‎10-18-2022

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>

bowesmana · ‎10-18-2022

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%

alakhotia · ‎10-18-2022

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>

bowesmana · ‎10-18-2022

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.

How to wrap text in a table?

table

Customer Experience | Splunk 2024: New Onboarding Resources

Celebrate CX Day with Splunk: Take our interactive quiz, join our LinkedIn Live ...

How to Get Started with Splunk Data Management Pipeline Builders (Edge Processor & ...