在AG-Grid-Reaction中,如果API Response的布尔值为TRUE或FALSE,则默认情况下,AG-GRID-REACT会显示复选框.AG-GRID-REACT中是否有属性以在列而不是复选框中将值显示为真或假.
如果有任何财产可以实现这一点,有人能帮忙吗?
在AG-Grid-Reaction中,如果API Response的布尔值为TRUE或FALSE,则默认情况下,AG-GRID-REACT会显示复选框.AG-GRID-REACT中是否有属性以在列而不是复选框中将值显示为真或假.
如果有任何财产可以实现这一点,有人能帮忙吗?
您可以定义属性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 />);