Datatable Panel

Panel

Datatable panel for Grafana
  • Showcase Paging
    Showcase Paging
  • Showcase Scrolling
    Showcase Scrolling
  • Showcase Compact Numbered
    Showcase Compact Numbered
  • Options
    Options
  • Datatable Options
    Datatable Options
  • Thresholding with Row Coloring
    Thresholding with Row Coloring
  • Thresholding with Cell Coloring
    Thresholding with Cell Coloring
  • Thresholding with Value Coloring
    Thresholding with Value Coloring

Grafana Datatable Panel

This panel plugin provides a Datatables.net table panel for Grafana 3.x/4.x

Screenshots

Paging enabled

Default Paging

Scrolling enabled

Scrolling

Light Theme with Paging

Light Theme with Paging

Numbered Rows and Compact Style

Numbered and Compact Rows

Options

Options Tab

Options

Same options as built-in table panel

Datatable Options Tab

Datatable Options

Table Display Options

  • Font Size - set font size of table content
  • Scroll - toggle for scrolling vs Paging
  • Paging Options
    • Rows Per Page - number of rows to display when paging is enabled
    • Paging type - multiple navigation options

Table Options

  • Row Numbers - toggle to show row numbers
  • Length Change Enabled - top left dropdown for showing alternate page sizes
  • Search Enabled - toggle to allow searching table content (regex is enabled)
  • Info - Displays the "Show N of X entries" on bottom left of table
  • Cell Borders - show borders around each Cell (cannot be enabled with Row Borders)
  • Row Borders - show border between rows
  • Compact Rows - uses less padding for denser data display
  • Striped Rows - non-colored rows will be "striped" odd/even
  • Order Column - Highlights the column used for sorting
  • Hover - Highlights row on mouse hover

Theme Settings

  • Basic theme is currently the only option, more to be added

Thresholding

Row-based threshold coloring

Thresholding with Row Coloring

Cell based threshold coloring

Thresholding with Cell Coloring

Cell based threshold value coloring

Thresholding with Value Coloring

RowColumn threshold coloring

This option sets the row color to the "highest" threshold found for all cells in row.

It also sets the color for each cell according to the threshold (you can tell which columns actually exceeded the threshold).

This means - a row can have an overall color, with each cell indicating it's real threshold color.

Thresholding with RowColumn1

Thresholding with RowColumn2

RowColumn threshold coloring including row counter

Same as above, but with row counter included

Thresholding with RowColumn including row count


Features

  • Feature parity with built-in Grafana Table Panel
  • Row coloring uses the "highest" threshold color of all columns
  • New "RowColumn" threshold color option: Sets color to "highest" threshold found for all cells in row. Also sets color for each cell according to the threshold. This means - a row can have an overall color, with each cell indicating it's real threshold color.
  • Set font size for rows
  • Scrolling
  • Paging
    • Preset page sizes
    • Multiple paging types
    • Dropdown for page size
  • Row Numbers reactive to filtering
  • Searchable table content (filtering), regex enabled

TODO

  • [+] Column is not working
  • Add option for a cell or row to link to another page
  • Add Additional Themes
    • Bootstrap:
      • Requires a modified .js file since it looks for "datatables.net" - need workaround
    • Foundation:
      • Requires a modified .js file since it looks for "datatables.net" - need workaround
      • Needs a new CSS that is "dark" for Grafana - the builtin is light http://foundation.zurb.com/sites/download.html/#customizeFoundation
    • JQueryUI ThemeRoller
      • Requires a modified .js file since it looks for "datatables.net" - need workaround

Building

This plugin relies on Grunt/NPM/Bower, typical build sequence:

npm install
bower install
grunt

For development, you can run:

grunt watch

The code will be parsed then copied into "dist" if "jslint" passes without errors.

Docker Support

A docker-compose.yml file is include for easy development and testing, just run

docker-compose up

Then browse to http://localhost:3000

External Dependencies

  • Grafana 3.x/4.x

Build Dependencies

  • npm
  • bower
  • grunt

Acknowledgements

This panel is based on the "Table" panel by GrafanaLabs

Changelog

v0.0.1
  • Initial commit
Install Plugin

Version

Dependencies:
  • Grafana 3.x.x