Skip to main content
The Table panel displays data in a tabular format with extensive customization options for cells, columns, and data presentation.

​
Overview

The Table panel provides:
  • Multiple cell display modes
  • Sortable and filterable columns
  • Column freezing and resizing
  • Custom cell rendering (sparklines, gauges, images)
  • Footer calculations
  • Pagination support

​
Panel Options

The Table panel is defined in public/app/plugins/panel/table/module.tsx:18: 
export const plugin = new PanelPlugin<Options, FieldConfig>(TablePanel)
  .setPanelChangeHandler(tablePanelChangedHandler)
  .setMigrationHandler(tableMigrationHandler)
  .useFieldConfig({
    standardOptions: {
      [FieldConfigProperty.Actions]: {
        hideFromDefaults: false,
      },
    },
    useCustomConfig: (builder) => {
      addTableCustomConfig(builder, {
        filters: true,
        wrapHeaderText: true,
        hideFields: true,
      });
    },
  })
  .setPanelOptions((builder) => {
    addTableCustomPanelOptions(builder);
  });

​
Table Options Interface

From public/app/plugins/panel/table/panelcfg.gen.ts:18: 
interface Options {
  cellHeight?: TableCellHeight;      // 'sm' | 'md' | 'lg'
  disableKeyboardEvents?: boolean;
  enablePagination?: boolean;
  frameIndex: number;                // Selected data frame index
  frozenColumns?: {
    left?: number;                   // Number of columns to freeze on left
  };
  maxRowHeight?: number;             // Maximum row height in pixels
  showHeader: boolean;               // Display column headers
  showTypeIcons?: boolean;           // Show data type icons in headers
  sortBy?: Array<TableSortByFieldState>;
}

​
Default Options

From public/app/plugins/panel/table/panelcfg.gen.ts:59: 
const defaultOptions: Partial<Options> = {
  cellHeight: TableCellHeight.Sm,
  frameIndex: 0,
  showHeader: true,
  showTypeIcons: false,
  sortBy: [],
};

​
Cell Height Options

enum TableCellHeight {
  Sm = 'sm',   // Small (compact)
  Md = 'md',   // Medium
  Lg = 'lg'    // Large
}

​
Sorting

interface TableSortByFieldState {
  displayName: string;
  desc?: boolean;  // Sort descending
}

​
Field Configuration

​
Cell Options

Configured via custom editor at public/app/plugins/panel/table/module.tsx:52: 
interface TableCellOptions {
  type: TableCellDisplayMode;
  mode?: string;  // Submode for specific cell types
  // Additional options based on type
}

​
Cell Display Modes

enum TableCellDisplayMode {
  Auto = 'auto',                    // Automatic based on data type
  ColorText = 'color-text',         // Colored text
  ColorBackground = 'color-background', // Colored cell background
  ColorBackgroundSolid = 'color-background-solid',
  GradientGauge = 'gradient-gauge', // Horizontal gauge
  LCDGauge = 'lcd-gauge',          // LCD-style gauge
  BasicGauge = 'basic-gauge',       // Simple gauge
  JSONView = 'json-view',           // Formatted JSON
  Image = 'image',                  // Image display
  Sparkline = 'sparkline',          // Mini time series
  DataLinks = 'data-links',         // Clickable links
}

​
Cell-Specific Options

​
Bar Gauge Cell

interface BarGaugeCellOptions {
  type: 'gradient-gauge';
  mode?: 'basic' | 'lcd';
  valueDisplayMode?: 'color' | 'text' | 'hidden';
}

​
Sparkline Cell

Configured at public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx: 
interface SparklineCellOptions {
  type: 'sparkline';
  fillOpacity?: number;  // 0-100
  lineWidth?: number;
  showPoints?: 'auto' | 'always' | 'never';
}

​
Image Cell

interface ImageCellOptions {
  type: 'image';
  cellDisplayMode?: 'thumbnail' | 'cover';
  width?: number;       // Fixed width in pixels
  height?: number;      // Fixed height in pixels
}
Configured at public/app/plugins/panel/table/module.tsx:36: 
interface FooterOptions {
  reducers?: string[];  // Array of reducer functions
}
Available reducers:
  • sum - Sum of all values
  • mean - Average value
  • min - Minimum value
  • max - Maximum value
  • count - Number of values
  • last - Last value
  • And more…

​
Tooltips

Configured at public/app/plugins/panel/table/module.tsx:79: 
interface TooltipOptions {
  field?: string;                    // Field name to show in tooltip
  placement?: TableCellTooltipPlacement;
}

enum TableCellTooltipPlacement {
  Auto = 'auto',
  Top = 'top',
  Right = 'right',
  Bottom = 'bottom',
  Left = 'left',
}

​
Cell Value Inspect

From public/app/plugins/panel/table/module.tsx:64: 
interface FieldConfig {
  inspect?: boolean;  // Enable cell value inspection in modal
}
Allows inspecting full cell content in a modal dialog for:
  • Auto cells
  • JSON view cells
  • Color text/background cells

​
Styling from Field

From public/app/plugins/panel/table/module.tsx:118: 
interface FieldConfig {
  styleField?: string;  // Field containing JSON with CSS properties
}
Allows dynamic cell styling using a field containing CSS properties: 
{
  "color": "#ff0000",
  "fontWeight": "bold",
  "backgroundColor": "#f0f0f0"
}

​
Panel JSON Example

​
Basic Table

{
  "type": "table",
  "title": "Server Status",
  "gridPos": { "x": 0, "y": 0, "w": 12, "h": 8 },
  "targets": [
    {
      "datasource": { "type": "prometheus" },
      "expr": "up",
      "format": "table"
    }
  ],
  "options": {
    "showHeader": true,
    "cellHeight": "sm",
    "enablePagination": false,
    "frozenColumns": { "left": 1 },
    "sortBy": [
      { "displayName": "Time", "desc": true }
    ]
  },
  "fieldConfig": {
    "defaults": {
      "custom": {
        "cellOptions": {
          "type": "auto"
        },
        "inspect": false
      }
    },
    "overrides": []
  }
}

​
Table with Custom Cells

{
  "type": "table",
  "title": "System Metrics",
  "fieldConfig": {
    "defaults": {},
    "overrides": [
      {
        "matcher": { "id": "byName", "options": "CPU" },
        "properties": [
          {
            "id": "custom.cellOptions",
            "value": {
              "type": "gradient-gauge",
              "mode": "basic"
            }
          },
          {
            "id": "unit",
            "value": "percent"
          },
          {
            "id": "min",
            "value": 0
          },
          {
            "id": "max",
            "value": 100
          },
          {
            "id": "thresholds",
            "value": {
              "mode": "absolute",
              "steps": [
                { "value": 0, "color": "green" },
                { "value": 70, "color": "yellow" },
                { "value": 90, "color": "red" }
              ]
            }
          }
        ]
      },
      {
        "matcher": { "id": "byName", "options": "Trend" },
        "properties": [
          {
            "id": "custom.cellOptions",
            "value": {
              "type": "sparkline",
              "fillOpacity": 10,
              "lineWidth": 1,
              "showPoints": "never"
            }
          }
        ]
      },
      {
        "matcher": { "id": "byName", "options": "Status" },
        "properties": [
          {
            "id": "custom.cellOptions",
            "value": { "type": "color-background-solid" }
          },
          {
            "id": "mappings",
            "value": [
              { "type": "value", "value": "OK", "text": "✓ OK", "color": "green" },
              { "type": "value", "value": "ERROR", "text": "✗ Error", "color": "red" }
            ]
          }
        ]
      }
    ]
  },
  "options": {
    "showHeader": true,
    "cellHeight": "md",
    "footer": {
      "reducers": ["mean", "max"]
    }
  }
}

​
Advanced Features

​
Column Filtering

Enable filtering UI for columns to allow users to filter data client-side.

​
Pagination

For large datasets, enable pagination: 
{
  "options": {
    "enablePagination": true
  }
}

​
Frozen Columns

Freeze columns on the left during horizontal scrolling: 
{
  "options": {
    "frozenColumns": { "left": 2 }
  }
}
Configure clickable links in cells using the standard field config links option: 
{
  "fieldConfig": {
    "defaults": {
      "links": [
        {
          "title": "View Details",
          "url": "/d/dashboard-uid?var-server=${__data.fields.server}"
        }
      ]
    }
  }
}

​
Implementation Details

The Table panel uses React Table library for advanced table features. Key files:
  • public/app/plugins/panel/table/module.tsx - Plugin definition
  • public/app/plugins/panel/table/TablePanel.tsx - Component implementation
  • public/app/plugins/panel/table/TableCellOptionEditor.tsx - Cell options UI
  • public/app/plugins/panel/table/panelcfg.gen.ts - Generated types
The Table panel supports field actions, which appear as buttons in cells for quick access to related functionality.

Graph Panel

Visualize time series data

Stat Panel

Display single statistical values