Strange but on renderDetails and more!

mantine-react-table version

v1.0.0

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

Hello, I had a very strange bug happening on my table. Stack: Nextjs13 pages router, Mantine, and MRT v1.0.0

The problem is the page "broken" when I press to open the detailPanel. Nothing shows at console on the browser, the browser freezes, and I can check nothing on console or network.

I will share the code and video.

On video you guys can see nothing happens when press the button, I tried to open the console but the tab is frozen, I need to open another tab (the logs are from loom so, on really not is showing on the console.log.

The strange, is I hace another tables working fine! Today, when I create this new one, this feature not open, not work any more, the old one still works, but a new one (I create tons of new ones, different pages, and nothing)

I already tried remove and add the package, remove all node_modules and install again, but nothing fixed.

Please help!

video: https://www.loom.com/share/13ae063d7bfd450487e3a823cab0c449

Code:

import { MRT_ColumnDef, MantineReactTable, useMantineReactTable } from 'mantine-react-table'
import { type NextPage } from 'next'
import React, { useEffect, useMemo } from 'react'

const HomePage: NextPage = () => {
const data = [
    {
        id: 1,
        name: "John Doe",
        email: "jont@td.com",
        roles: {
            profiles: ["admin"],
            permissions: [
                {
                    action: ["read"],
                    subject: "settings"
                }
            ]
        }
    }
]
  const columns = useMemo<MRT_ColumnDef<typeof data[number]>[]>(() => [
    {
      accessorKey: 'id',
      header: 'ID',
    },
    {
      accessorKey: 'name',
      header: 'Name',
    }
  ], [])

  const table = useMantineReactTable({
    data,
    columns,
    renderDetailPanel: () => (<div>Hello World</div>)
  })

  return <div>
    <MantineReactTable table={table} />
  </div>
}

export default HomePage

Minimal, Reproducible Example - (Optional, but Recommended)

import { MRT_ColumnDef, MantineReactTable, useMantineReactTable } from 'mantine-react-table'
import { type NextPage } from 'next'
import React, { useEffect, useMemo } from 'react'

const HomePage: NextPage = () => {
const data = [
    {
        id: 1,
        name: "John Doe",
        email: "jont@td.com",
        roles: {
            profiles: ["admin"],
            permissions: [
                {
                    action: ["read"],
                    subject: "settings"
                }
            ]
        }
    }
]
  const columns = useMemo<MRT_ColumnDef<typeof data[number]>[]>(() => [
    {
      accessorKey: 'id',
      header: 'ID',
    },
    {
      accessorKey: 'name',
      header: 'Name',
    }
  ], [])

  const table = useMantineReactTable({
    data,
    columns,
    renderDetailPanel: () => (<div>Hello World</div>)
  })

  return <div>
    <MantineReactTable table={table} />
  </div>
}

export default HomePage

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms

[X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

KevinVandy / mantine-react-table