Apply condition based hyper link for specific row or column in React

13 Sep 20255 minutes to read

In the Pivot Table, you can display hyperlinks in specific rows or columns by setting up certain conditions. This can be done using the conditionalSettings property, which is available within the hyperlinkSettings object.

The following options are available under the conditionalSettings to configure the hyperlinks:

• label: Defines the specific row or column header where the hyperlink should appear.
• conditions: Sets the condition type, such as Equals, GreaterThan, or LessThan.
• value1: Sets the starting value for the condition.
• value2: Sets the ending value for the condition (used for Between and NotBetween conditions).
• measure: Defines the measure, or value field, to which the hyperlink should be applied.

In the following example, the hyperlinkSettings property is configured to show a hyperlink for cells under the Germany header. The hyperlink will only appear if the cell’s value is greater than 500. This is achieved by setting the label to Germany, the conditions to GreaterThan, and value1 to 500.

App.jsx

import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import { pivotData } from './datasource';
function App() {
    let dataSourceSettings = {
        dataSource: pivotData,
        expandAll: false,
        enableSorting: true,
        drilledMembers: [{ name: 'Year', items: ['FY 2015'] }, { name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };
    let hyperlinkSettings = {
        conditionalSettings: [{
                label: 'Germany',
                conditions: 'GreaterThan',
                value1: 500
            }],
        cssClass: 'e-custom-class'
    };
    let pivotObj;
    return (<PivotViewComponent height={350} ref={d => pivotObj = d} id='PivotView' dataSourceSettings={dataSourceSettings} hyperlinkSettings={hyperlinkSettings}></PivotViewComponent>);
};
export default App;

App.tsx

import { IDataSet, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import * as React from 'react';
import { pivotData } from './datasource';
import { HyperLinkSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/hypderlinksettings';

function App() {

  let dataSourceSettings: DataSourceSettingsModel = {
    dataSource: pivotData as IDataSet[],
    expandAll: false,
    enableSorting: true,
    drilledMembers: [{ name: 'Year', items: ['FY 2015'] }, { name: 'Country', items: ['France'] }],
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    filters: []
  }
  let hyperlinkSettings: HyperLinkSettings = {
    conditionalSettings: [{
        label: 'Germany',
        conditions: 'GreaterThan',
        value1: 500
    }],
    cssClass: 'e-custom-class'
  } as HyperLinkSettings;
  let pivotObj: PivotViewComponent;
  
  return (<PivotViewComponent height={350} ref={ (d: PivotViewComponent) => pivotObj = d } id='PivotView' dataSourceSettings={dataSourceSettings} hyperlinkSettings={hyperlinkSettings}></PivotViewComponent>);
};

export default App;