Inside of the components folder create a new folder called templates. In the templates folder create a file called data_table.html and put the following:
This sets up the basics for our table and will apply the appropriate styling to it so it matches the look of other tables in Splunk.
Next, below the <script /> template tag we will add a wrapper div in which will we append our table.
Loading in the Template Files
Before we do anything we will need to use require.js’ text.js in order to load and render the templates.
Download a copy of text.js here: https://github.com/requirejs/text/blob/master/text…
Once you’ve downloaded it, place it inside of your components folder. We will then reference it inside of the DataTableView.js file.
Inside of DataTableView.js add the following in the require.config’s path object:
Then in the define function load in the template using the text! argument:
And finally, make a reference to the template in the function parameter:
So, in the end you will have something that looks like this:
We will need a div to render the table into. So, go to your dashboard and edit the source and add the following at the bottom:
Inside of index.js add a reference to the element that our view will use to render our DataTable:
Now that we have an element to reference, we can use that inside our render method in the DataTableView.js file:
Rendering the DataTable
Rendering the DataTable will take a little extra work. First, we will create a new method in our DataTableView.js file called renderDT to handle the rendering of the DataTable. We could put this all in our render method directly, but from a readability standpoint this separation makes more sense.