How to best debug a problem with Empty State?

[benze]

I'm trying to build a basic app with Mantine and Next.js, but am running into an issue with the Mantine-Datatable in which my datatable is fully populated, and yet the "No Records" icon and message is still being displayed.

I have reduced my components to bare bones, and yet it is still occurring.

export async function ClientTable( {query}:{query:string}) {
    // const {count, clients} = await fetchClients(query);
    const clients = clients_raw;
    console.log( clients.length);

    return (
        <DataTable
            height={300}
            withTableBorder
            withColumnBorders
            records={clients}
            columns={[
                {accessor: 'first_name', sortable: true},
                {accessor: 'last_name', sortable: true},
                {accessor: 'dob', sortable: true},
            ]}
        />

What is the best way to debug this issue and find out where/why/how this is failing? When I install the lib using npm -i mantine-datatable, I see that I get the js.map file, but is my only option now to clone the GH repo and point to it in the browser to try and isolate the issue? Can anyone give me pointers how to set this up? I have not tried to debug an external lib like this before.

Or is there any debug/log information that I can enable in the component to help me identify what I am missing or have done wrong?

[icflorescu]

Are you sure you're importing the styles correctly?
See: #530, #505 and #456.

[benze]

@icflorescu No - I'm not sure! :). I'm new to both Mantine and Next.js so I very likely have a CSS mistake. I'll have to check and confirm.

For future reference and my knowledge, is there any documentation that would explain how to setup Chrome DevTools or an IDE to be able to step through Mantine-Database with a debugger? I tried cloning the sources, and then tried to specify both the root folder and the package/ folder as sources in my DevTools Workspace, hoping/expecting that Chrome would like the source map to the actual sources, but nothing seems to work. If I place a breakpoint in the DataTable.tsx file, the browser never triggers it.

Thanks!

Eric