correct-apricot•2w 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•2w 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•2w ago

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

correct-apricot•2w ago

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

like-gold•2w ago

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

correct-apricot•6d 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