When I give empty data, an empty row appears

[arifsygl]

Describe the bug
When I give empty data, an empty row appears

Screenshots

Desktop (please complete the following information):

• OS: [e.g. macOs]
• Browser [chrome]

Thanks for helps.

[icflorescu]

I'm sorry, but I am unable to reproduce.

Try setting a minHeight and see if the problem persists.
Have a look at the empty-state docs/examples: https://icflorescu.github.io/mantine-datatable/examples/empty-state

If you still think there's a problem, please provide a working example (on codesandbox or something like that)...

[arifsygl]

I am sharing the codesandbox link below. When you inspect the table, you will see an empty row and an empty column appear.

I noticed that when I use Tailwind, it gives a border to the empty column, so I'm having such a problem.

https://codesandbox.io/s/elated-mayer-rbu7h1

[icflorescu]

The provided sandbox is not functional:

But, since you've mentioned tailwind, I think I understand what the problem might be.
Mantine DataTable needs to display an empty row (specifically styled as to be invisible) when it contains no records.
Tailwind appears to somehow override the styling of that empty row in your case.

TL;DR

See if scoping tailwind helps.

Explanation

As you know, the component is built upon (and intended to be used in conjunction with) Mantine, an excellent UI library that follows healthy CSS scoping/encapsulation principles.

Tailwind, on the other hand, does not, and therefore doesn't play nice with UI component libraries. It's not necessarily bad per se (you could probably use it with their paid UI components), but if you ask me, it gives you the false impression that you don't actually need to know CSS, ir creates more problems than it solves and in the end it promotes bad practices. That is why I'm getting more and more biased against it nowadays. seeing how it's thoughtlessly adopted without considering the implications.

We could, arguably, do more in Mantine DataTable to increase our styling selectors specificity. But, in doing so, we'd end up adding unnecessary bloat to our library in order to accommodate unwanted side-effects generated by tailwind or other things that do not follow CSS scoping/encapsulation best practices.

[arifsygl]

@icflorescu Thank you for your fast response!

[aaly00]

facing same problem

[aaly00]

I don't use tailwind

[aaly00]

I created a working stackblitz demonstrating the issue
nextjs: https://stackblitz.com/edit/nextjs-b4kcz9?file=pages/index.js
reactjs: https://stackblitz.com/edit/react-ts-pdowhj

[icflorescu]

Thanks for the stackblitz.
Fixed in v1.7.22.