v7. handling records differently? getting NoRecords message when there are records

[grahampcharles]

I'm all converted to v.7 but I'm finding the behavior of the records property a little different in two ways that I think might be related.

I set the property to a typed array that comes from props, so:

type SchoolClassProps = {
    items: SchoolClassDay[],
}
...

<DataTable
   records={props.items}

That worked fine in v. 6. Now, though, onRowClick and onCellClick return generic Record objects, not a typed SchoolClassDay object.

That's unusual but not a huge deal; I can rewrite my handlers:

onRowClick={({ record }) => {
                    const idClass = (record as SchoolClassDay).idClass;
                    props.handleSelectClass(record.idClass);
                }}

But the really weird thing is that the data tables show the "no records" message even when they are populated now. I have to defeat that with

                noRecordsText=""
                noRecordsIcon=<></>

Am I misunderstanding something about how DataTable is using typed data in version 7? Seems like a strange change.

[icflorescu]

The underlying typings have slightly changed in V7, but not in a way that should affect you. If anything, the development experience should be better, as VSCode should now be able to offer suggestions for column accessor.

I can't imagine what the problem might be in your particular scenario.

The onRowClick, onCellClick & other handlers are typed like this, and they should infer from the records type.

Also, I can't imagine a possible scenario when it could show the "no records" message when having data.

The documentation website itself is built as a Next.js application with working examples, and I encountered no issues similar to the ones you are describing.

Can you try to create a reproduction on codesandbox or something similar, so I can have a proper look?

[grahampcharles]

I’ll try! Graham

…

On Nov 6, 2023 at 4:14 AM -0800, Ionut-Cristian Florescu ***@***.***>, wrote: The underlying typings have slightly changed in V7, but not in a way that should affect you. If anything, the development experience should be better, as VSCode should now be able to offer suggestions for column accessor. I can't imagine what the problem might be in your particular scenario. The onRowClick, onCellClick & other handlers are typed like this, and they should infer from the records type. Also, I can't imagine a possible scenario when it could show the "no records" message when having data. The documentation website itself is built as a Next.js application with working examples, and I encountered no issues similar to the ones you are describing. Can you try to create a reproduction on codesandbox or something similar, so I can have a proper look? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[icflorescu]

the really weird thing is that the data tables show the "no records" message even when they are populated now. I have to defeat that with

I realized that this could happen if you forgot to import the mantine-datatable CSS in your application, but without a reproduction, I'm afraid I can't assist you more...

[harveydf]

I was having the same issue on my code and I could reproduce the issue in a codebox. It seems that you're right, when I import the the CSS the problem is gone. https://codesandbox.io/s/fragrant-night-f256sc?file=/src/App.tsx

[grahampcharles]

Yes, that's solved it! Sorry to be thick -- missed the CSS imports entirely. Somehow, it's sorted the typings idiosyncrasies, too -- not sure how that happened. ;)