Table option wont' work

[sundsx]

The options table wont work**

Also the table work only with Chrome- Error from FF and Safari

this my table setup

  <DataTable
        striped // -> not striped the rows
        withTableBorder // -> not border the table
        withColumnBorders // -> no column border appear
        borderRadius="sm" // -> no border radius
        highlightOnHover // -> no highlight the rows
        verticalSpacing="xs" // -> works well
        fz="xs" // -> works well
        verticalAlign="center" // -> works well

        rowExpansion={} // -> works well

Chrome with no options rendered

Firefox Error

I have Mantine 7 in React application

My index tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { createTheme, MantineProvider } from '@mantine/core';
import '@mantine/core/styles.css';
import '@mantine/core/styles.layer.css';
import 'mantine-datatable/styles.layer.css';
import './layout.css';

const theme = createTheme({
  /** Put your mantine theme override here */
});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <MantineProvider theme={theme} defaultColorScheme="dark">
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </MantineProvider>
);

So can help me to sovle this issue

Thanks

[icflorescu]

Hey @sundsx,

You can check that striped, withTableBorder withColumnBorders, borderRadius and highlightOnHover attributes work perfectly on this page in the documentation (which is actually a Next.js application):

https://icflorescu.github.io/mantine-datatable/examples/basic-table-properties/

As you can see, that page works in all browsers - which means there must be an error somewhere else in your code.
Since it's not a bug in Mantine DataTable, I am going to covert this issue to a discussion and perhaps somebody will be able to point you in the right direction.

Related to your code, I don't understand:

• why are you importing the Mantine core styles twice - once the standard version, once the layers version?
• How are you controlling the order of layers? What's the content of your layout.css?

[icflorescu]

@sundsx - I've converted this to a discussion in Q&A. Maybe some user will be able to point you in the right direction.

[icflorescu]

Make sure to carefully read the styling docs page (https://icflorescu.github.io/mantine-datatable/styling/) and search other discussions here. I remember somebody mentioning a similar case a while ago, and in the end there was an issue of improper styles configuration.