Splunk Search

How to color lines in a table by clicking a cell?

sfatnass
Contributor

Hi everybody

I want to know how I can color the all the lines in my table by clicking on a cell.
I tried this code and the message on console works fine, but the coloration doesn't and I don't understand why:

<%css>
#highlight tr.range-mine td{
color:red;
}
<%css>


<%javascript>
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
],function(_,$,mvc,TableView) {

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell){
            return _(['id']).contains(cell.field);
        },
        render: function($td,cell) {
            var value = String(cell.value); 
if(cell.field === 'id'){

$td.on('click',function(){

console.log('td',value);
$td.addClass('range-cell').addClass('range-mine');
});

}
        $td.text(value.split(";")[0]).addClass('text');

        }
    });

    mvc.Components.get('highlight').getVisualization(function(tableView){
        tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.on('rendered',function(){
            tableView.$el.find('td.range-cell').each(function(){
            $(this).parents('tr').addClass(this.className);
             });
            });
        tableView.table.render();
    });  

});
<%javascript>

thx

1 Solution

piUek
Path Finder

The easiest way to color ALL the table cells would be to set class for all td elements on click using jquery ('td') selector.

<style>
    .red {
        color: red !important
    }
</style>

<script>
    // listen for clicks only on first column
    var CustomCellRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cellData) {
            return cellData.index === 0;
        },

        render: function($td, cellData) {
            value = cellData.value;

            $td.on('click', function() {
                    $('td').addClass('red');
                })

            $td.text(value);
        }

    });
</script>

To color only one line (parent tr) use:

        $td.on('click', function() {
                $td.parent().addClass('red');
            })

View solution in original post

piUek
Path Finder

The easiest way to color ALL the table cells would be to set class for all td elements on click using jquery ('td') selector.

<style>
    .red {
        color: red !important
    }
</style>

<script>
    // listen for clicks only on first column
    var CustomCellRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cellData) {
            return cellData.index === 0;
        },

        render: function($td, cellData) {
            value = cellData.value;

            $td.on('click', function() {
                    $('td').addClass('red');
                })

            $td.text(value);
        }

    });
</script>

To color only one line (parent tr) use:

        $td.on('click', function() {
                $td.parent().addClass('red');
            })

sfatnass
Contributor

i solved it, using function js within my html dashboard.

=>> if click on line push value in array and send array content to color function.

if click again on same line (detected by an id), splice this value from array and resend the new array content to refresh automatic the color.

^^

thx again

0 Karma

rashi83
Path Finder

How can I just border the table in dashboard panel ? I doesn't want color on click of a cell..

0 Karma

sfatnass
Contributor

no body have any idea?

0 Karma
Get Updates on the Splunk Community!

Updated Data Type Articles, Anniversary Celebrations, and More on Splunk Lantern

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

A Prelude to .conf25: Your Guide to Splunk University

Heading to Boston this September for .conf25? Get a jumpstart by arriving a few days early for Splunk ...

4 Ways the Splunk Community Helps You Prepare for .conf25

.conf25 is right around the corner, and whether you’re a first-time attendee or a seasoned Splunker, the ...