Hi

I have created a IgrDataGrid and now I'm facing some issues with it's styling and one of its feature. Currently my grid looks like this below image and in this I have 5 major issues which I'm facing. If someone can help me with the approach for this issue.

Issue 1:-  For the functionality of column chooser I have used "IgrDataGridToolbar". In this toolbar as you can see in the above image I want to align the column chooser button within the toolbar but it's border is overflowing from the table which is not looking good. For the same I tried to apply the CSS but it's not working. So what can be the approach for this?

Issue 2:- When I open column chooser option it's size is very big(as shown in image below). I want to minimize the size of column chooser when it's selected or clicked.

Issue 3:- In column chooser if I select any column(for example "symbol") then the column with name symbol disappears which is correct but the IgrDataGridToolbar width remains same(as shown in image below) which looks ugly. Is there any way to manipulate the width of the IgrDataGridToolbar when the width if IgrDataGrid is changed.

Issue 4:- When I click on the options icon in the header the background of the options is white by default(as shown in image below). Is there any way to change the background color of the options when it's clicked. And also can I customize the column options by my own(Can I give my own options in the options menu).

Issue 5:- I want to add a context menu for my grid. When I right click on the grid it opens a customized menu. Is it possible to do so?

For the reference I am attaching my exact code as well. Please have a look and it and suggest the solutions for the above mentioned issues.

import React from 'react';
import { IgrDataBindingEventArgs, IgrDataGrid, IgrDataGridCellEventArgs, IgrDataGridModule, IgrDataGridToolbar, IgrDataGridToolbarModule, IgrGridColumnOptionsModule, IgrTemplateHeader, TemplateHeaderCellUpdatingEventArgs } from 'igniteui-react-grids';
import { IgrTextColumn } from 'igniteui-react-grids';
import "../css/InfragisticsGrid.css";
import { IgrTemplateCellInfo } from "igniteui-react-grids";
import { IgrSparklineModule } from 'igniteui-react-charts';

IgrDataGridModule.register();
IgrGridColumnOptionsModule.register();
IgrDataGridToolbarModule.register();
IgrSparklineModule.register();

let rowExpanded = false;

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

    public data!: any[];
    public grid!: IgrDataGrid;
    public toolbar!: IgrDataGridToolbar;
    
    onCellClick = () => {
        rowExpanded = true;
        console.log("Clicked");
    };

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

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

    public onToolbarRef = (toolbar: IgrDataGridToolbar) => {
        this.toolbar = toolbar;
        if (this.toolbar !== null) {
            this.toolbar.targetGrid = this.grid;
        }
  }

    public render(): JSX.Element {
        return (
            <>
                <IgrDataGridToolbar
                    ref={this.onToolbarRef}
                    toolbarTitle="Watchlist"
                    columnChooser="true"
                    backgroundColor='var(--input-background)'
                    dialogBackgroundColor='var(--input-background)'
                    toolbarTitleColor='var(--text-2)'
                    height="25px"
                    width='27.5%'                
                />
                <IgrDataGrid
                    ref={this.onGridRef}
                    width="27.7%"
                    height="calc(100% - 2.75rem)"
                    dataSource={this.data}
                    autoGenerateColumns="false"
                    cornerRadiusBottomLeft={10}
                    cornerRadiusBottomRight={10}
                    columnMovingMode="Deferred"
                    selectionMode="SingleRow"
                    cellBackground="var(--input-background)"
                    cellTextColor="var(--text-2)"
                    border="#67605999"
                    cellSelectedBackground="var(--dark-hover)"
                    headerTextColor="var(--text-2)"
                    headerBackground="var(--input-background)"
                    rowHoverBackground="var(--input-background)"
                    rowSeparatorBackground="var(--backgroung-dark)"
                    headerRowSeparatorBackground="var(--backgroung-dark)"
                    headerSeparatorBackground="var(--input-background)"
                    summaryRootValueTextColor="var(--text-2)"
                    rowHeight={25}
                    headerHeight={25}
                    headerSortIndicatorColor="var(--text-2)"
                    isRowHoverEnabled={true}
                    columnOptionsIconColor="var(--text-2)"
                    columnOptionsIconAlignment={3}
                    isColumnOptionsEnabled="true"
                    isToolbarColumnChooserVisible={true}
                    isGroupExpandedDefault={true}
                    cellClicked={this.onCellClick}
                    isGroupCollapsable="true"
                    columnShowingAnimationMode="slideFromRightAndFadeIn"
                    columnHidingAnimationMode="slideToRightAndFadeOut"
                    columnMovingAnimationMode="SlideOver"
                >
                    
                    <IgrTextColumn field="Symbol" headerText="Symbol" width="113" dataBound={this.onCellDataBound} verticalAlignment="center"/>
                    <IgrTextColumn field="Bid" headerText="Bid" width="83" dataBound={this.onCellDataBound} textColor="var(--dark-bid)" rowHoverBackground='var(--dark-bid-hover)' verticalAlignment="center"/>
                    <IgrTextColumn field="Ask" headerText="Ask" width="86" dataBound={this.onCellDataBound} textColor="var(--dark-ask)" rowHoverBackground='var(--dark-ask-hover)' verticalAlignment="center"/>
                    <IgrTextColumn field="Price" headerText="Price" width="94" dataBound={this.onCellDataBound} verticalAlignment="center" />
                </IgrDataGrid>                
             </>
        );
    }

    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;
    }

    public onCellDataBound = (s: any, e: IgrDataBindingEventArgs) => {       
        let isAlternate = e.cellInfo.dataRow % 2 == 0;
        if (isAlternate) {
             e.cellInfo.background = "var(--dark-hover)";             
        }
    }
}

Hoping for a positive response.

Thanks!!!