ag-grid 反应显示布尔值而不是复选框

Question

在 AG-Grid-react 中，如果 API 响应具有布尔值（如 true 或 false），则默认情况下 ag-grid-react 显示复选框。 ag-grid-react 中是否有一个属性可以在列中将值显示为 true 或 false，而不是复选框。

如果有任何财产可以实现这一目标，任何人都可以帮忙吗

Answer 1

您可以定义属性cellDataType并将其设置为字符串，这样您得到的不是复选框而是实际值！

import { ColDef } from "ag-grid-community";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridReact } from "ag-grid-react";
import React, { useState } from "react";
import { createRoot } from "react-dom/client";

// Row Data Interface
interface IRow {
  make: string;
  model: string;
  price: number;
  electric: boolean;
}

// Create new GridExample component
const GridExample = () => {
  // Row Data: The data to be displayed.
  const [rowData, setRowData] = useState<IRow[]>([
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
  ]);

  // Column Definitions: Defines & controls grid columns.
  const [colDefs, setColDefs] = useState<ColDef<IRow>[]>([
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric", cellDataType: "string" },
  ]);

  // Container: Defines the grid's theme & dimensions.
  return (
    <div
      className={"ag-theme-quartz"}
      style={{ width: "100%", height: "100%" }}
    >
      <AgGridReact rowData={rowData} columnDefs={colDefs} />
    </div>
  );
};

// Render GridExample
const root = createRoot(document.getElementById("root")!);
root.render(<GridExample />);

代码沙箱