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

Question

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

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

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

完整代码是 here.

Answer 1

尝试将 width 和 minWidth 都设置为 8

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

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

另一件事是，如果您只有一个 class 名称，则可以 return 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 }}
/>

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

Setting thin width for columns in ag-Grid not working

width

reactjs

ag-grid

ag-grid-react

现场演示