I have created a IgrDataGrid and now in header I want to add a drop-down menu(using vertical ellipsis) and there I want to give some options. If someone can help me with the approach for this issue.

I have created this UI grid using IgrDataGrid, in this grid after the price header I want to add a drop-down menu(using vertical ellipsis).

This is the sample output which I'm expecting and trying to achieve:-

My code for IgrDataGrid(Also attached a sample code for the reference):-

import React from 'react';
import { IgrDataGrid, IgrDataGridModule, IgrGridColumnOptionsModule } from 'igniteui-react-grids';
import { IgrTextColumn } from 'igniteui-react-grids';
import "../css/InfragisticsGrid.css";

IgrDataGridModule.register();
IgrGridColumnOptionsModule.register();

export default class DataGridBindingLocalData extends React.Component<any, any> {

    public data!: any[];
    public grid!: IgrDataGrid;

    constructor(props: any) {
        super(props);
        this.state = { componentVisible: true }
        this.initData();
    }

    public onGridRef = (grid: IgrDataGrid) => {
        if (!grid) { return; }
        this.grid = grid;
    }

    public render(): JSX.Element {
        return (
            <div className="infragisticsGrid">
                <IgrDataGrid
                    ref={this.onGridRef}
                    width="27.7%"
                    height="calc(100% - 2.75rem)"
                    dataSource={this.data}
                    autoGenerateColumns="false"
                    cornerRadiusBottomLeft={10}
                    cornerRadiusBottomRight={10}
                    cornerRadiusTopLeft={10}
                    cornerRadiusTopRight={10}
                    columnMovingMode="Deferred"
                    columnMovingAnimationMode="None"
                    selectionMode="SingleRow"
                    cellBackground="#222536"
                    cellTextColor="#D2D4D5"
                    border="#67605999"
                    cellSelectedBackground="#3e405c"
                    headerTextColor="#D2D4D5"
                    headerBackground="#222536"
                    rowHoverBackground="#3e405c"
                    rowSeparatorBackground="#545861"
                    editMode={"None"}
                    headerRowSeparatorBackground="#545861"
                    headerSeparatorBackground="#222536"
                    summaryRootBackground="#343a40"
                    summaryRootValueTextColor="#D2D4D5"
                    rowHeight={25}
                    headerHeight={25}
                    headerSortIndicatorColor="#D2D4D5"
                    isRowHoverEnabled={true}
                    columnOptionsIconColor="#D2D4D5"
                    columnOptionsIconAlignment={3}
                >
                    <IgrTextColumn field="Symbol" headerText="Symbol" width="113"/>
                    <IgrTextColumn field="Bid" headerText="Bid" width="83"/>
                    <IgrTextColumn field="Ask" headerText="Ask" width="86" />
                    <IgrTextColumn field="Price" headerText="Price" width="94" />
                </IgrDataGrid>
            </div>
        );
    }

    public getRandomNumber(min: number, max: number): number {
        return Math.round(min + Math.random() * (max - min));
    }

    public getRandomItem(array: any[]): any {
        const index = Math.round(this.getRandomNumber(0, array.length - 1));
        return array[index];
    }

    public initData() {
        const symbols: string[] = ["AMZN", "APPL", "FB", "TSLA", "GOOG",];
        const bid: number[] = [92.34, 94.56, 108.12, 80.47, 75.89]
        const ask: number[] = [92.34, 94.56, 108.12, 80.47, 75.89]
        const prices: number[] = [11.11, 19.01, 11.05, 12.12, 13.11]
        const wishlistData: any[] = [];

        for (let i = 0; i < 10; i++) {
            wishlistData.push({
                Symbol: this.getRandomItem(symbols),
                Bid: this.getRandomItem(bid),
                Ask: this.getRandomItem(ask),
                Price: this.getRandomItem(prices),
            });
        }
        this.data = wishlistData;
    }
}