Resource fields can traverse nested object paths

[lenardchristopher]

• resourceFields can accept object property paths so nested objects can be used
• Avatar will only display if a string is provided

I tested this manually. Here is App.tsx

import { Scheduler } from "./lib";
import { EVENTS, RESOURCES } from "./events";
import { useRef } from "react";
import { SchedulerRef } from "./lib/types";

function App() {
  const calendarRef = useRef<SchedulerRef>(null);

  return (
    <Scheduler
      ref={calendarRef}
      events={EVENTS}
      resources={RESOURCES}
      resourceFields={{
        idField: 'admin_id',
        textField: 'test.name',
        avatarField: ''
      }}
      // events={generateRandomEvents(200)}
    />
  );
}

export default App;

and RESOURCES array

export const RESOURCES = [
  {
    admin_id: 1,
    title: "One",
    mobile: "555666777",
    avatar: "",
    color: "#ab2d2d",
    test: {
      name: "Hello"
    }
  },
  {
    admin_id: 2,
    title: "Two is very long name",
    mobile: "555666777",
    avatar: "https://picsum.photos/200/300",
    color: "#58ab2d",
    test: {
      name: "World"
    }
  },
  {
    admin_id: 3,
    title: "Three",
    mobile: "555666777",
    avatar: "https://picsum.photos/200/300",
    color: "#a001a2",
    test: {
      name: "Foo"
    }
  },
  {
    admin_id: 4,
    title: "Four",
    mobile: "555666777",
    avatar: "https://picsum.photos/200/300",
    color: "#08c5bd",
    test: {
      name: "Bar"
    }
  },
];

End Result

[aldabil21]

Hi @lenardchristopher
I like the option of using nested object values.

The avatar is intentional to be falling back to random avatar, to prevent mis-match heights as showing in the image.

If user want to override the headers, the resourceHeaderComponent can be used

[lenardchristopher]

@aldabil21 How would I completely remove the avatar then? In my use case, resources are "rooms" that have no avatars.

[aldabil21]

@lenardchristopher You can use resourceHeaderComponent to fully render your custom header. Using Mui ListItem component is preferable

[aldabil21]

Took a second look at this
It had to be adapted to all other places in the code that uses the resourceFields, otherwise it may cause issues.

I will close in favor of resourceHeaderComponent, I believe its a valid solution for the problem