[KTable]: Add margin to empty text

[AlexVelezLl]

Product

Kolibri.

Current behavior

When we have an empty table, we dont have the any margins when showing the empty text as the margins when we show the table when we have data.

E.g.

Look at the margin between the hader and the previous element when we have data:

But if we have an empty table, the empty text is shown without any margin.

Desired behaviour

The empty message should have margin-top: 16px and margin-bottom: 16px just as the margins we have when the table has data.

[karankoder]

Hey @AlexVelezLl, I want to work on this issue.

[AlexVelezLl]

Hey @karankoder! For sure, will assign this to you :)

[karankoder]

Hi @AlexVelezLl ,

Thank you for assigning this issue to me! I wanted to let you know that I’m currently observing the correct margin behavior on empty data. Could you kindly provide the steps to reproduce this behavior?

[karankoder]

Hi @AlexVelezLl,

I hope you're doing well! I just wanted to follow up regarding the steps to reproduce the margin behavior issue with the empty table.

Additionally, could I work on #883 as well? Both issues are related to the KTable component, so I can fix them together in a single PR if you agree.

[AlexVelezLl]

Hey @karankoder. Apologiesfor the late response. Before assigning you that issue lets try the KDS dev process with this issue first! When we need to replicate something like this, we can use the KDS Playground, and anything we modify there, we can see it in http://localhost:4000/playground. If we place some components there, and a <KTable> in the middle, we will notice that the empty text indeed has no paddings/margins.

So we can try replicating it effectively and once there is a PR for this issue we can assign you the next one!