Cannot integrate custom component inside a cell

16285_Ramco

I am trying to integrate a custom icon inside the grid component. As per the documentation, I have added it to the column list as a cell property, but the page is crashing and the grid is not rendering. Below is my code

      id: "_treeToggle",
      width: 30,
      header: "toggle",
      treetoggle: true,
      cell: 
         <
          NbIcon 
          id="tree-open"
          iconKey={"chevron-right"}
          // onClick={() => handleRowToggle(row.id)}
          // className="svar-grid-tree-toggle"
        />
      

    },...initialColumns]);
const initialColumns = [
  {
    id: 1,
    city: "Amieshire",
    country: 6,
    email: "Leora13@yahoo.com",
    firstName: "Ernest",
    lastName: "Schuppe",
    street: "Ratke Port",
    zipCode: "17026-3154",
    date: new Date("2016-09-23T07:57:40.195Z"),
    companyName: "Lebsack - Nicolas",
    stars: 820,
    followers: 70,
    newsletter: true,
    checked: 1,
    open: false, 

    data: [
      {
        id: "2.1",
        city: "Amieshire",
        country: 2,
        email: "Brisa46@hotmail.com",
        firstName: "Suzanne",
        lastName: "Wolff",
        street: "Lemuel Radial",
        zipCode: "88870-3897",
        date: new Date("2017-02-23T17:11:53.875Z"),
        companyName: "Mayer - Considine",
        stars: 852,
        followers: 770,
        newsletter: true,
        checked: 1,
      },
      {
        id: "2.2",
        city: "Amieshire",
        country: 2,
        email: "Cody.Schultz56@gmail.com",
        firstName: "Alessandra",
        lastName: "Feeney",
        street: "Mosciski Estate",
        zipCode: "81514",
        date: new Date("2016-06-30T05:23:18.734Z"),
        companyName: "Nikolaus and Sons",
        stars: 3209,
        followers: 2780,
      },
    ],
  },
  {
    id: 3,
    city: "Schumm",
    country: 2,
    email: "Mitchel.Herman@yahoo.com",
    firstName: "Emiliano",
    lastName: "Moore",
    street: "Maria Junctions",
    zipCode: "33930-7081",
    date: new Date("2016-03-27T07:26:57.345Z"),
    companyName: "Gulgowski - Botsford",
    stars: 3820,
    followers: 880,
    open: false,
    data: [
      {
        id: "3.1",
        city: "Gihaven",
        country: 2,
        email: "Gaylord_Reichel16@yahoo.com",
        firstName: "Alessandra",
        lastName: "Smith",
        street: "Kali Spurs",
        zipCode: "01370",
        date: new Date("2017-01-24T22:11:53.835Z"),
        companyName: "Maggio LLC",
        stars: 330,
        followers: 590,
      },
      {
        id: "3.2",
        city: "Fechester",
        country: 2,
        email: "Eileen48@gmail.com",
        firstName: "Eldridge",
        lastName: "Bins",
        street: "Casper Squares",
        zipCode: "80025-1552",
        date: new Date("2016-07-20T05:59:45.630Z"),
        companyName: "Leffler, Cummerata and Price",
        stars: 923,
        followers: 704,
      },
      {
        id: "3.3",
        city: "Caleven",
        country: 6,
        email: "Rico_Nolan@hotmail.com",
        firstName: "Claude",
        lastName: "Hermiston",
        street: "Bode Pine",
        zipCode: "76773",
        date: new Date("2017-03-13T08:02:41.211Z"),
        companyName: "Heller, Rosenbaum and Lockman",
        stars: 421,
        followers: 403,
        checked: true,
        newsletter: true,
        assigned: [2],
      },
    ],
  },
];```

Can anyone please help me out to resolve this issue?

tasha

Hello 16285_Ramco

A cell parameter can be applyed only this way:
{ id: 'avatar', cell: AvatarCell, width: 300 },

There is a discrepancy of usage in the documentation. We'll fix it later.
Please check the example: https://stackblitz.com/edit/vitejs-vite-redwt5fp?file=src%2FGridComponent.jsx,src%2FAvatarCell.jsx,src%2Findex.css

16285_Ramco

I have tried it this way also. But the problem arises when the custom component itself has a state and/or an useEffect hook.

I am getting the following error and the page crashes

Error
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Also when I use a button component which does not have any hook, I am getting this page crash error
error image

tasha

Currently, our custom components do not support the use of hooks within them. This limitation can lead to errors and crashes, as you've encountered. To resolve the issue, I recommend removing any hooks from your custom components and use my example above as a basis for your implementation. It demonstrates how to structure the component in a right way to avoid crashing the app.