maintime-datatable height not allowing for "No records" to display

[duhmojo]

Describe the bug A straight use of <DataTable> includes a 'height: 100%' but it's not resulting in enough height to display the "No records" icon and text. When table data is loaded the height is reflective of the records.

To Reproduce In my main.jsx I include the Datatable styling so its in oder of the overall mantine styling:

import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
import 'mantine-datatable/styles.layer.css';

Doing so will hide the "No records". If I skip adding the style it'll always show "No records", a common issue people report I expect.

Then in a component I simply import and render DataTable:

            <DataTable
                records={[]}
                columns={[{accessor: 'name', title: 'Name'}, ...]}
            />

When I view the page I thought no records wasn't working, but I noticed a small line in the centre of the table:

I went into the DOM and found that the mantine-datatable class had height set to 100%. When I changed it to a specific height it revealed no records was being displayed but the browser wasn't considering the height with the no record content:

Expected behavior No record should be displayed/visible as expected.

Screenshots See above.

Desktop (please complete the following information):

• OS: Macos
• Browser Chrome
• Version 131

[duhmojo]

I worked around it by adding a dynamic height prop height={images.length > 0 ? '100%' : '180px'}. I'll have to create a DataTable wrapper to keep this workaround because I won't be sprinkling it all over the place for each table use.