아래 소스코드 첨부 합니다.
import "./styles.css";
import * as React from "react";
import "@grapecity/wijmo.styles/wijmo.css";
import * as wjCore from "@grapecity/wijmo";
import * as ReactDOM from "react-dom";
import * as wjcGrid from "@grapecity/wijmo.react.grid";
import * as wjGrid from "@grapecity/wijmo.grid";
wjCore.setLicenseKey(window.evalkey);
export default function App() {
const grid = React.createRef(null);
const [source, setSource] = React.useState(
new wjCore.CollectionView(getData())
);
const [text, setText] = React.useState('')
function initialized(s) {}
return (
<div className="App">
<div className="container-fluid">
<input value={text} onChange={(e) => setText(e.target.value)}/>
<wjcGrid.FlexGrid
itemsSource={source}
initialized={initialized}
ref={grid}
itemFormatter={()=>{}}
>
<wjcGrid.FlexGridColumn
binding="id"
header="ID"
width={60}
isReadOnly={true}
/>
<wjcGrid.FlexGridColumn binding="country" header="Country" />
<wjcGrid.FlexGridColumn binding="product" header="Product" />
<wjcGrid.FlexGridColumn binding="sales" header="Sales" />
<wjcGrid.FlexGridColumn binding="expenses" header="Expenses" />
</wjcGrid.FlexGrid>
</div>
</div>
);
}
function getData() {
// create some random data
let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
products = "Phones,Computers,Cameras,Stereos".split(","),
data = [];
for (let i = 0; i < 5; i++) {
data.push({
id: i,
country: countries[i % countries.length],
product: products[i % products.length],
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
}
작성일 2023-06-26 16:45 조회 1,126회
댓글 0건
3 답변
