React AgGrid -基于属性条件的行样式

React AgGrid 是一个强大的数据表格组件库，它提供了丰富的功能来定制表格的外观和行为。基于属性条件的行样式是其中的一个功能，允许开发者根据行的数据动态地应用不同的样式。

基础概念

行样式（Row Styling）：行样式是指根据行的数据或状态来应用不同的CSS样式。这可以用于高亮显示某些行，或者在特定条件下改变行的外观。

类型

基于数据的样式：根据行中的数据值应用样式。
基于状态的样式：根据行的选中状态、编辑状态等应用样式。

应用场景

数据过滤和排序：高亮显示符合特定条件的行。
数据验证：标记出无效或需要关注的数据行。
交互反馈：在用户与表格交互时提供视觉反馈。

示例代码

以下是一个简单的示例，展示如何在React AgGrid中基于属性条件应用行样式：

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const GridExample = () => {
  const [rowData, setRowData] = useState([
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ]);

  const columnDefs = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ];

  const getRowStyle = params => {
    if (params.data.price > 50000) {
      return { backgroundColor: 'lightgreen' };
    } else {
      return { backgroundColor: 'white' };
    }
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        getRowStyle={getRowStyle}
      />
    </div>
  );
};

export default GridExample;