Hello UIWhiz,
Make sure you have DataGrid installed in your React project.
Use Grid Quick Start documentation please.
DataGrid can be initialized in a container.
It is also important to handle destuction of component inside the framework:
const WebixGrid = () => {
const gridUi = useRef(null);
const gridContainer = useRef(null);
useEffect(() => {
const resObserver = new ResizeObserver(() => {
if (gridUi.current) gridUi.current.adjust();
});
const container = gridContainer.current;
// Initialize the Grid
gridUi.current = webix.grid({
columns: [
{ id: "title", header: "Film title", width: 200 },
{ id: "year", header: "Release year", width: 80 },
{ id: "votes", header: "Votes", width: 100 },
],
data: [
{ id: 1, title: "The Shawshank Redemption", year: 1994, votes: 678790 },
{ id: 2, title: "The Godfather", year: 1972, votes: 511495 },
],
});
resObserver.observe(container);
// Cleanup on component unmount
return () => {
if (gridUi.current) {
gridUi.current.destructor();
gridUi.current = null;
}
resObserver.disconnect();
};
}, []);
return <div ref={gridContainer} style={{ height: "100%" }} />;
};
