Dashboards & Visualizations

Is there to modify the column size of the table?

noott211
Path Finder

Dashboard Classic are in use
I implemented a table chart
I'd like to modify the column size of the table Is there a way?

A <- > B 
Narrow the gap between A and B

A B D
       
       
Labels (3)
0 Karma

regarza
Engager

In the Dashboard Studio there is an attribute that will control the width of a column, the attribute name is called width. This is my column format section, note the values for width. Dashboard Studio says it defaults to 90 and the smallest it can use is 90.

"options": {

"columnFormat": {
"FailRate": {
"data": "> table | seriesByName(\"FailRate\") | formatByType(FailRateColumnFormatEditorConfig)",
"rowColors": "> table | seriesByName('FailRate') | pick(FailRateRowColorsEditorConfig)",
"rowBackgroundColors": "> table | seriesByName(\"FailRate\") | rangeValue(FailRateRowBackgroundColorsEditorConfig)"
},
"Integration Name": {
"width": 245
},
"Function": {
"width": 300
},
"#": {
"width": 40
}
}
0 Karma

richgalloway
SplunkTrust
SplunkTrust

You can do that with a custom CSS.  The Splunk Dashboard Example app shows how.

Example XML:

<dashboard version="1.1" stylesheet="table_column_width.css">
    <label>Table With Custom Column Width</label>
    <description>Modify table column width by custom stylesheet.</description>
    <row>
        <table id="customWidth">
            <title>Custom Column Width</title>
            <search>
                <query>index=_internal sourcetype=splunkd component=Metrics group=search_concurrency
                    | eval user=coalesce(user, "system total")
                    | bucket _time span=1h
                    | stats avg(active_hist_searches) as active_hist_searches avg(active_realtime_searches) as active_realtime_searches by _time,user
                </query>
                <earliest>-24h</earliest>
            </search>
            <option name="drilldown">none</option>
        </table>
    </row>
</dashboard>

And the corresponding example CSS:

/* set column width base on column name */
#customWidth th[data-sort-key=_time] {
    width: 200px;
}
/* set column width base on index (start from 1) */
#customWidth th:nth-child(2) {
    width: 250px;
}
---
If this reply helps you, Karma would be appreciated.

noott211
Path Finder

I'm sorry. I didn't understand

Can I see a case where you applied it yourself, not an example?

 

Also, can I use xml and css together in the dashboard classic?

0 Karma

richgalloway
SplunkTrust
SplunkTrust

I've not implemented this personally as I've not needed the functionality.  You may, however, find more information in the Splunk Dashboard Examples app (available on splunkbase).

Yes, you can use XML and CSS in Classic dashboards.  This is what is used in the Dashboard Examples app.  You cannot, AFAIK, put the XML and CSS in the same file.  Each has its own place.

---
If this reply helps you, Karma would be appreciated.
0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

Tech Talk Recap | Mastering Threat Hunting

Mastering Threat HuntingDive into the world of threat hunting, exploring the key differences between ...

Observability for AI Applications: Troubleshooting Latency

If you’re working with proprietary company data, you’re probably going to have a locally hosted LLM or many ...

Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?

In the age of AI, every tool promises to make our lives easier. From summarizing content to writing code, ...