Skip to main content
Mapagam

Creating Table Panels

1. Configuring Table Columns

Column Type Description Notes
field.name string Name of the field to display Required for all columns
field.type string Type of the field (e.g., time, number, string) Used for formatting and sorting
field.config object Configuration options for the field Can include displayName, unit, decimals
width number Width of the column in pixels Default is auto-calculated
align string Alignment of the column content (e.g., left, center, right) Default is left
sort boolean Enable sorting for this column Defaults to false

Example: Configuring a Column with Custom Display Name

{
  "field": {
    "name": "cpu_usage",
    "config": {
      "displayName": "CPU Usage (%)"
    }
  },
  "width": 120,
  "align": "right",
  "sort": true
}

Example: Using Time Field with Custom Format

{
  "field": {
    "name": "timestamp",
    "type": "time",
    "config": {
      "unit": "dateTimeAsUS"
    }
  },
  "width": 180,
  "align": "left",
  "sort": true
}

2. Setting Column Width

Property Values Description
width number Width of the column in pixels. Default is 100px.
minWidth number Minimum width of the column in pixels. Prevents column from shrinking below this value.
maxWidth number Maximum width of the column in pixels. Prevents column from growing above this value.

Example: Configuring Column Widths

{
  "columns": [
    {
      "name": "status",
      "width": 120,
      "minWidth": 80,
      "maxWidth": 200
    }
  ]
}

3. Using Cell Display Mode

Property Description Values Notes
cell.displayMode Controls how individual cells are displayed default, json, table Default is default which shows raw values
cell.json JSON formatting options for cell display true, false When enabled, displays JSON content in a readable format
cell.table Table formatting options for cell display true, false When enabled, displays table content in a structured format

Example: Configuring Cell Display Mode

{
  "cell": {
    "displayMode": "json",
    "json": true
  }
}
Note: The cell.displayMode property allows you to customize how individual cells in a table panel are rendered, particularly useful for complex data types like JSON or nested tables.

4. Adding Column Filters

Filter Type Description Usage Notes
Column Filter Applies a filter to a specific column in the table panel Configured via the "Column Filters" section in panel options Filters are applied client-side and affect the displayed data
Operator Defines how the filter condition is evaluated (e.g., equals, contains) Selected from a dropdown in the filter configuration Supports various operators like =, !=, contains, regex
Value The value to filter on for the selected column Entered as a string or numeric input in the filter configuration Can be a static value or use variables (e.g., $__user)

Example: Configuring a Column Filter

{
  "field": "status",
  "operator": "=",
  "value": "active"
}
Note: Column filters are applied after the query results are received and can significantly impact performance if not used carefully.
Property Description Values Notes
links Array of cell link configurations [] Each link object defines a URL and target
url URL to navigate to when cell is clicked string Supports variables like $__cell
targetBlank Open link in new tab/window true | false Default is false 
{
  "links": [
    {
      "url": "https://grafana.com/docs/grafana/latest/panels/visualizations/table-panel/",
      "targetBlank": true
    }
  ]
}
Note: Cell links support variable substitution using Grafana's variable syntax, allowing dynamic URLs based on cell values or dashboard variables.

6. Using Column Overrides

Property Description Values Notes
override Column override configuration true / false Enable or disable column override
matcher Matcher to identify columns regex, name Specify how to match columns for override
options Override options for matched columns displayName, unit, decimals Properties to override for matched columns

Example: Override Column Display Name

{
  "override": true,
  "matcher": {
    "id": "name",
    "options": {
      "name": "cpu_usage"
    }
  },
  "options": {
    "displayName": "CPU Usage (%)"
  }
}

Example: Override Column Unit

{
  "override": true,
  "matcher": {
    "id": "regex",
    "options": {
      "pattern": "memory.*"
    }
  },
  "options": {
    "unit": "bytes"
  }
}
Property Description Default Notes
tableFooter Configures the footer of the table panel false Enables or disables the table footer
countRows Counts the number of rows in the table false Displays total row count in footer
enablePagination Enables pagination in the table footer false Allows navigation through pages of results
pageSize Number of rows per page in pagination 10 Configurable integer value 
{
  "tableFooter": true,
  "countRows": true,
  "enablePagination": true,
  "pageSize": 20
}
Note: The table footer options are only available in Grafana v9.0 and later.

8. Enabling Pagination

Property Value Description
pagination true Enables pagination for the table panel
pageSize 10 Number of rows per page
showPageSizeOptions false Whether to show page size options in the UI
showPagination true Whether to show pagination controls

Example: Enabling Pagination in Table Panel

{
  "panels": [
    {
      "type": "table",
      "title": "Paginated Table",
      "pagination": true,
      "pageSize": 20,
      "showPagination": true
    }
  ]
}

9. Configuring Sorting

Property Description Values
sort.field Field to sort by string
sort.desc Sort direction (true = descending) true or false

Example: Sorting by field

{
  "sort": {
    "field": "value",
    "desc": true
  }
}

10. Using Value Mappings

Property Description Example
value mapping Maps numeric values to text labels or colors 0 => "Idle"
mapping type Defines how values are mapped (value, range, or regex) value, range, regex

Example: Value Mapping Configuration

{
  "fieldConfig": {
    "overrides": [
      {
        "matcher": {
          "id": "byName",
          "options": "status"
        },
        "properties": [
          {
            "id": "custom.valueMappings",
            "value": [
              {
                "text": "Healthy",
                "value": "1"
              },
              {
                "text": "Unhealthy",
                "value": "0"
              }
            ]
          }
        ]
      }
    ]
  }
}
Note: Value mappings are applied to numeric fields and can be used in table panels to display human-readable labels instead of raw numbers.

11. Enabling Cell Inspection

Property Description Default
cell.inspection.enabled Enables inspection of individual cells in the table panel false
cell.inspection.tooltip Tooltip text shown when hovering over inspectable cells "Click to inspect cell"

Example: Enabling Cell Inspection

{
  "cell": {
    "inspection": {
      "enabled": true,
      "tooltip": "Inspect this cell"
    }
  }
}
Note: Cell inspection is available in Grafana v10.0 and later.

12. Using Nested Tables

Property Description Values
table.nested Enables nested table rendering in Grafana true / false
table.nested.depth Maximum nesting level for tables 1 to 5
table.nested.column Column to use for nested data Column name or index

Example: Nested Table Configuration

{
  "table": {
    "nested": true,
    "nestedDepth": 3,
    "nestedColumn": "data"
  }
}
Note: Nested tables are supported in Grafana v10.0+ and require the table.nested feature flag to be enabled.
Warning: Deeply nested tables may impact performance and rendering speed.
Nested Table Feature Supported in Grafana Notes
Basic nesting v10.0+ Core functionality available
Deep nesting (5 levels) v11.0+ Enhanced rendering engine
Dynamic column mapping v12.0+ Experimental feature

Was this article helpful?

Related Cheat Sheets