reactjs - 为 ag-Grid 中的列设置细宽度不起作用

Question

我正在尝试在 ag-Grid 中创建一个细列，以使用两种不同的颜色显示买入/卖出图例。请看下面：

但是，即使将宽度指定为8px，我也会得到一36px列。实现这一目标的最佳方法是什么？我目前正在使用一个cellClass函数来设置背景颜色和一个valueGetter函数来为单元格返回一个空白值。这是代码：

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

完整代码在这里。

标签： reactjswidthag-gridag-grid-react

Answer 1

尝试同时设置width和minWidth8

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

我想在您的代码中解决两件事。首先，如果您不想在列中显示值（例如，在制作工具栏时或在您的情况下，显示图例颜色），只需离开field undefined，您不需要设置valueGetter: () => ''.

另一件事是，cellClass如果您只有一个类名，则可以返回一个字符串。

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

现场演示