[BUGFIX] Table render no data if no record exists

[shahrokni]

Closes perses/perses#3564

Description 🖊️

If no data exists, the table contains a No data message.

🧪 To test this you can use a query which returns no results.

Checklist

• Pull request has a descriptive title and context useful to a reviewer.
• Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
  following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
• All commits have DCO signoffs.

UI Changes

• Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
• Code follows the UI guidelines.

[andreasgerstmayr]

I would suggest making an early return statement here instead of using the ternary operator spanning more than 100 lines. In my opinion it makes it easier to reason about the control flow:

if (!data || data.length === 0) {
  return <Box
    sx={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100%',
    }}
  >
    <Typography>No data</Typography>
  </Box>;
}

[Gladorme]

Yep, I agree

[Gladorme]

Are you sure we can safely remove this div?
And why there is html here and no MUI 🤔

[shahrokni]

The root (parent) for every component

We can safely remove the div because it contains no specific style and it will be rendered like a loose container which can hold stuff. The only reason the developer used it was probably the fact you can not have parallel children with no parents.

[andreasgerstmayr]

@shahrokni I thought the same before, until I had the following case:

export default function ParentComponent() {
  return (
    <div style={{display:"flex", width: 500, justifyContent:"space-between"}}>
      <div>box1</div>
      <MyComponent />
      <div>box4</div>
    </div>
  );
}

function MyComponent() {
  return (
    <div>
      <div>box2</div>
      <div>box3</div>
    </div>
  );
}

Now, remove the outer <div> of the MyComponent, and you'll see that removing it does have an effect. So we can't remove the parent div element in all cases, even if it might look unstyled.