Блог

Я ищу динамический рендеринг ячеек в ag-grid на основе устанавливаемого порогового значения, выше которого ячейка отображается зеленым или красным цветом.

Я попробовал следующее:

 <AgGridReact
  onGridReady={onGridReady}
  pagination={true}
  columnDefs={[
    { headerName: "SYMBOL", field: "symbol" },
    {
      headerName: "PRICE",
      field: "price",
      volatile: true,
      cellStyle: function (params) {
        if (params.value < threshold) {
          return { backgroundColor: "red" };
        } else {
          return { backgroundColor: "green" };
        }
      }
    }
  ]}
/>
  

и принимайте входные данные для порога (который задает состояние). Однако, несмотря на то, что состояние изменяется, никаких изменений в columnDefs .

Я использую .applyTransactionAsync() для высокочастотных обновлений. Следовательно, при использовании .setColumnDefs() таблицы не отображаются какие-либо данные.

Есть ли какой-либо способ, которым этот стиль ячейки выполняется на основе динамического условия для динамических данных вместо фиксированного?

Вы можете использовать AgGrid context для обновления динамического значения, которое затем можно использовать для передачи по сетке. Вот как вы можете ссылаться на context объект в своем cellStyle обратном вызове.

 {
  headerName: "PRICE",
  field: "price",
  cellStyle: (params) => {
    if (params.value < params.context.threshold) {
      return { backgroundColor: "lightCoral" };
    } else {
      return { backgroundColor: "deepSkyBlue" };
    }
  }
}
  

Настройка context проста

 <AgGridReact
  columnDefs={columnDefs}
  rowData={rowData}
  context={{
    threshold
  }}
  ...
/>
  

Где threshold это динамическое значение, которое вы можете получить, например, из хранилища redux или ответа API. В приведенном ниже демонстрационном коде вы можете обновлять threshold локально, используя значение из input .

 const [threshold, setThreshold] = React.useState(20);
const updateThreshold = () => {
  const inputEl = document.getElementById("thresholdInput");
  const newValue = parseFloat((inputEl as HTMLInputElement).value);
  setThreshold(newValue);
};

return (
  <>
    <input id="thresholdInput" defaultValue={threshold} />
    <button onClick={updateThreshold}>Update threshold</button>
    ...
  </>
);
  

Живая демонстрация