Building Conversational Pivot Tables in React with AI

Modern analytics UIs often struggle with the same trade-off: powerful Pivot Table features versus usability. Drag‑and‑drop fields, configuring filters, switching aggregations, and toggling views all work, but they slow users down, especially those unfamiliar with Pivot interfaces.

The Syncfusion^® React Pivot Table helps you build that analytics surface quickly with a single component, fast configuration, rich data shaping, and an enterprise-ready UI model.

A conversational layer can change that. By allowing users to express intent in plain English, “Sort by country,” “Exclude Q3,” “Average units sold”, you can turn complex configuration steps into fast, natural interactions.

This article shows how to build conversational Pivot Tables in React using an AI‑assisted configuration pattern. The approach focuses on safety, predictability, and performance, making it suitable not just for demos but for real production analytics apps.

Why conversational configuration works for analytics

The key idea behind conversational analytics is not replacing UI controls with chat. Instead:

• The Pivot Table remains configuration‑driven
• AI translates user intent into small, safe configuration changes
• Existing UI controls (field list, toolbar, grouping bar) continue to work

In this pattern:

• AI accelerates common actions
• Users stay in context
• State remains predictable
• UX stays stable

The Pivot configuration becomes the single source of truth, and AI simply helps update it faster.

Architecture overview

The solution is built around four core pieces:

1. React Pivot Table driven by explicit configuration
2. Conversational UI panel for natural‑language input
3. A constrained AI contract that limits what can change
4. Server‑side AI integration to keep credentials secure

At no point does the AI “click UI” or manipulate DOM elements. It works entirely at the configuration layer.

Syncfusion React Pivot Table capabilities

Conversational UI with AI AssistView

This pattern combines Syncfusion’s PivotView with AIAssistViewComponent inside a dialog. The user opens it from a custom toolbar item and submits prompts via promptRequest, which triggers the AI workflow.

<DialogComponent id='ai-assist-dialog' width='500px' visible={false} height='500px'>
    <AIAssistViewComponent
        id="ai-pivot-aiassistview"
        promptRequest={onPromptRequest}
    >
        <ViewsDirective>
            <ViewDirective type='Assist' name='Ask AI' />
        </ViewsDirective>
    </AIAssistViewComponent>
</DialogComponent>

Pivot configuration as the AI contract

At the center of the approach is a strongly-typed dataSourceSettings object (IDataOptions). This is where the Syncfusion React Pivot Table gets its structure: rows, columns, values, formatting, sorting, and filtering.

const dataSourceSettings: IDataOptions = {
    enableSorting: true,
    allowLabelFilter: true,
    allowValueFilter: true,
    columns: [
        { name: 'Year' },
        { name: 'Quarter' }
    ],
    rows: [
        { name: 'Country', expandAll: true },
        { name: 'Product_Categories' }
    ],
    values: [
        { name: 'Sold', caption: 'Units Sold' },
        { name: 'Amount', caption: 'Sold Amount' }
    ],
    formatSettings: [
        { name: 'Amount', format: 'C0' }
    ],
    sortSettings: [
        { name: 'Year', order: "Ascending" }
    ],
    filterSettings: [
        { name: 'Quarter', items: ['Q3'], type: 'Exclude' }
    ],
    dataSource: pivotProductData,
    expandAll: false,
    showSubTotals: false
};

Field List, Grouping Bar, and Toolbar (Inject services)

Enable common Pivot Table UX surfaces (field list, grouping bar, toolbar) and inject the necessary services.

<PivotViewComponent
    id='ai-pivot'
    dataSourceSettings={dataSourceSettings}
    displayOption={{ view: 'Both', primary: 'Table' }}
    showGroupingBar={true}
    showFieldList={true}
    showToolbar={true}
    allowCalculatedField={true}
    allowConditionalFormatting={true}
    allowNumberFormatting={true}
    enableValueSorting={true}
    toolbar={toolbarOptions}
>
    <Inject
        services={[
            GroupingBar,
            FieldList,
            CalculatedField,
            Toolbar,
            ConditionalFormatting,
            NumberFormatting
        ]}
    />
</PivotViewComponent>

Sorting, filtering, and value shaping (via AI-driven deltas)

This approach is built around the idea that AI can modify only a few “safe” areas: props.dataSourceSettings - props.displayOption - props.chartSettings.

The AI prompt rules instruct the model to apply minimal diffs and avoid resetting unrelated settings. That allows prompts like:

• Sort the Country field in descending order
• Clear filtering
• Change the Sold field aggregation from sum to avg

Even without “hardcoding” each command, you still keep control by limiting what the AI is allowed to touch.

Conditional formatting and number formatting

The base configuration includes conditional formatting rules for measures like Amount and Sold, plus currency formatting for Amount. These are exactly the kinds of changes users ask for in natural language (“highlight low revenue in red”, “format as currency”).

conditionalFormatSettings: [
    {
        measure: 'Amount',
        value1: 250000,
        conditions: 'LessThan',
        style: {
            backgroundColor: '#FF005C',
            color: 'white',
            fontFamily: 'Tahoma',
            fontSize: '12px'
        },
        applyGrandTotals: false
    }
],
formatSettings: [
    { name: 'Amount', format: 'C0' }
]

Grid + chart view switching (both views)

The Pivot Table can be configured to support both grid and chart representations via displayOption, letting you keep a single analytical surface with multiple perspectives.

displayOption={{
    view: 'Both',
    primary: 'Table' 
}}

The AI contract can also allow changing only the primary view (Table/Chart) without altering the overall “Both” mode.

Now that you’ve seen the core building blocks, Pivot configuration, a conversational prompt surface, and a constrained “props delta” contract, let’s assemble the full app end-to-end.

Build the app from scratch

This section is a complete, start-to-finish walkthrough to build the app described in this post: a Syncfusion React Pivot Table that can be configured with natural-language prompts through an AI AssistView panel, backed by a Node/Express API that calls OpenAI.