Hi,
I am facing an issue with the resourceInfo columns. I am using BryntumScheduler from "@bryntum/scheduler-react". I have 2 props resources and columns and what i need is updating the columns array based on resources update(few more dependencies may also be there for which columns needs to be updated). Just for the test case, initially my resources state is empty and on a button click i am updating the resources state with dummy resources. With resources update, columns will be update again. But as soon as this is happening, viewpreset header just disappears. Could it be that columns prop need to be a static object and retriggering/updating it is causing rerendering issues? To note, when i am not re-updating the columns, its working fine. I am sharing few code snippets and the dependencies that i am using. Btw, i am running this in next. I am not sure if its a bug or i am missing something.
index.tsx
import type { NextPage } from "next";
import dynamic from "next/dynamic";
import { useMemo, useState } from "react";
//dynamic import for scheduler
const BryntumScheduler = dynamic(() => import("../import"), {
ssr: false,
});
const resources = [
{ id: "r1", name: "Arcady", role: "LTL" },
{ id: "r2", name: "Dave", role: "LTL" },
{ id: "r3", name: "Henrik", role: "Gulf relay" },
{ id: "r4", name: "Linda", role: "Gulf relay" },
{ id: "r5", name: "Celia", role: "LTL" },
{ id: "r6", name: "Lisa", role: "LTL" },
{ id: "r7", name: "Angelo", role: "LTL" },
];
const Home: NextPage = () => {
const [drivers, setDrivers] = useState([] as any);
const getColumns = useMemo(
() => [
{
type: "resourceInfo",
text: "",
width: 200,
// renderer: (data: any) => {
// if (data?.record?.data?.status === "unassigned") {
// data?.row.eachElement(
// (el: any) => (el.style.background = "#DFE8F8")
// );
// return <Component1 />;
// } else {
// data?.row.eachElement(
// (el: any) => (el.style.background = "inherit")
// );
// return (
// <Component2 />
// );
// }
// },
},
],
[drivers]
);
return (
<>
<button
onClick={() => {
setDrivers(resources);
}}
>
Click
</button>
<BryntumScheduler
resources={drivers}
columns={getColumns}
/>
</>
);
};
export default Home;
import.tsx
import { BryntumScheduler } from "@bryntum/scheduler-react";
export default BryntumScheduler;
package.json dependencies
"dependencies": {
"@bryntum/scheduler-react": "^5.2.4",
"@bryntum/scheduler": "npm:@bryntum/scheduler-trial@5.2.4",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.2.4",
"@mui/material": "^5.9.2",
"next": "12.2.3",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/node": "18.6.2",
"@types/react": "18.0.15",
"@types/react-dom": "18.0.6",
"eslint": "8.20.0",
"eslint-config-next": "12.2.3",
"typescript": "4.7.4"
}