optimistic-gold•4mo ago

How do Sidebar items by capital chars? I need to have ABC Ratings =>Small Yellow Item

but now I have Abc ratings = >Small Yellow Item function urls(name: string, parent?: string, label?: string) { return { name: name, list: /${name}, show: /${name}/show/:id, create: /${name}/create, edit: /${name}/edit/:id, parentName: parent, meta: { label: label ?? name, }, }; } enum Group { ABC_RATINGS = ABC Ratings', } const resources = [ urls('abc-test, Group.ABC_RATINGS, 'Small Yellow '), ]; const App: React.FC = () => { return ( <.......> <Refine resources={resources}

5 Replies

kapa.ai•4mo ago

Hi @Evgeny Kutovoy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To ensure that your sidebar items display with capital characters as intended, you need to correctly set the label in the meta property of your resource definitions. This label will be used by the <Sider /> component to render the navigation links. Here's how you can adjust your code to achieve the desired result: 1. Ensure that the label in the meta property is set to the desired capitalized string. 2. Make sure the name property of the resource is correctly defined. Here is the corrected code:

function urls(name: string, parent?: string, label?: string) {
  return {
    name: name,
    list: `/${name}`,
    show: `/${name}/show/:id`,
    create: `/${name}/create`,
    edit: `/${name}/edit/:id`,
    parentName: parent,
    meta: {
      label: label ?? name,
    },
  };
}

enum Group {
  ABC_RATINGS = 'ABC Ratings',
}

const resources = [
  urls('abc-test', Group.ABC_RATINGS, 'Small Yellow Item'),
];

const App: React.FC = () => {
  return (
    <Refine
      resources={resources}
    />
  );
};

export default App;

function urls(name: string, parent?: string, label?: string) {
  return {
    name: name,
    list: `/${name}`,
    show: `/${name}/show/:id`,
    create: `/${name}/create`,
    edit: `/${name}/edit/:id`,
    parentName: parent,
    meta: {
      label: label ?? name,
    },
  };
}

enum Group {
  ABC_RATINGS = 'ABC Ratings',
}

const resources = [
  urls('abc-test', Group.ABC_RATINGS, 'Small Yellow Item'),
];

const App: React.FC = () => {
  return (
    <Refine
      resources={resources}
    />
  );
};

export default App;

In this code: - The label in the meta property is set to 'Small Yellow Item', which will be displayed in the sidebar. - The name property is set to 'abc-test', which is used for the endpoint paths. This should ensure that your sidebar item displays as "Small Yellow Item" with the correct capitalization. For more details on how to add items to the Sider component, you can refer to the official documentation (https://refine.dev/docs/guides-concepts/faq/#how-can-i-add-an-item-to-the-sider-component). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

optimistic-goldOP•3mo ago

I need to have ABC_RATINGS like parent and Small Yellow Item like a child @Batu Hey! Bot didn't help...

wise-white•3mo ago

Hey bot can't read titles, can you include it into your message? And try to explain with better details

optimistic-goldOP•3mo ago

Could you help? I need to add horizontal scroll for one cell in my code <DataGrid {...{ ...dataGridProps, hideFooterPagination: true, disableColumnMenu: true, }} rows={[...func(tableData)]} rowCount={6} columns={[
{ field: 'comment', headerName: 'Comment', minWidth: 400, flex: 1, align: 'center', headerAlign: 'center', sortable: false, }, ]} autoHeight /> how can I do it? It is field comment