Fork me on GitHub

js-datatable

Introduction

js-datatable is an open source JQuery plugin to produce dynamic HTML tables with data visualization capabilities. The plugins was originally developed for the need of academic data visualization (DCASE2016 evaluation campaign results), and to be used with Pelican static page generation framework. js-datatable is a spin-off project, which separates core functionality into standalone JQuery-plugin. For integration with Pelican, see pelican-datatable project.

The js-datatable is designed to be used with Bootstrap 3 framework. Dynamic table handling is implemented with bootstrap-table.js and data visualizations with chart.js.

To see plugin in action, check DCASE2016 challenge results page.

Installation instructions

To use plugin, following javascripts and css files are required:


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js.min/datatable.bundle.min.js"></script>
<link rel="stylesheet" href="css.min/datatable.bundle.min.css">
                

You can use also non-minified versions in case debugging is required:


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/Chart.bundle.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/datatable.js"></script>
<link rel="stylesheet" href="css/bootstrap-table.css">
<link rel="stylesheet" href="css/datatable.css">
                

Plugin is initialized automatically for <table> elements having class `datatable` set on them. Most of the parametrization is done through data-fields either inside <table>-tag or in header <th>-tags.

Download

Download latest release

Usage

js-datatable is an open source JQuery plugin to produce dynamic HTML tables with data visualization capabilities. This page gives a shot tutorial how to use the plugin and shows it in action.

Via data attributes

This is the simplest way to use the plugin.

Create table element with class="datatable". Parameters to the plugin are given with attributes to table element.


<table class="table datatable"
       data-id-field="code"
       data-sort-name="value1"
       data-sort-order="desc"
       data-show-chart="false"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1" data-sortable="true">Value 1</th>
            <th data-field="value2" data-sortable="true">Value 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>item 1</td>
            <td>40.4</td>
            <td>6.5344</td>
        </tr>
    </tbody>
</table>
                
More detailed examples see examples below.

Via JavaScript

In case you need customization.

In case an extensive customization is required, the datatable can be created with javascript.


<table id="dynamic-table-1" class="table"
       data-id-field="code"
       data-sort-name="value1"
       data-sort-order="desc"
       data-show-chart="false"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1" data-sortable="true">Value 1</th>
            <th data-field="value2" data-sortable="true">Value 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>item 1</td>
            <td>40.4</td>
            <td>6.5344</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
        $( document ).ready(function() {
            $('#dynamic-table-1').datatable({});
        });
</script>
                

Parameters

Table options

Name Attribute JS parameter Type Default Description
ID field data-id-field table.id_field String undefined Column name to be used to identify rows.
Chart visualization data-show-chart show_chart Boolean false Controls chart visualization.
Data JSON data-json String undefined JSON file to populate the table from.
Data YMAL data-yaml String undefined YAML file to populate the table from.
Ranking data-rank-mode rank_mode String 'normal' Dynamic ranking mode:
  • normal
  • grouped_muted
  • grouped_empty
Tagging data-tag-mode tag_mode String 'global' Dynamic tagging, column values are grouped and groups are assigned a color. Modes:
  • global, all columns are pulled together before assigning a tag color.
  • column, all values from a single column is pulled together before assigning a tag color.
Row highlighting data-row-highlighting table.row_highlighting Boolean false Use row_css field in the data file to have row colors.
Chart modes data-chart-modes chart_modes String 'bar' Comma separated list of visualization modes:
  • bar
  • scatter
  • comparison
Default char mode data-chart-default-mode chart_default_mode String 'bar' Default visualization mode:
  • bar
  • scatter
  • comparison
Bar / Show x-axis data-bar-show-xaxis bar.show_xaxis Boolean true Show x-axis in bar visualization.
Bar / height data-bar-height bar.height Number 240 Height of a visualization canvas.
Bar / horizontal line data-bar-hline bar.horizontal_line.enabled Boolean false Show horizontal line, value got from data file. Use hline field to set.
Bar / Tooltip position data-bar-tooltip-position bar.tooltips.position String 'top' Tooltip position, possible values:
  • average
  • top
  • bottom
Bar / Show horizontal indicator line data-bar-show-horizontal-indicator bar.vertical_horizontal_line.enabled Boolean true Show horizontal indicator line.
Bar / Show vertical indicator line data-bar-show-vertical-indicator bar.vertical_indicator_line.enabled Boolean false Show vertical indicator line.
Bar / Vertical indicator line width data-bar-vertical-indicator-linewidth bar.vertical_indicator_line.lineWidth Number 4 Vertical indicator line width.
Bar / Vertical indicator line color data-bar-vertical-indicator-stroke bar.vertical_indicator_line.strokeStyle String rgba(0,0,0,0.2) Vertical indicator line color.
Bar / Horizontal indicator line width data-bar-horizontal-indicator-linewidth bar.horizontal_indicator_line.lineWidth Number 4 Horizontal indicator line width.
Bar / Horizontal indicator line color data-bar-horizontal-indicator-stroke bar.horizontal_indicator_line.strokeStyle String rgba(0,0,0,0.2) Horizontal indicator line color.
Bar / Horizontal indicator line fill color data-bar-horizontal-indicator-fill bar.horizontal_indicator_line.fillStyle String rgba(0,0,0,0.1) Horizontal indicator fill color.
Bar / Show error bars data-bar-show-error-bar bar.error_bar.enabled Boolean true Show error bar for data point (if interval is defined).
Bar / Error bar line width data-bar-error-bar-linewidth bar.error_bar.lineWidth Number 2 Error bar line width.
Bar / Error bars tip width data-bar-error-bar-tipwidth bar.error_bar.tipWidth Number undefined Error bar tip width. If undefined give, then tip width is defined automatically.
Bar / Error bars line color data-bar-error-bar-stroke bar.error_bar.strokeStyle String undefined Error bar line color. If undefined given, then item/row color is used.
Line / fields data-line-fields line.fields String undefined Comma separated list of fields to be show in the line plot. If undefined, all field shown.
Line / fill data-line-fill line.fill Boolen false Fill area under the line.
Line / Show X-axis data-show-xaxis line.xaxis.display Boolen true Show x-axis.
Line / X-axis field data-line-xaxis-field line.xaxis.field String undefined Data field to be used on x-axis.
Line / Sorted X-axis data-line-xaxis-sorted line.xaxis.sorted Boolean false Should the data be sorted based on x-axis field.
Line / X-axis time unit data-line-xaxis-timeunit line.xaxis.timeunit String undefined Time unit used. Possible values e.g. minute,hour,day,month,year
Line / X-axis time step size data-line-xaxis-timestepsize line.xaxis.timestepsize Number undefined Step size.
Line / X-axis gridlines data-line-xaxis-gridlines line.xaxis.gridlines Boolean true Show x-axis gridlines.
Line / Y-axis beginatzero data-line-yaxis-beginatzero line.yaxis.beginatzero Boolean false Start y-axis from zero.
Line / Y-axis label data-line-yaxis-label line.yaxis.label String undefined Label for y-axis.
Line / Y-axis scale data-line-yaxis-scale line.yaxis.scale String undefined Scale for y-axis. Possible values 'log', 'log_unit', 'log_exp', 'log10', 'log10_unit', and 'log10_exp'.
Line / Y-axis gridlines data-line-yaxis-gridlines line.yaxis.gridlines Boolean true Show y-axis gridlines.
Line / Height data-line-height line.height Number 240 Height of a visualization canvas.
Line / Show data points data-line-show-point line.point.enabled Boolean false Show data points.
Line / Data point radius data-line-point-radius line.point.radius.normal Number 4 Data point radius.
Line / Data point radius hover data-line-point-radius-hover line.point.radius.hover Number 4 Data point radius when mouse on top of it.
Line / Show line data-line-show-line line.line.enabled Boolean true Show line between data points.
Line / Show vertical indicator line data-line-show-vertical-indicator line.vertical_indicator_line.enabled Boolean true Show vertical indicator line.
Line / Vertical indicator line width data-line-vertical-indicator-linewidth line.vertical_indicator_line.lineWidth Number 4 Vertical indicator line width.
Line / Vertical indicator line color data-line-vertical-indicator-stroke line.vertical_indicator_line.strokeStyle String rgba(160,160,160,0.5) Vertical indicator line color.
Line / Show horizontal indicator line data-line-show-horizontal-indicator line.vertical_horizontal_line.enabled Boolean true Show horizontal indicator line.
Line / Horizontal indicator line width data-line-horizontal-indicator-linewidth line.horizontal_indicator_line.lineWidth Number 4 Horizontal indicator line width.
Line / Horizontal indicator line color data-line-horizontal-indicator-stroke line.horizontal_indicator_line.strokeStyle String rgba(160,160,160,0.5) Horizontal indicator line color.
Line / Horizontal indicator fill color data-line-horizontal-indicator-fill line.horizontal_indicator_line.fillStyle String rgba(160,160,160,0.5) Horizontal indicator fill color.
Line / Show horizontal highlights data-line-show-horizontal-highlights line.horizontal_highlights.enabled Boolean true Show horizontal highlights.
Line / Horizontal highlights data-line-horizontal-highlights line.horizontal_highlights.data String undefined Data structure to contain data for highlights in format: value1;title;color,value2;title2;color
Line / Horizontal highlight line opacity data-line-horizontal-highlight-opacity line.horizontal_highlights.opacity Number 0.1 Line opacity.
Line / Horizontal highlight line width data-line-horizontal-highlight-linewidth line.horizontal_highlights.linewidth Number 1 Line width.
Line / Horizontal highlight line color data-line-horizontal-highlight-stroke line.horizontal_highlights.stroke String rgba(112, 187, 225 ,1.0) Line color.
Line / Horizontal highlight label position data-line-horizontal-highlight-label-position line.horizontal_highlights.label.position String 'bottom-right' Line title position, possible values: top-left, top-right, bottom-left, bottom-right
Line / Horizontal highlight label color data-line-horizontal-highlight-label-fill line.horizontal_highlights.label.fillStyle String #000 Line title color.
Line / Horizontal highlight label size data-line-horizontal-highlight-label-size line.horizontal_highlights.label.fontSize String '12px' Line title size.
Line / Horizontal highlight label opacity data-line-horizontal-highlight-label-opacity line.horizontal_highlights.label.opacity Number 0.2 Line title opacity.
Line / Show vertical segments data-line-show-vertical-segments line.vertical_segments.enabled Boolean true Show vertical segments.
Line / Vertical segments data-line-vertical-segments line.vertical_segments.data String undefined Data structure to contain data for segments in format: start_value1;stop_value1;title;color,start_value2;stop_value2;title2;color
Line / Vertical segments opacity data-line-vertical-segment-opacity line.vertical_segments.opacity Number 0.1 Segment opacity.
Line / Vertical segment label position data-line-vertical-segment-label-position line.vertical_segments.label.position String 'bottom-right' Segment title position, possible values: top, bottom, middle
Line / Vertical segment label color data-line-vertical-segment-label-fill line.vertical_segments.label.fillStyle String #000 Segment title color.
Line / Vertical segment label size data-line-vertical-segment-label-size line.vertical_segments.label.fontSize String '12px' Segment title size.
Line / Vertical segment label opacity data-line-vertical-segment-label-opacity line.vertical_segments.label.opacity Number 0.2 Segment title opacity.
Line / Show error bars data-line-show-error-bar line.error_bar.enabled Boolean true Show error bar for data point (if interval is defined).
Line / Error bar line width data-line-error-bar-linewidth line.error_bar.lineWidth Number 2 Error bar line width.
Line / Error bars tip width data-line-error-bar-tipwidth line.error_bar.tipWidth Number undefined Error bar tip width. If undefined give, then tip width is defined automatically.
Line / Error bars line color data-line-error-bar-stroke line.error_bar.strokeStyle String undefined Error bar line color. If undefined given, then item/row color is used.
Line / Show interval data-line-show-interval line.interval.enabled Boolean true Show interval.
Line / Interval line width data-line-interval-linewidth line.interval.lineWidth Number 0.4 Interval line width.
Line / Horizontal line data-line-hline line.horizontal_line.enabled Boolean false Show horizontal line, value got from data file. Use hline field to set.
Line / Tooltip position data-line-tooltip-position line.tooltips.position String 'top' Tooltip position, possible values:
  • average
  • top
  • bottom
Line / Show legend data-line-show-legend line.legend.enabled Boolean true Show legend.
Line / Legend position data-line-legend-position line.legend.position String 'right' Legend position, possible values:
  • top
  • bottom
  • left
  • right
Scatter / height data-scatter-height scatter.height Number 240 Height of a visualization canvas.
Scatter / x data-scatter-x scatter.x String undefined Id of a column used as default data source for a scatter plot.
Scatter / y data-scatter-y scatter.y String undefined Id of a column used as default data source for a scatter plot.
Scatter / Point radius data-scatter-point-radius scatter.point.normal Number 5 Data point radius.
Scatter / Point radius hover data-scatter-point-radius-hover scatter.point.hover Number 10 Data point radius when mouse on top of it.
Scatter / Show vertical indicator line data-scatter-show-vertical-indicator scatter.vertical_indicator_line.enabled Boolean true Show vertical indicator line.
Scatter / Vertical indicator line width data-scatter-vertical-indicator-linewidth scatter.vertical_indicator_line.lineWidth Number 4 Vertical indicator line width.
Scatter / Vertical indicator line color data-scatter-vertical-indicator-stroke scatter.vertical_indicator_line.strokeStyle String rgba(160,160,160,0.5) Vertical indicator line color.
Scatter / Show horizontal indicator line data-scatter-show-horizontal-indicator scatter.vertical_horizontal_line.enabled Boolean true Show horizontal indicator line.
Scatter / Horizontal indicator line width data-scatter-horizontal-indicator-linewidth scatter.horizontal_indicator_line.lineWidth Number 4 Horizontal indicator line width.
Scatter / Horizontal indicator line color data-scatter-horizontal-indicator-stroke scatter.horizontal_indicator_line.strokeStyle String rgba(160,160,160,0.5) Horizontal indicator line color.
Scatter / Horizontal indicator fill color data-scatter-horizontal-indicator-fill scatter.horizontal_indicator_line.fillStyle String rgba(160,160,160,0.5) Horizontal indicator fill color.
Scatter / Show error bars data-scatter-show-error-bar scatter.error_bar.enabled Boolean true Show error bar for data point (if interval is defined).
Scatter / Error bar line width data-scatter-error-bar-linewidth scatter.error_bar.lineWidth Number 1 Error bar line width.
Scatter / Error bars tip width data-scatter-error-bar-tipwidth scatter.error_bar.tipWidth Number 8 Error bar tip width.
Scatter / Error bars line color data-scatter-error-bar-stroke scatter.error_bar.strokeStyle String rgba(0,0,0,0.2) Error bar line color.
Scatter / Show error box data-scatter-show-error-box scatter.error_bar.bounding_box Boolean true Show bounding box for error.
Scatter / Error box fill color data-scatter-error-box-fill scatter.error_bar.fillStyle String rgba(0,0,0,0.05) Error bounding box fill color.
Comparison / height data-comparison-height comparison.height Number 240 Height of a visualization canvas.
Comparison / Row id field data-comparison-row-id-field comparison.row_id_field String undefined Id of a column used to populate selection dropdown.
Comparison / Sets json data-comparison-sets-json comparison.sets JSON undefined Comparison sets in JSON format. It should contain a list of object with following format:

{
    "title": "title of a set",
    "data_axis_title": "custom value for axis",
    "fields": ["column_field1", "column_field1"],
    "field_titles": ["custom title 1","custom title 2"]
}
                                
Comparison / Default set data-comparison-active-set comparison.active_set String undefined Preselected set.
Comparison / Default A row data-comparison-a-row comparison.a_row String undefined Preselected row A
Comparison / Default B row data-comparison-b-row comparison.b_row String undefined Preselected row B
Comparison / Show error bars data-comparison-show-error-bar comparison.error_bar.enabled Boolean true Show error bar for data point (if interval is defined).
Comparison / Error bar line width data-comparison-error-bar-linewidth comparison.error_bar.lineWidth Number 2 Error bar line width.
Comparison / Error bars tip width data-comparison-error-bar-tipwidth comparison.error_bar.tipWidth Number 8 Error bar tip width.
Comparison / Error bars line color data-comparison-error-bar-stroke comparison.error_bar.strokeStyle String rgba(0,0,0,0.2) Error bar line color.

Header options

Name Attribute Type Default Description
Tag data-tag Boolean undefined Groups values in the column and colors them.
Chartable data-chartable Boolean undefined Can the column be select for visualization.
Begin at zero data-beginatzero Boolean undefined 0 is included in when values from column are visualized.
Postfix data-postfix String '' String to be added at the end of all values. Use for units.
Value type data-value-type String undefined Value formatter:
  • int, int-percentage and int-error, numeric, integer
  • float1, float1-percentage and float1-error, numeric, float with one decimal
  • float2, float2-percentage and float2-error, numeric, float with two decimals
  • float3, float3-percentage and float3-error, numeric, float with three decimals
  • float4, float4-percentage and float4-error, numeric, float with four decimals
  • int-percentage-interval and int-percentage-interval-muted, numeric with intervals, format [value] ([interval_low - interval_high]), integers
  • float1-percentage-interval and float1-percentage-interval-muted, numeric with intervals, format [value] ([interval_low - interval_high]), floats with one decimals
  • float2-percentage-interval and float2-percentage-interval-muted, numeric with intervals, format [value] ([interval_low - interval_high]), floats with two decimals
  • float3-percentage-interval and float3-percentage-interval-muted, numeric with intervals, format [value] ([interval_low - interval_high]), floats with three decimals
  • float4-percentage-interval and float4-percentage-interval-muted, numeric with intervals, format [value] ([interval_low - interval_high]), floats with four decimals
  • int-percentage-plusminus and int-percentage-plusminus-muted, numeric with plusminus interval, format [value] ±[interval], integers
  • float1-percentage-plusminus and float1-percentage-plusminus-muted, numeric with plusminus intervals, format [value] ±[interval], floats with one decimals
  • float2-percentage-plusminus and float2-percentage-plusminus-muted, numeric with plusminus intervals, format [value] ±[interval], floats with two decimals
  • float3-percentage-plusminus and float3-percentage-plusminus-muted, numeric with plusminus intervals, format [value] ±[interval], floats with three decimals
  • float4-percentage-plusminus and float4-percentage-plusminus-muted, numeric with plusminus intervals, format [value] ±[interval], floats with four decimals
  • list, data split , into rows
  • url data in parsed into list of hrefs, format [url];[url title],[url];[url title]
  • ref data in parsed into list of reference hrefs, format [url to reference];[reference label],[url to reference];[reference label]
  • anchor data value used for href to jump to HTML link anchor. In case the link refers to collapsed item, it is opened.
When using percentage formatters, data-postfix is set automatically to %.
Bar char y-axis label data-axis-label String undefined String to be used as label for axis in charts (bar and scatter), overrides the default label (the column header).
Axis scale type data-axis-scale String 'linear' Axis scale type, possible values: log, log_unit, log_exp, log10log10_unit, and log10_exp. log10* will show only exponents of 10, *_unit will shorten large numbers with units (k, M, T), exp will use exponent notation.

Bootstraptable parameters

Essential Bootstraptable specific parameters are collected here for completeness. For full reference, see Bootstraptable.js documentation.

Table options

Name Attribute Type Default Description
Sort name data-sort-name String undefined Defines which column will be sorted.
Sort order data-sort-order String 'asc' Defines the column sort order, can only be 'asc' or 'desc'.
Sort order data-sort-order String 'asc' Defines the column sort order, can only be 'asc' or 'desc'.
Striped data-striped Boolean true True to stripe the rows.
Pagination data-pagination Boolean true True to show a pagination toolbar on table bottom.
Page list data-page-list Array [10, 25, 50, 100] When set pagination property, initialize the page size selecting list. If you include the 'All' option, all the records will be shown in your table.
Show columns data-show-columns Boolean false True to show the columns drop down list.
Show toggle data-show-toggle Boolean false True to show the toggle button to toggle table / card view.
Show pagination switch data-show-pagination-switch Boolean true True to show the pagination switch button.

Header options

Name Attribute Type Default Description
Field data-field String undefined The column field name.
Sortable data-sortable Boolean false True to allow the column can be sorted.
Visible data-visible Boolean true False to hide the columns item.
Formatter data-formatter Function undefined The context (this) is the column Object. The cell formatter function, take three parameters: value: the field value. row: the row record data. index: the row index.

Table examples

Preferred way to deliver the data to js-datatable is to have all data in HTML table. If static page generation is used, the data can be read from data files in the generation stage. Alternative method is to use asynchronous loading (JSON or YAML files) when the data is loaded once the page is loaded and table is populated with the data. By using static content, the all data is show once page is loaded and in if javascript is turned off table is still showing some data. When using remote data source, there is a delay depending on the connection speed before the table data is populated. Modern web crawlers (e.g. google) should handle dynamic data and index it.

Simple table, data from HTML table

Safest way to create dynamic table is to have all data in HTML table. One can also populate data This a simple dynamic table, basically same than what you would get with bootstrap-table.js alone.

Name Value 1 Value 2
item 1 40.4 6.5344
item 2 60.2 3.232
item 3 20.6 9.32


<table class="table datatable"
       data-id-field="code"
       data-sort-name="value1"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1" data-sortable="true">Value 1</th>
            <th data-field="value2" data-sortable="true">Value 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>item 1</td>
            <td>40.4</td>
            <td>6.5344</td>
        </tr>
        <tr>
            <td>item 2</td>
            <td>60.2</td>
            <td>3.232</td>
        </tr>
        <tr>
            <td>item 3</td>
            <td>20.6</td>
            <td>9.32</td>
        </tr>
    </tbody>
</table>
                    

Simple table, data from remote JSON file

This a simple dynamic table, basically same than what you would get with bootstrap-table.js alone.

Name Value 1 Value 2


<table class="table datatable"
       data-json="data2.json"
       data-id-field="name"
       data-sort-name="value1"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1" data-sortable="true">Value 1</th>
            <th data-field="value2" data-sortable="true">Value 2</th>
        </tr>
    </thead>
</table>
                    

[
    {
        "code": "Red",
        "value1": "12",
        "value2": "22",
        "value3": "5",
        "value4": "34",
        "feature1": "square",
        "feature2": "triangle",
        "row_css": "danger"
    },
    {
        "code": "Blue",
        "value1": "62",
        "value2": "42",
        "value3": "8",
        "value4": "64",
        "feature1": "circle",
        "feature2": "triangle",
        "row_css": "warning"
    }
]
                    

Simple table, data from remote YAML file

Name Value 1 Value 2


<table class="table datatable"
       data-yaml="data2.yaml"
       data-id-field="name"
       data-sort-name="value1"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1" data-sortable="true">Value 1</th>
            <th data-field="value2" data-sortable="true">Value 2</th>
        </tr>
    </thead>
</table>
                    

data:
  - code: Red
    value1: 12
    value2: 22
    feature1: square
    feature2: triangle
    row_css: danger

  - code: Blue
    value1: 62
    value2: 42
    feature1: circle
    feature2: triangle
    row_css: warning
                    

Ranking

Plugin provides a few way to rank rows dynamically based on sorting:

  • normal, running index
  • Rank Name Value 1 Value 2

    
    <table class="table datatable"
           data-json="data2.json"
           data-rank-mode="normal"
           data-id-field="name"
           data-sort-name="value1"
           data-sort-order="desc"
           data-pagination="false"
           data-show-pagination-switch="false">
        <thead>
            <tr>
                <th data-rank="true">Rank</th>
                <th data-field="code" data-sortable="true">Name</th>
                <th data-field="value1" data-sortable="true">Value 1</th>
                <th data-field="value2" data-sortable="true">Value 2</th>
            </tr>
        </thead>
    </table>
                            

  • grouped_muted, values are grouped so that equal values get same rank index. Only first rank index is shown normally, rest is muted.
  • Rank Name Value 1 Value 2

    
    <table class="table datatable"
           data-json="data2.json"
           data-rank-mode="grouped_muted"
           data-id-field="name"
           data-sort-name="value1"
           data-sort-order="desc"
           data-pagination="false"
           data-show-pagination-switch="false">
        <thead>
            <tr>
                <th data-rank="true">Rank</th>
                <th data-field="code" data-sortable="true">Name</th>
                <th data-field="value1" data-sortable="true">Value 1</th>
                <th data-field="value2" data-sortable="true">Value 2</th>
            </tr>
        </thead>
    </table>
                            

  • grouped_empty, values are grouped so that equal values get same rank index. Only first rank index is shown.
  • Rank Name Value 1 Value 2

    
    <table class="table datatable"
           data-json="data2.json"
           data-rank-mode="grouped_empty"
           data-id-field="name"
           data-sort-name="value1"
           data-sort-order="desc"
           data-pagination="false"
           data-show-pagination-switch="false">
        <thead>
            <tr>
                <th data-rank="true">Rank</th>
                <th data-field="code" data-sortable="true">Name</th>
                <th data-field="value1" data-sortable="true">Value 1</th>
                <th data-field="value2" data-sortable="true">Value 2</th>
            </tr>
        </thead>
    </table>
                            

Value formatters

Value in the cells can be formatted dynamically. js-datatable provides currently following formatters.

Numeric

  • int, numeric, integer
  • float1, numeric, float with one decimal
  • float2, numeric, float with two decimal
  • float3, numeric, float with three decimal
  • float4, numeric, float with four decimal
  • float1-exp, numeric, scientific number format with one decimal
  • float2-exp, numeric, scientific number format with two decimal
  • float3-exp, numeric, scientific number format with three decimal
  • float4-exp, numeric, scientific number format with four decimal
  • numeric-unit, numeric, transform number to use nearest unit [k, M, B, T]
Name int float1 float2 float3 float4


<table class="table datatable"
       data-json="data4.json"
       data-id-field="code"
       data-sort-name="value1"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1" data-sortable="true" data-value-type="int">int</th>
            <th data-field="value1" data-sortable="true" data-value-type="float1">float1</th>
            <th data-field="value1" data-sortable="true" data-value-type="float2">float2</th>
            <th data-field="value1" data-sortable="true" data-value-type="float3">float3</th>
            <th data-field="value1" data-sortable="true" data-value-type="float4">float4</th>
        </tr>
    </thead>
</table>
                    

Numeric with interval

Data format: [value] ([interval low value] - [interval high value])

  • int-interval and int-interval-muted, numeric with intervals, integers.
  • float1-interval and float1-interval-muted, numeric with intervals, floats with one decimals.
  • float2-interval and float2-interval-muted, numeric with intervals, floats with two decimals.
  • float3-interval and float3-interval-muted, numeric with intervals, floats with three decimals.
  • float4-interval and float4-interval-muted, numeric with intervals, floats with four decimals.
Name int-interval int-interval-muted float1-interval float1-interval-muted float2-interval float2-interval-muted float3-interval float3-interval-muted float4-interval float4-interval-muted


<table class="table datatable"
       data-json="data4.json"
       data-id-field="code"
       data-sort-name="value1i"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1i" data-sortable="true" data-value-type="int-interval">int-interval</th>
            <th data-field="value1i" data-sortable="true" data-value-type="int-interval-muted">int-interval-muted</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float1-interval">float1-interval</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float1-interval-muted">float1-interval-muted</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float2-interval">float2-interval</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float2-interval-muted">float2-interval-muted</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float3-interval">float3-interval</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float3-interval-muted">float3-interval-muted</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float4-interval">float4-interval</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float4-interval-muted">float4-interval-muted</th>
        </tr>
    </thead>
</table>
                    

Numeric with plusminus interval

Data format: [value1]±[plusminus value]

  • int-plusminus and int-plusminus-muted, numeric with plus minus interval, integers.
  • float1-plusminus and float1-plusminus-muted, numeric with plus minus interval, floats with one decimals.
  • float2-plusminus and float2-plusminus-muted, numeric with plus minus interval, floats with two decimals.
  • float3-plusminus and float3-plusminus-muted, numeric with plus minus interval, floats with three decimals.
  • float4-plusminus and float4-plusminus-muted, numeric with plus minus interval, floats with four decimals.
Name int-plusminus int-plusminus-muted float1-plusminus float1-plusminus-muted float2-plusminus float2-plusminus-muted float3-plusminus float3-plusminus-muted float4-plusminus float4-plusminus-muted


<table class="table datatable"
       data-json="data4.json"
       data-id-field="code"
       data-sort-name="value1p"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1p" data-sortable="true" data-value-type="int-plusminus">int-plusminus</th>
            <th data-field="value1p" data-sortable="true" data-value-type="int-plusminus-muted">int-plusminus-muted</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float1-plusminus">float1-plusminus</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float1-plusminus-muted">float1-plusminus-muted</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float2-plusminus">float2-plusminus</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float2-plusminus-muted">float2-plusminus-muted</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float3-plusminus">float3-plusminus</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float3-plusminus-muted">float3-plusminus-muted</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float4-plusminus">float4-plusminus</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float4-plusminus-muted">float4-plusminus-muted</th>
        </tr>
    </thead>
</table>
                    

Plusminus error

Data format: [plusminus value]

  • int-error, numeric plus minus interval, integers.
  • float1-error, numeric plus minus interval, floats with one decimals.
  • float2-error, numeric plus minus interval, floats with two decimals.
  • float3-error, numeric plus minus interval, floats with three decimals.
  • float4-error, numeric plus minus interval, floats with four decimals.
Name int-error float1-error float2-error float3-error float4-error


<table class="table datatable"
       data-json="data4.json"
       data-id-field="code"
       data-sort-name="value1e"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1e" data-sortable="true" data-value-type="int-error">int-error</th>
            <th data-field="value1e" data-sortable="true" data-value-type="float1-error">float1-error</th>
            <th data-field="value1e" data-sortable="true" data-value-type="float2-error">float2-error</th>
            <th data-field="value1e" data-sortable="true" data-value-type="float3-error">float3-error</th>
            <th data-field="value1e" data-sortable="true" data-value-type="float4-error">float4-error</th>
        </tr>
    </thead>
</table>
                    

Percentage

  • int-percentage, numeric, integer.
  • float1-percentage, numeric, float with one decimal.
  • float2-percentage, numeric, float with two decimal.
  • float3-percentage, numeric, float with three decimal.
  • float4-percentage, numeric, float with four decimal.
Name int-percentage float1-percentage float2-percentage float3-percentage float4-percentage


<table class="table datatable"
       data-json="data4.json"
       data-id-field="code"
       data-sort-name="value1"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1" data-sortable="true" data-value-type="int-percentage">int-percentage</th>
            <th data-field="value1" data-sortable="true" data-value-type="float1-percentage">float1-percentage</th>
            <th data-field="value1" data-sortable="true" data-value-type="float2-percentage">float2-percentage</th>
            <th data-field="value1" data-sortable="true" data-value-type="float3-percentage">float3-percentage</th>
            <th data-field="value1" data-sortable="true" data-value-type="float4-percentage">float4-percentage</th>
        </tr>
    </thead>
</table>
                    

Percentage with interval

Data format: [value] ([interval low value] - [interval high value])

  • int-percentage-interval and int-percentage-interval-muted, numeric with intervals, integers.
  • float1-percentage-interval and float1-percentage-interval-muted, numeric with intervals, floats with one decimals.
  • float2-percentage-interval and float2-percentage-interval-muted, numeric with intervals, floats with two decimals.
  • float3-percentage-interval and float3-percentage-interval-muted, numeric with intervals, floats with three decimals.
  • float4-percentage-interval and float4-percentage-interval-muted, numeric with intervals, floats with four decimals.
Name int-percentage-interval int-percentage-interval-muted float1-percentage-interval float1-percentage-interval-muted float2-percentage-interval float2-percentage-interval-muted float3-percentage-interval float3-percentage-interval-muted float4-percentage-interval float4-percentage-interval-muted


<table class="table datatable"
       data-json="data4.json"
       data-id-field="code"
       data-sort-name="value1i"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1i" data-sortable="true" data-value-type="int-percentage-interval">int-percentage-interval</th>
            <th data-field="value1i" data-sortable="true" data-value-type="int-percentage-interval-muted">int-percentage-interval-muted</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float1-percentage-interval">float1-percentage-interval</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float1-percentage-interval-muted">float1-percentage-interval-muted</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float2-percentage-interval">float2-percentage-interval</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float2-percentage-interval-muted">float2-percentage-interval-muted</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float3-percentage-interval">float3-percentage-interval</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float3-percentage-interval-muted">float3-percentage-interval-muted</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float4-percentage-interval">float4-percentage-interval</th>
            <th data-field="value1i" data-sortable="true" data-value-type="float4-percentage-interval-muted">float4-percentage-interval-muted</th>
        </tr>
    </thead>
</table>
                    

Percentage with plusminus interval

Data format: [value]±[plusminus value]

  • int-percentage-plusminus and int-percentage-plusminus-muted, numeric with plus minus interval, integers.
  • float1-percentage-plusminus and float1-percentage-plusminus-muted, numeric with plus minus interval, floats with one decimals.
  • float2-percentage-plusminus and float2-percentage-plusminus-muted, numeric with plus minus interval, floats with two decimals.
  • float3-percentage-plusminus and float3-percentage-plusminus-muted, numeric with plus minus interval, floats with three decimals.
  • float4-percentage-plusminus and float4-percentage-plusminus-muted, numeric with plus minus interval, floats with four decimals.
Name int-percentage-plusminus int-percentage-plusminus-muted float1-percentage-plusminus float1-percentage-plusminus-muted float2-percentage-plusminus float2-percentage-plusminus-muted float3-percentage-plusminus float3-percentage-plusminus-muted float4-percentage-plusminus float4-percentage-plusminus-muted


<table class="table datatable"
       data-json="data4.json"
       data-id-field="code"
       data-sort-name="value1i"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="value1p" data-sortable="true" data-value-type="int-percentage-plusminus">int-percentage-plusminus</th>
            <th data-field="value1p" data-sortable="true" data-value-type="int-percentage-plusminus-muted">int-percentage-plusminus-muted</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float1-percentage-plusminus">float1-percentage-plusminus</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float1-percentage-plusminus-muted">float1-percentage-plusminus-muted</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float2-percentage-plusminus">float2-percentage-plusminus</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float2-percentage-plusminus-muted">float2-percentage-plusminus-muted</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float3-percentage-plusminus">float3-percentage-plusminus</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float3-percentage-plusminus-muted">float3-percentage-plusminus-muted</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float4-percentage-plusminus">float4-percentage-plusminus</th>
            <th data-field="value1p" data-sortable="true" data-value-type="float4-percentage-plusminus-muted">float4-percentage-plusminus-muted</th>
        </tr>
    </thead>
</table>
                    

Data lists

  • list, data items delimited with , are split into <br> separated lines.
Name List


<table class="table datatable"
       data-json="data4.json"
       data-id-field="code"
       data-sort-name="list"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="list" data-sortable="true" data-value-type="list">List</th>
        </tr>
    </thead>
</table>
                    

Linking

  • url data in parsed into list of hrefs. Data format: [url];[url title],[url];[url title]
  • ref similar to url, but content is assumed to be reference to scientific article. Data format: [url to pdf];[reference label],[url to pdf];[reference label]
  • anchor data value used for href to jump to HTML link anchor. In case the link refers to collapsed item, it is opened.
Name Anchor URL References


<table class="table datatable"
       data-json="data2.json"
       data-id-field="code"
       data-sort-name="code"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="anchor" data-sortable="true" data-value-type="anchor">Anchor</th>
            <th data-field="url" data-sortable="true" data-value-type="url">URL</th>
            <th data-field="ref" data-sortable="true" data-value-type="ref">References</th>
        </tr>
    </thead>
</table>
                    

Inline data visualization

Inline data visualization can be used to visualize data series inside a cell. There is available a few different graph types:

  • inline-bar-horizontal-percentage and inline-bar-horizontal-thin-percentage to visualize percentages, values should add up to 100.
  • inline-bar-vertical, data series is visualized as bar plot.
  • inline-line and inline-line-steps, data series is visualized with line plot either linearly interpolating between data points or not.
  • inline-bar-vertical-tristate, data series is visualized as tristate box plot.
  • inline-indicator-value and inline-indicator-value-html, visualize data series with equal sized boxes, and fill color is used to indicate data point value.
  • inline-indicator-binary and inline-indicator-binary-html, visualize data series with equal sized boxes, and fill color is used to indicate data point value 0 or >0.
  • inline-indicator-tristate and inline-indicator-tristate-html, visualize data series with equal sized boxes, and fill color and offset is used to indicate data point values 0, >0 and <0.

Data series should be formatted for inline graphs as: [value1];[text label (with HTML tags) or HTML color code (#000000, rgb(), or rgba())],[value2];[text/color]

Name inline-bar-horizontal-percentage inline-bar-horizontal-thin-percentage

Name inline-bar-vertical inline-bar-vertical-tristate inline-line inline-line-steps

Name inline-indicator-value inline-indicator-value-html inline-indicator-binary inline-indicator-binary-html inline-indicator-tristate inline-indicator-tristate-html


<table class="table datatable"
       data-json="data4.json"
       data-id-field="name"
       data-sort-name="code"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="hbar" data-sortable="true" data-value-type="inline-bar-horizontal-percentage">inline-bar-horizontal-percentage</th>
            <th data-field="hbar" data-sortable="true" data-value-type="inline-bar-horizontal-thin-percentage">inline-bar-horizontal-thin-percentage</th>
        </tr>
    </thead>
</table>

<table class="table datatable"
       data-json="data4.json"
       data-id-field="name"
       data-sort-name="code"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="line" data-sortable="true" data-value-type="inline-bar-vertical">inline-bar-vertical</th>
            <th data-field="line" data-sortable="true" data-value-type="inline-bar-vertical-tristate">inline-bar-vertical-tristate</th>
            <th data-field="line" data-sortable="true" data-value-type="inline-line">inline-line</th>
            <th data-field="line" data-sortable="true" data-value-type="inline-line-steps">inline-line-steps</th>
        </tr>
    </thead>
</table>

<table class="table datatable"
       data-json="data4.json"
       data-id-field="name"
       data-sort-name="code"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code" data-sortable="true">Name</th>
            <th data-field="line" data-sortable="true" data-value-type="inline-indicator-value">inline-indicator-value</th>
            <th data-field="line" data-sortable="true" data-value-type="inline-indicator-value-html">inline-indicator-value-html</th>
            <th data-field="binary" data-sortable="true" data-value-type="inline-indicator-binary">inline-indicator-binary</th>
            <th data-field="binary" data-sortable="true" data-value-type="inline-indicator-binary-html">inline-indicator-binary-html</th>
            <th data-field="line" data-sortable="true" data-value-type="inline-indicator-tristate">inline-indicator-tristate</th>
            <th data-field="line" data-sortable="true" data-value-type="inline-indicator-tristate-html">inline-indicator-tristate-html</th>
        </tr>
    </thead>
</table>
                    

Tags

Values in columns can be grouped, and for each group a distinct background color can be assigned. Tagging mode is set by data-tag-mode, available modes are

  • global, all columns are pulled together before assigning a tag color.
  • column, all values from a single column is pulled together before assigning a tag color.

Name Value 1 Value 2 Feature 1 Feature 2


<table class="table datatable"
       data-json="data2.json"
       data-id-field="name"
       data-sort-name="value1"
       data-sort-order="desc"
       data-pagination="false"
       data-tag-mode="global"
       data-show-pagination-switch="false">
    <thead>
        <tr>
            <th data-field="code"
                data-sortable="true">
                Name
            </th>
            <th data-align="center"
                data-field="value1"
                data-sortable="true"
                data-tag="true">
                Value 1
            </th>
            <th data-align="center"
                data-field="value2"
                data-sortable="true"
                data-tag="true">
                Value 2
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-field="feature1"
                data-sortable="true"
                data-tag="true">
                Feature 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-field="feature2"
                data-sortable="true"
                data-tag="true">
                Feature 2
            </th>
        </tr>
    </thead>
</table>
                    

Filtering

Column based filtering.

Name Value 1 Value 2 Feature 1 Feature 2


<table class="table datatable"
       data-json="data2.json"
       data-id-field="name"
       data-sort-name="value1"
       data-sort-order="desc"
       data-filter-control="true"
       data-filter-show-clear="true"
    >
    <thead>
        <tr>
            <th data-field="code"
                data-sortable="true">
                Name
            </th>
            <th data-align="center"
                data-field="value1"
                data-sortable="true">
                Value 1
            </th>
            <th data-align="center"
                data-field="value2"
                data-sortable="true">
                Value 2
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-field="feature1"
                data-sortable="true"
                data-filter-control="select">
                Feature 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-field="feature2"
                data-sortable="true"
                data-filter-control="select">
                Feature 2
            </th>
        </tr>
    </thead>
</table>
                    

Row highlighting

To assign colors to rows, use data-row-css="info". In case of dynamic data population, add "row_css": "info" field in JSON data structure or row_css: info in YAML data structure. Possible colors are:

  • active
  • success
  • info
  • warning
  • danger

Rank Name Value 1 Value 2


<table class="table datatable"
       data-json="data2.json"
       data-rank-mode="grouped_muted"
       data-row-highlighting="true"
       data-id-field="name"
       data-sort-name="value1"
       data-sort-order="desc"
       data-pagination="false"
       data-show-pagination-switch="false"
    >
    <thead>
        <tr>
            <th data-field="code"
                data-sortable="true">
                Name
            </th>
            <th data-align="center"
                data-field="value1"
                data-sortable="true">
                Value 1
            </th>
            <th data-align="center"
                data-field="value2"
                data-sortable="true">
                Value 2
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-field="feature1"
                data-sortable="true"
                data-filter-control="select">
                Feature 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-field="feature2"
                data-sortable="true"
                data-filter-control="select">
                Feature 2
            </th>
        </tr>
    </thead>
</table>
                    

[
    {
        "code": "Red",
        "value1": "12",
        "value2": "22",
        "value3": "5",
        "value4": "34",
        "feature1": "square",
        "feature2": "triangle",
        "row_css": "danger"
    },
    {
        "code": "Blue",
        "value1": "62",
        "value2": "42",
        "value3": "8",
        "value4": "64",
        "feature1": "circle",
        "feature2": "triangle",
        "row_css": "warning"
    }
]
                    


Multiline headers

With js-datatable, you can use multiple row in thead normally, you just need to use rowspan and colspan attributes correctly. Example using multiple header rows.

Name Values Features
1 2 1 2


<table class="table datatable"
       data-json="data2.json"
       data-id-field="name"
       data-sort-name="value1"
       data-sort-order="desc"
       data-filter-control="true"
       data-filter-show-clear="true"
    >
    <thead>
        <tr>
            <th rowspan="2" data-field="code"
                data-sortable="true">
                Name
            </th>
            <th colspan="2" class="sep-left-cell">
                Values
            </th>
            <th colspan="2" class="sep-left-cell">
                Features
            </th>
        </tr>
        <tr>
            <th class="sep-left-cell"
                data-align="center"
                data-field="value1"
                data-sortable="true">
                1
            </th>
            <th data-align="center"
                data-field="value2"
                data-sortable="true">
                2
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-field="feature1"
                data-sortable="true"
                data-tag="true"
                data-filter-control="select">
                1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-field="feature2"
                data-sortable="true"
                data-tag="true"
                data-filter-control="select">
                2
            </th>
        </tr>
    </thead>
</table>
                    

Visualization examples

Bar

Rank System Value 1 Value 2


<table
        class="datatable table"
        data-json="data2.json"
        data-show-chart="true"
        data-id-field="code"
        data-rank-mode="grouped_muted"
        data-chart-modes="bar"
        data-bar-show-xaxis="true"
        data-sort-name="value1"
        data-sort-order="desc"
        data-pagination="false"
        data-show-pagination-switch="false"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1"
                data-sortable="true"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value2"
                data-sortable="true"
                data-visible="true">
                Value 2
            </th>
        </tr>
    </thead>
</table>
                    

Bar with error bars

Rank System Value 1 Value 2


<table
        class="datatable table"
        data-json="data2.json"
        data-show-chart="true"
        data-id-field="code"
        data-rank-mode="grouped_muted"
        data-chart-modes="bar"
        data-bar-show-xaxis="true"
        data-sort-name="value1i"
        data-sort-order="desc"
        data-pagination="false"
        data-show-pagination-switch="false"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1i"
                data-sortable="true"
                data-value-type="float1-percentage-interval-muted"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1p"
                data-sortable="true"
                data-value-type="int-percentage-plusminus-muted"
                data-visible="true">
                Value 2
            </th>
        </tr>
    </thead>
</table>
                    

Line

Rank System Value 1 Value 2


<table
        class="datatable table"
        data-json="data2.json"
        data-show-chart="true"
        data-id-field="code"
        data-rank-mode="grouped_muted"
        data-chart-modes="line"
        data-bar-show-xaxis="true"
        data-sort-name="value1"
        data-sort-order="desc"
        data-pagination="false"
        data-show-pagination-switch="false"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1"
                data-sortable="true"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value2"
                data-sortable="true"
                data-visible="true">
                Value 2
            </th>
        </tr>
    </thead>
</table>
                    

Line with error bar

Rank System Value 1 Value 2


<table
    class="datatable table"
    data-json="data4.json"
    data-show-chart="true"
    data-id-field="code"
    data-rank-mode="grouped_muted"
    data-chart-modes="line"
    data-sort-name="value1i"
    data-sort-order="desc"
    data-pagination="false"
    data-line-show-error-bar="true"
    data-line-show-interval="false"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1i"
                data-sortable="true"
                data-value-type="float1-percentage-interval-muted"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1p"
                data-sortable="true"
                data-value-type="int-percentage-plusminus-muted"
                data-visible="true">
                Value 2
            </th>
        </tr>
    </thead>
</table>
                    

Line with error bounds

Rank System Value 1 Value 2


<table
    class="datatable table"
    data-json="data4.json"
    data-show-chart="true"
    data-id-field="code"
    data-rank-mode="grouped_muted"
    data-chart-modes="line"
    data-sort-name="value1i"
    data-sort-order="desc"
    data-pagination="false"
    data-show-pagination-switch="false"
    data-line-show-error-bar="false"
    data-line-show-interval="true"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1i"
                data-sortable="true"
                data-value-type="float1-percentage-interval-muted"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1p"
                data-sortable="true"
                data-value-type="int-percentage-plusminus-muted"
                data-visible="true">
                Value 2
            </th>
        </tr>
    </thead>
</table>
                    

Scatter

Two dimensional data visualisation. Visualized columns can be selected from dropdown menus. Default columns for scatter chart are set with data-scatter-x and data-scatter-y attributes.

Rank System Value 1 Value 2


<table
    class="datatable table"
    data-json="data2.json"
    data-show-chart="true"
    data-id-field="code"
    data-rank-mode="grouped_muted"
    data-chart-modes="scatter"
    data-scatter-x="value1"
    data-scatter-y="value2"
    data-sort-name="value1"
    data-sort-order="desc"
    data-pagination="false"
    data-show-pagination-switch="false"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1"
                data-sortable="true"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value2"
                data-sortable="true"
                data-visible="true">
                Value 2
            </th>
        </tr>
    </thead>
</table>
                    

Scatter with error bars

Rank System Value 1 Value 2


<table
    class="datatable table"
    data-json="data2.json"
    data-show-chart="true"
    data-id-field="code"
    data-rank-mode="grouped_muted"
    data-chart-modes="scatter"
    data-scatter-x="value1"
    data-scatter-y="value2"
    data-sort-name="value1"
    data-sort-order="desc"
    data-pagination="false"
    data-show-pagination-switch="false"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1"
                data-sortable="true"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value2"
                data-sortable="true"
                data-visible="true">
                Value 2
            </th>
        </tr>
    </thead>
</table>
                    

Comparison

Grouped bar chart to ease the comparison of multiple one dimensional values. Visualized row are selected from dropdown menus. User can setup multiple comparison sets, collection of columns to provide different view to the data. Comparison sets are set with data-comparison-sets-json attribute, and default comparison setup is set with data-comparison-active-set attribute. Default rows for comparison are set with data-comparison-a-row and data-comparison-b-row attributes.

Rank System Value 1 Value 2 Value 3 Value 4


<table
        class="datatable table"
        data-json="data2.json"
        data-show-chart="true"
        data-id-field="code"
        data-rank-mode="grouped_muted"
        data-chart-modes="comparison"
        data-comparison-row-id-field="code"
        data-comparison-sets-json='[{"title": "All values","data_axis_title": "Value axis", "fields": ["value1", "value2", "value3", "value4"], "field_titles": ["custom title 1","custom title 2","custom title 3","custom title 4"]},{"title": "Sub comparison 1","data_axis_title": "Value", "fields": ["value1", "value2"]},{"title": "Sub comparison 2", "data_axis_title": "Accuracy", "fields": ["value3", "value4"]}]'
        data-comparison-active-set="All values"
        data-comparison-a-row="Red"
        data-comparison-b-row="Blue"

        data-sort-name="value1"
        data-sort-order="desc"
        data-pagination="false"
        data-show-pagination-switch="false"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1"
                data-sortable="true"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value2"
                data-sortable="true"
                data-visible="true">
                Value 2
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value3"
                data-sortable="true"
                data-visible="true">
                Value 3
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value4"
                data-sortable="true"
                data-visible="true">
                Value 4
            </th>
        </tr>
    </thead>
</table>
                    

Multiple visualization types

Rank System Value 1 Value 2 Value 3 Value 4


<table
        class="datatable table"
        data-json="data2.json"
        data-show-chart="true"
        data-id-field="code"
        data-rank-mode="grouped_muted"
        data-chart-modes="bar,scatter,comparison"
        data-chart-default-mode="scatter"

        data-scatter-x="value1"
        data-scatter-y="value2"

        data-comparison-row-id-field="code"
        data-comparison-sets-json='[{"title": "All values","data_axis_title": "Value axis", "fields": ["value1", "value2", "value3", "value4"], "field_titles": ["custom title 1","custom title 2","custom title 3","custom title 4"]},{"title": "Sub comparison 1","data_axis_title": "Value", "fields": ["value1", "value2"]},{"title": "Sub comparison 2", "data_axis_title": "Accuracy", "fields": ["value3", "value4"]}]'
        data-comparison-active-set="All values"
        data-comparison-a-row="Red"
        data-comparison-b-row="Blue"

        data-sort-name="value1"
        data-sort-order="desc"
        data-pagination="false"
        data-show-pagination-switch="false"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1"
                data-sortable="true"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value2"
                data-sortable="true"
                data-visible="true">
                Value 2
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value3"
                data-sortable="true"
                data-visible="true">
                Value 3
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value4"
                data-sortable="true"
                data-visible="true">
                Value 4
            </th>
        </tr>
    </thead>
</table>
                    

Horizontal line

In some cases there is a need to draw horizontal line at certain row value in the bar chart. To enable this feature use data-bar-hline="true" attribute and mark row with data-hline="true". In case of dynamic data population, add "hline": "true" field in JSON data structure or hline: true in YAML data structure. Color for the line is taken from row_css field (see more).

Rank System Value 1 Value 2 Value 3 Value 4


<table
        class="datatable table"
        data-json="data3.json"
        data-show-chart="true"
        data-id-field="code"
        data-rank-mode="grouped_muted"
        data-chart-modes="bar,scatter,comparison"
        data-chart-default-mode="scatter"

        data-scatter-x="value1"
        data-scatter-y="value2"

        data-comparison-row-id-field="code"
        data-comparison-sets-json='[{"title": "All values","data_axis_title": "Value axis", "fields": ["value1", "value2", "value3", "value4"], "field_titles": ["custom title 1","custom title 2","custom title 3","custom title 4"]},{"title": "Sub comparison 1","data_axis_title": "Value", "fields": ["value1", "value2"]},{"title": "Sub comparison 2", "data_axis_title": "Accuracy", "fields": ["value3", "value4"]}]'
        data-comparison-active-set="All values"
        data-comparison-a-row="Red"
        data-comparison-b-row="Blue"

        data-sort-name="value1"
        data-sort-order="desc"
        data-pagination="false"
        data-show-pagination-switch="false"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1"
                data-sortable="true"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value2"
                data-sortable="true"
                data-visible="true">
                Value 2
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value3"
                data-sortable="true"
                data-visible="true">
                Value 3
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value4"
                data-sortable="true"
                data-visible="true">
                Value 4
            </th>
        </tr>
    </thead>
</table>
                    

Row highlighting

If data-row-highlighting is enabled, row colors are relayed onto bar and scatter visualizations.

Rank System Value 1 Value 2 Value 3 Value 4


<table
        class="datatable table"
        data-json="data2.json"
        data-show-chart="true"
        data-id-field="code"
        data-rank-mode="grouped_muted"
        data-row-highlighting="true"
        data-chart-modes="bar,scatter,comparison"
        data-chart-default-mode="scatter"

        data-scatter-x="value1"
        data-scatter-y="value2"

        data-comparison-row-id-field="code"
        data-comparison-sets-json='[{"title": "All values","data_axis_title": "Value axis", "fields": ["value1", "value2", "value3", "value4"], "field_titles": ["custom title 1","custom title 2","custom title 3","custom title 4"]},{"title": "Sub comparison 1","data_axis_title": "Value", "fields": ["value1", "value2"]},{"title": "Sub comparison 2", "data_axis_title": "Accuracy", "fields": ["value3", "value4"]}]'
        data-comparison-active-set="All values"
        data-comparison-a-row="Red"
        data-comparison-b-row="Blue"

        data-sort-name="value1"
        data-sort-order="desc"
        data-pagination="false"
        data-show-pagination-switch="false"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1"
                data-sortable="true"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value2"
                data-sortable="true"
                data-visible="true">
                Value 2
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value3"
                data-sortable="true"
                data-visible="true">
                Value 3
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value4"
                data-sortable="true"
                data-visible="true">
                Value 4
            </th>
        </tr>
    </thead>
</table>
                    

Customization

This is an example how datatable is created from javascript, and customized.

Rank System Value 1 Value 2 Value 3 Value 4


<table
        id="js-customization-example"
        class="table"
        data-json="data3.json"
        data-show-chart="true"
        data-id-field="code"
        data-rank-mode="grouped_muted"
        data-chart-modes="bar,scatter,comparison"
        data-chart-default-mode="scatter"

        data-scatter-x="value1"
        data-scatter-y="value2"

        data-comparison-row-id-field="code"
        data-comparison-sets-json='[{"title": "All values","data_axis_title": "Value axis", "fields": ["value1", "value2", "value3", "value4"], "field_titles": ["custom title 1","custom title 2","custom title 3","custom title 4"]},{"title": "Sub comparison 1","data_axis_title": "Value", "fields": ["value1", "value2"]},{"title": "Sub comparison 2", "data_axis_title": "Accuracy", "fields": ["value3", "value4"]}]'
        data-comparison-active-set="All values"
        data-comparison-a-row="Red"
        data-comparison-b-row="Blue"

        data-sort-name="value1"
        data-sort-order="desc"
        data-pagination="false"
        data-show-pagination-switch="false"
    >
    <thead>
        <tr>
            <th data-sortable="false" data-rank="true">
                <span class="text-muted">Rank</span>
            </th>
            <th class="sep-left-cell"
                data-chartable="false"
                data-field="code"
                data-sortable="true"
                data-visible="true">
                System
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value1"
                data-sortable="true"
                data-visible="true">
                Value 1
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value2"
                data-sortable="true"
                data-visible="true">
                Value 2
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value3"
                data-sortable="true"
                data-visible="true">
                Value 3
            </th>
            <th class="sep-left-cell"
                data-align="center"
                data-beginatzero="false"
                data-chartable="true"
                data-field="value4"
                data-sortable="true"
                data-visible="true">
                Value 4
            </th>
        </tr>
    </thead>
</table>
                    

$( document ).ready(function() {
    $('#js-customization-example').datatable({
        bar: {
            height: 440,
        },
        scatter: {
            height: 400,
        },
        comparison: {
            height: 400,
        },
        icon: {
            bar: '',
            scatter: '',
            comparison: '',
            off: '',
            caret: '',
            chartable: ''
        },
        label: {
            bar: 'Custom Bar',
            scatter: 'Custom Scatter',
            comparison: 'Custom Comparison',
            off: 'Off',
            select_x_axis: 'Select data field for X-axis',
            select_y_axis: 'Select data field for Y-axis',
            select_set: 'Select set',
            select_a_row: 'Select row A',
            select_b_row: 'Select row B',
        },
        button_css:{
            bar: 'btn btn-primary selector-button',
            scatter: 'btn btn-danger selector-button',
            comparison: 'btn btn-warning selector-button',
            off: 'btn btn-default selector-button',
        },
    });
});