rotten-yellow•9mo ago

Singular Format

I tried to change the List page for dailyTracker to singular format using textTransformers. It is currently showing "Daily Trackers" on the list page but I want it to be "Daily Tracker". What am I doing wrong? This is my code:

<Refine
                resources={[
                  {
                    name: "dailyTracker",
                    options: {
                      label: "Daily Tracker",
                      textTransformers: { singular: (text: string) => text },
                    },
                    list: "/dailyTracker",
                    edit: "/dailyTracker/edit/:id",
                    show: "/dailyTracker/show/:id",
                    icon: <Assessment />,
                    meta: {
                      canDelete: true,
                    },
                  },
                ]}
              >

<Refine
                resources={[
                  {
                    name: "dailyTracker",
                    options: {
                      label: "Daily Tracker",
                      textTransformers: { singular: (text: string) => text },
                    },
                    list: "/dailyTracker",
                    edit: "/dailyTracker/edit/:id",
                    show: "/dailyTracker/show/:id",
                    icon: <Assessment />,
                    meta: {
                      canDelete: true,
                    },
                  },
                ]}
              >

2 Replies

kapa.ai•9mo ago

Hi @soto76. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The textTransformers option should be used in the options prop of the <Refine> component, not in the resources prop. The textTransformers option allows you to customize the transformation of the resource name displayed on the user interface. Here is how you should structure your code:

<Refine
  options={{
    textTransformers: {
      singular: (text: string) => text,
    },
  }}
  resources={[
    {
      name: "dailyTracker",
      options: {
        label: "Daily Tracker",
      },
      list: "/dailyTracker",
      edit: "/dailyTracker/edit/:id",
      show: "/dailyTracker/show/:id",
      icon: <Assessment />,
      meta: {
        canDelete: true,
      },
    },
  ]}
>

<Refine
  options={{
    textTransformers: {
      singular: (text: string) => text,
    },
  }}
  resources={[
    {
      name: "dailyTracker",
      options: {
        label: "Daily Tracker",
      },
      list: "/dailyTracker",
      edit: "/dailyTracker/edit/:id",
      show: "/dailyTracker/show/:id",
      icon: <Assessment />,
      meta: {
        canDelete: true,
      },
    },
  ]}
>

In this example, the singular function is set to return the input text as is, effectively disabling any transformation. You can adjust these functions to suit your needs. For more information, you can refer to the refine documentation (https://refine.dev/docs/api-reference/core/components/refine-config/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@934748406096736296> kapa.ai is still learning and improving, please let us know how it did by reacting below