← Back to Features

Options Reference

Test various options: control panel, uiFlags, layout, behaviour, and grid callbacks.

🎯 Live Demo

Control Panel

UI Flags

Behaviour

Layout

Grid Callbacks

Options Log

// Click "Get Options" to see current options

💻 Implementation Code

options-example.html 
<!DOCTYPE html>
<html>
<head>
  <title>WebPivotTable Options Demo</title>
  <script src="https://cdn.webpivottable.com/wpt/latest/wpt.js"></script>
</head>
<body>
  <h1>Options Configuration Demo</h1>

  <web-pivot-table id="wpt" style="width:100%;height:600px"></web-pivot-table>

  <script>
    const wpt = document.getElementById('wpt')

    // Load data
    wpt.setWptFromCsvUrl('https://cdn.webpivottable.com/samples/sales.csv')

    // Comprehensive options configuration
    wpt.setOptions({
      // Control Panel
      controlPanel: {
        position: 'right',   // 'left' | 'right' | 'top' | 'bottom'
        floating: false,
        collapsed: false
      },

      // UI Flags
      uiFlags: {
        hideToolbar: false,
        export: true,
        save: true,
        hideAiChat: false,
        hideConnector: false,
        hideThemes: false
      },

      // Layout
      displayMode: 'grid',    // 'grid' | 'chart' | 'both'
      fullscreen: false,

      // Behavior
      deferLayoutUpdate: false,
      drillThroughBySingleClick: false,
      leavePageWarning: true,

      // Grid Styling Callbacks
      gridCallbacks: {
        rowStyleFn: (flatRow, rowIndex) => {
          if (rowIndex % 2 === 0) {
            return { backgroundColor: '#f8f9fa' }
          }
        },
        cellValueStyleFn: (flatRow, col) => {
          const val = flatRow[col.id]
          if (typeof val === 'number' && val < 0) {
            return { color: '#dc3545', fontWeight: 'bold' }
          }
        }
      },

      // Theme
      theme: {
        preset: 'default'
      }
    })

    // Read current options
    function logCurrentOptions() {
      console.log('Current Options:', wpt.getOptions())
    }
  </script>
</body>
</html>

📋 Usage Notes