### Install Business Table Panel

Source: https://context7.com/volkovlabs/business-table/llms.txt

Use the Grafana CLI or Docker Compose to install the plugin.

```bash
# Install from Grafana plugins catalog
grafana cli plugins install volkovlabs-table-panel

# Or using Docker compose for development
docker compose pull grafana && docker compose --profile dev up
```

--------------------------------

### Install Business Table Panel via Grafana CLI

Source: https://github.com/volkovlabs/business-table/blob/main/README.md

Use the Grafana CLI to install the plugin directly from the terminal.

```bash
grafana cli plugins install volkovlabs-table-panel
```

--------------------------------

### Configure Pagination

Source: https://context7.com/volkovlabs/business-table/llms.txt

Enable pagination using either client-side or query-based modes. When using query mode, ensure the SQL queries correctly utilize the provided pagination variables.

```json
{
  "pagination": {
    "enabled": true,
    "mode": "query",
    "defaultPageSize": 25,
    "query": {
      "pageIndexVariable": "pageIndex",
      "pageSizeVariable": "pageSize",
      "offsetVariable": "offset",
      "totalCountField": {
        "name": "total_count",
        "source": "A"
      }
    }
  }
}
```

```sql
-- Example SQL query using pagination variables
SELECT * FROM orders
ORDER BY created_at DESC
LIMIT ${pageSize}
OFFSET ${offset}

-- Total count query for pagination
SELECT COUNT(*) as total_count FROM orders
```

--------------------------------

### Configure Column Manager

Source: https://context7.com/volkovlabs/business-table/llms.txt

Enable the column manager drawer for runtime control over column visibility, ordering, and filtering. Options include saving user preferences and customizing icons.

```json
{
  "isColumnManagerAvailable": true,
  "openColumnManagerMode": "all",
  "showFiltersInColumnManager": true,
  "showSortingInColumnManager": true,
  "saveUserPreference": true,
  "isColumnManagerShowCustomIcon": false,
  "columnManagerNativeIcon": "table",
  "columnManagerCustomIcon": "https://example.com/icon.svg"
}
```

--------------------------------

### Define Column Configuration

Source: https://context7.com/volkovlabs/business-table/llms.txt

Set up field mappings, filtering, sorting, and appearance for individual columns.

```json
{
  "items": [
    {
      "enabled": true,
      "field": {
        "name": "country",
        "source": "A"
      },
      "label": "Country",
      "type": "auto",
      "group": true,
      "aggregation": "none",
      "filter": {
        "enabled": true,
        "mode": "client",
        "variable": ""
      },
      "sort": {
        "enabled": true,
        "descFirst": false
      },
      "appearance": {
        "width": {
          "auto": true,
          "min": 20,
          "value": 100
        },
        "wrap": true,
        "alignment": "start",
        "background": {
          "applyToRow": false
        },
        "header": {
          "fontSize": "md",
          "fontColor": "#ffffff",
          "backgroundColor": "#2f4f4f"
        }
      },
      "pin": "left",
      "footer": ["sum"],
      "edit": {
        "enabled": true,
        "permission": {
          "mode": "allowed",
          "userRole": ["Admin", "Editor"]
        },
        "editor": {
          "type": "string"
        }
      }
    }
  ]
}
```

--------------------------------

### Configure Panel Options

Source: https://context7.com/volkovlabs/business-table/llms.txt

Define the panel structure and toolbar settings within the dashboard JSON.

```json
{
  "type": "volkovlabs-table-panel",
  "options": {
    "tables": [
      {
        "name": "Sales Data",
        "showHeader": true,
        "expanded": false,
        "stripedRows": true,
        "highlightRowsOnHover": true,
        "items": [],
        "pagination": {
          "enabled": true,
          "mode": "client",
          "defaultPageSize": 10
        },
        "update": {
          "datasource": "postgres",
          "payload": {}
        }
      }
    ],
    "tabsSorting": true,
    "isColumnManagerAvailable": true,
    "showFiltersInColumnManager": true,
    "showSortingInColumnManager": true,
    "saveUserPreference": true,
    "toolbar": {
      "export": true,
      "alignment": "left",
      "exportFormats": ["csv", "xlsx"]
    },
    "nestedObjects": []
  }
}
```

--------------------------------

### Configure Delete Row

Source: https://context7.com/volkovlabs/business-table/llms.txt

Set up row deletion with confirmation dialogs and the corresponding SQL delete statement.

```json
{
  "deleteRow": {
    "enabled": true,
    "permission": {
      "mode": "allowed",
      "userRole": ["Admin"]
    },
    "request": {
      "datasource": "postgres",
      "payload": {
        "rawSql": "DELETE FROM orders WHERE id = ${payload.id}",
        "format": "table"
      }
    },
    "messages": {
      "confirmationTitle": "Delete Order",
      "confirmationMessage": "Are you sure you want to delete order #${payload.id}?",
      "notifyMessage": "Delete order successfully!"
    }
  }
}
```

--------------------------------

### Column Manager Open Modes

Source: https://context7.com/volkovlabs/business-table/llms.txt

Specifies how the column manager drawer should be opened. Options include per table group, per column, or a global drawer.

```typescript
// Column manager open modes
enum OpenColumnManagerMode {
  GROUP = 'group',   // Per table group
  COLUMN = 'column', // Per column
  ALL = 'all'        // Global drawer
}
```

--------------------------------

### Configure Table Export

Source: https://context7.com/volkovlabs/business-table/llms.txt

Enable table data export to CSV or Excel formats. Configure toolbar options and external export via a datasource.

```json
{
  "toolbar": {
    "export": true,
    "exportFormats": ["csv", "xlsx"],
    "alignment": "right"
  },
  "externalExport": {
    "enabled": true,
    "request": {
      "datasource": "api",
      "payload": {
        "url": "/api/export",
        "method": "POST",
        "body": "${payload}"
      }
    }
  }
}
```

--------------------------------

### Configure Aggregation Functions

Source: https://context7.com/volkovlabs/business-table/llms.txt

Apply aggregation functions to columns for grouped data, with options for displaying footer summaries. Specify the field, aggregation type, and footer display.

```json
{
  "items": [
    {
      "field": { "name": "amount", "source": "A" },
      "aggregation": "sum",
      "footer": ["sum", "mean"]
    }
  ]
}
```

--------------------------------

### Complete Dashboard Panel Configuration

Source: https://context7.com/volkovlabs/business-table/llms.txt

This JSON configuration defines a full dashboard panel for order management using the Volkovlabs Table Panel. It includes data source configuration, SQL queries for orders and statuses, field configurations with thresholds and aggregations, and detailed options for table display, editing, row highlighting, and toolbar functionality.

```json
{
  "type": "volkovlabs-table-panel",
  "title": "Order Management",
  "datasource": {
    "type": "postgres",
    "uid": "postgres-datasource"
  },
  "targets": [
    {
      "refId": "A",
      "rawSql": "SELECT id, customer, product, quantity, status, total, created_at FROM orders WHERE created_at >= $__timeFrom() AND created_at <= $__timeTo() ORDER BY created_at DESC",
      "format": "table"
    },
    {
      "refId": "B",
      "rawSql": "SELECT code as status_code, name as status_name FROM order_statuses",
      "format": "table"
    }
  ],
  "fieldConfig": {
    "defaults": {
      "thresholds": {
        "mode": "absolute",
        "steps": [
          { "color": "green", "value": null },
          { "color": "yellow", "value": 100 },
          { "color": "red", "value": 500 }
        ]
      }
    }
  },
  "options": {
    "tables": [
      {
        "name": "Orders",
        "showHeader": true,
        "stripedRows": true,
        "highlightRowsOnHover": true,
        "expanded": false,
        "pagination": {
          "enabled": true,
          "mode": "client",
          "defaultPageSize": 25
        },
        "update": {
          "datasource": "postgres",
          "payload": {
            "rawSql": "UPDATE orders SET status = '${payload.status}' WHERE id = ${payload.id}"
          }
        },
        "addRow": {
          "enabled": true,
          "permission": { "mode": "allowed", "userRole": ["Admin"] },
          "request": {
            "datasource": "postgres",
            "payload": {
              "rawSql": "INSERT INTO orders (customer, product, quantity, status) VALUES ('${payload.customer}', '${payload.product}', ${payload.quantity}, 'pending')"
            }
          }
        },
        "deleteRow": {
          "enabled": true,
          "permission": { "mode": "allowed", "userRole": ["Admin"] },
          "request": {
            "datasource": "postgres",
            "payload": {
              "rawSql": "DELETE FROM orders WHERE id = ${payload.id}"
            }
          }
        },
        "rowHighlight": {
          "enabled": true,
          "columnId": "id",
          "variable": "selectedOrderId",
          "scrollTo": "center",
          "smooth": true
        },
        "items": [
          {
            "enabled": true,
            "field": { "name": "id", "source": "A" },
            "label": "Order ID",
            "type": "auto",
            "pin": "left",
            "filter": { "enabled": true, "mode": "client" },
            "sort": { "enabled": true, "descFirst": true },
            "appearance": {
              "width": { "auto": false, "value": 80 },
              "alignment": "center"
            }
          },
          {
            "enabled": true,
            "field": { "name": "customer", "source": "A" },
            "label": "Customer",
            "type": "auto",
            "filter": { "enabled": true, "mode": "client" },
            "sort": { "enabled": true },
            "newRowEdit": { "enabled": true, "editor": { "type": "string" } }
          },
          {
            "enabled": true,
            "field": { "name": "total", "source": "A" },
            "label": "Total",
            "type": "gauge",
            "gauge": { "mode": "gradient", "valueDisplayMode": "text", "valueSize": 14 },
            "footer": ["sum"],
            "aggregation": "sum"
          },
          {
            "enabled": true,
            "field": { "name": "status", "source": "A" },
            "label": "Status",
            "type": "colored_background",
            "edit": {
              "enabled": true,
              "permission": { "mode": "allowed", "userRole": ["Admin", "Editor"] },
              "editor": {
                "type": "select",
                "queryOptions": { "source": "B", "value": "status_code", "label": "status_name" }
              }
            }
          }
        ]
      }
    ],
    "toolbar": {
      "export": true,
      "exportFormats": ["csv", "xlsx"],
      "alignment": "left"
    },
    "isColumnManagerAvailable": true,
    "showFiltersInColumnManager": true,
    "saveUserPreference": true
  }
}
```

--------------------------------

### Configure Add Row

Source: https://context7.com/volkovlabs/business-table/llms.txt

Define the SQL insertion logic and field editors for adding new rows to the table.

```json
{
  "addRow": {
    "enabled": true,
    "permission": {
      "mode": "allowed",
      "userRole": ["Admin"]
    },
    "request": {
      "datasource": "postgres",
      "payload": {
        "rawSql": "INSERT INTO orders (customer, product, quantity) VALUES ('${payload.customer}', '${payload.product}', ${payload.quantity})",
        "format": "table"
      }
    },
    "messages": {
      "confirmationTitle": "Add New Order",
      "confirmationMessage": "Are you sure you want to add this order?",
      "notifyMessage": "Order added successfully!"
    }
  },
  "items": [
    {
      "field": { "name": "customer", "source": "A" },
      "newRowEdit": {
        "enabled": true,
        "editor": { "type": "string" }
      }
    },
    {
      "field": { "name": "quantity", "source": "A" },
      "newRowEdit": {
        "enabled": true,
        "editor": { "type": "number", "min": 1, "max": 1000 }
      }
    }
  ]
}
```

--------------------------------

### Configure Row Highlighting

Source: https://context7.com/volkovlabs/business-table/llms.txt

Enable row highlighting based on dashboard variables. Configure the column to track, the variable to use, background color, scroll behavior, and whether to reset the variable.

```json
{
  "rowHighlight": {
    "enabled": true,
    "columnId": "order_id",
    "variable": "selectedOrderId",
    "backgroundColor": "#ffd700",
    "scrollTo": "center",
    "smooth": true,
    "resetVariable": true
  }
}
```

--------------------------------

### Column Pin Directions

Source: https://context7.com/volkovlabs/business-table/llms.txt

Defines the possible directions for pinning columns. Options include no pinning, pinning to the left, or pinning to the right.

```typescript
// Pin directions
enum ColumnPinDirection {
  NONE = '',
  LEFT = 'left',
  RIGHT = 'right'
}
```

--------------------------------

### Configure Column Filtering

Source: https://context7.com/volkovlabs/business-table/llms.txt

Define filter behavior and types for columns. Use query-based filtering to pass filter values directly to your datasource.

```json
{
  "filter": {
    "enabled": true,
    "mode": "query",
    "variable": "countryFilter",
    "defaultClientValue": {
      "type": "faceted",
      "value": ["USA", "Japan"]
    }
  }
}
```

```typescript
// Available filter types
enum ColumnFilterType {
  SEARCH = 'search',       // Text search with case sensitivity option
  NUMBER = 'number',       // Numeric comparison operators
  FACETED = 'faceted',     // Multi-select from available values
  TIMESTAMP = 'timestamp'  // Time range picker
}

// Number filter operators
enum NumberFilterOperator {
  MORE = '>',
  MORE_OR_EQUAL = '>=',
  LESS = '<',
  LESS_OR_EQUAL = '<=',
  BETWEEN = 'between',
  EQUAL = '=',
  NOT_EQUAL = '!='
}

// Example: Number filter value
{
  "type": "number",
  "value": [100, 500],
  "operator": "between"
}

// Example: Search filter value
{
  "type": "search",
  "value": "tokyo",
  "caseSensitive": false
}
```

--------------------------------

### Configure Data Editing

Source: https://context7.com/volkovlabs/business-table/llms.txt

Enable in-cell editing with specific datasource payloads and permission checks. Define editor types to control how users input data.

```json
{
  "update": {
    "datasource": "postgres",
    "payload": {
      "rawSql": "UPDATE orders SET status = '${payload.status}', updated_at = NOW() WHERE id = ${payload.id}",
      "format": "table"
    }
  },
  "items": [
    {
      "field": { "name": "status", "source": "A" },
      "edit": {
        "enabled": true,
        "permission": {
          "mode": "allowed",
          "userRole": ["Admin", "Editor"],
          "field": { "name": "can_edit", "source": "A" }
        },
        "editor": {
          "type": "select",
          "queryOptions": {
            "source": "B",
            "value": "status_code",
            "label": "status_name"
          },
          "customValues": false
        }
      }
    }
  ]
}
```

```typescript
// Available editor types
enum ColumnEditorType {
  STRING = 'string',       // Text input
  NUMBER = 'number',       // Number input with min/max
  SELECT = 'select',       // Dropdown from query or static options
  DATETIME = 'datetime',   // Date and time picker
  DATE = 'date',           // Date picker only
  TEXTAREA = 'textarea',   // Multi-line text
  BOOLEAN = 'boolean',     // Toggle switch
  FILE = 'file'            // File upload
}

// Number editor with constraints
{
  "type": "number",
  "min": 0,
  "max": 100
}

// Datetime editor with date limits
{
  "type": "datetime",
  "min": "2024-01-01",
  "max": "2025-12-31"
}
```

--------------------------------

### Row Highlighting Scroll Positions

Source: https://context7.com/volkovlabs/business-table/llms.txt

Defines the possible positions for scrolling to a highlighted row. Use an empty string for no specific scroll behavior.

```typescript
// Scroll positions
enum ScrollToRowPosition {
  NONE = '',
  START = 'start',
  CENTER = 'center',
  END = 'end'
}
```

--------------------------------

### Configure Column Pinning

Source: https://context7.com/volkovlabs/business-table/llms.txt

Pin columns to the left or right side of the table to maintain visibility during scrolling. Specify the field and the desired pin direction.

```json
{
  "items": [
    {
      "field": { "name": "id", "source": "A" },
      "pin": "left"
    },
    {
      "field": { "name": "actions", "source": "A" },
      "pin": "right"
    }
  ]
}
```

--------------------------------

### Configure Cell Types

Source: https://context7.com/volkovlabs/business-table/llms.txt

Define specific rendering behaviors for cells using the CellType enum and associated configuration objects.

```typescript
// Available cell types in column configuration
enum CellType {
  AUTO = 'auto',                    // Automatic detection
  COLORED_TEXT = 'coloredText',     // Text with threshold colors
  COLORED_BACKGROUND = 'coloredBackground', // Background colors
  GAUGE = 'gauge',                  // Bar gauge visualization
  RICH_TEXT = 'rich_text',          // HTML/Markdown content
  NESTED_OBJECTS = 'nested_objects', // Expandable nested data
  IMAGE = 'image',                  // Base64 or URL images
  FILE = 'file',                    // Downloadable files
  BOOLEAN = 'boolean',              // Toggle/checkbox display
  PREFORMATTED = 'preformatted',    // Monospace/code formatting
  JSON = 'json'                     // Collapsible JSON viewer
}

// Example: Gauge cell configuration
{
  "type": "gauge",
  "gauge": {
    "mode": "basic",           // 'basic' | 'gradient' | 'lcd'
    "valueDisplayMode": "text", // 'text' | 'hidden' | 'color'
    "valueSize": 14
  }
}

// Example: Image cell configuration
{
  "type": "image",
  "scale": "auto"  // 'auto' | 'crisp-edges' | 'pixelated'
}

// Example: File cell configuration
{
  "type": "file",
  "fileCell": {
    "size": "md",              // 'xs' | 'sm' | 'md' | 'lg'
    "variant": "primary",      // 'primary' | 'secondary' | 'destructive' | 'success'
    "text": "Download",
    "displayPreview": true
  }
}
```

--------------------------------

### Configure Nested Objects as Cards

Source: https://context7.com/volkovlabs/business-table/llms.txt

Display nested data within table cells as expandable cards. Supports CRUD operations for the nested data, including defining data sources, permissions, and request payloads for add, update, and delete actions.

```json
{
  "nestedObjects": [
    {
      "id": "comments",
      "name": "Order Comments",
      "type": "cards",
      "get": {
        "datasource": "postgres",
        "payload": {
          "rawSql": "SELECT id, title, body, author, created_at FROM comments WHERE order_id = ${payload.order_id}",
          "format": "table"
        }
      },
      "add": {
        "enabled": true,
        "permission": { "mode": "allowed", "userRole": ["Admin", "Editor"] },
        "request": {
          "datasource": "postgres",
          "payload": {
            "rawSql": "INSERT INTO comments (order_id, title, body, author) VALUES (${payload.order_id}, '${payload.title}', '${payload.body}', '${__user.login}')"
          }
        }
      },
      "update": {
        "enabled": true,
        "permission": { "mode": "allowed", "userRole": ["Admin"] },
        "request": {
          "datasource": "postgres",
          "payload": {
            "rawSql": "UPDATE comments SET body = '${payload.body}' WHERE id = ${payload.id}"
          }
        }
      },
      "delete": {
        "enabled": true,
        "permission": { "mode": "allowed", "userRole": ["Admin"] },
        "request": {
          "datasource": "postgres",
          "payload": {
            "rawSql": "DELETE FROM comments WHERE id = ${payload.id}"
          }
        }
      },
      "editor": {
        "type": "cards",
        "id": "id",
        "title": "title",
        "body": "body",
        "time": "created_at",
        "author": "author",
        "display": "last",
        "displayCount": 3
      }
    }
  ]
}
```

--------------------------------

### Export Format Types

Source: https://context7.com/volkovlabs/business-table/llms.txt

Defines the available types for exporting table data. Supports CSV and XLSX formats.

```typescript
// Export format types
enum ExportFormatType {
  CSV = 'csv',
  XLSX = 'xlsx'
}
```

--------------------------------

### Cell Aggregation Types

Source: https://context7.com/volkovlabs/business-table/llms.txt

Lists the available aggregation types that can be applied to table cells. Includes common statistical functions and counts.

```typescript
// Available aggregation types
enum CellAggregation {
  NONE = 'none',
  SUM = 'sum',
  MIN = 'min',
  MAX = 'max',
  EXTENT = 'extent',      // [min, max]
  MEAN = 'mean',
  MEDIAN = 'median',
  UNIQUE = 'unique',      // List unique values
  UNIQUE_COUNT = 'uniqueCount',
  COUNT = 'count'
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.