Setting thin width for columns in ag-Grid not working

Question

I am trying to create a thin column in ag-Grid to show buy/sell legend using two different colors. Please see below:

However even after specifying the width to be 8px, I am getting a 36px column. What is the best way to achieve this? I am currently using a cellClass function to set the background color and a valueGetter function to return a blank value for the cell. Here's the code:

const sideLegendCellClass = (params: CellClassParams) => {
    return [
        params.data.side === 'buy'
            ? classes.buyLegend
            : classes.sellLegend,
    ];
};

const sideLegendValueGetter = () => {
    // return blank string - this cell only renders the buy/sell color
    return '';
};

<AgGridColumn
    field="side"
    headerName=""
    width={8}
    cellClass={sideLegendCellClass}
    valueGetter={sideLegendValueGetter}
/>

Full code is here.

Answer 1

Try setting both width and minWidth to 8

<AgGridColumn minWidth={8} width={8} />

There are 2 things I want to address in your code. Firstly, if you don't want to display the value in your column (for example, when making a toolbar or in your case, display legend color), simply leave field undefined, you don't need to set valueGetter: () => ''.

Another thing is that you can return a string in cellClass if you only have one class name.

const sideLegendCellClass = (params: CellClassParams) => {
    return params.data.side === 'buy' ? classes.buyLegend : classes.sellLegend;
};

<AgGridColumn
    width={8}
    minWidth={8}
    cellClass={sideLegendCellClass}
    // since the width is too small you should remove the padding
    // or the legend cell will be overlapped with the next cell
    cellStyle={{ padding: 0 }}
/>

Live Demo