mantine-react-table version 2.0.0-beta.1 react

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

This looks like a bug in Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id

Row dividers are not visible in Firefox about mantine-react-table HOT 3 CLOSED

iscy commented on July 29, 2024

Row dividers are not visible in Firefox

from mantine-react-table.

Comments (3)

davidroeca commented on July 29, 2024 1

I've stumbled across this issue as well, and found a workaround within my app for now -- I needed to unset some backgrounds. The paper background will take precedence here. While this is most definitely a bug in firefox, it's more than 10 years old and hasn't been fixed.

/*  styles.module.css */
.table {
  /* ... */
  /* Resolve https://github.com/KevinVandy/mantine-react-table/issues/327 */
  background-color: unset !important;
  tbody, thead {
    /* Resolve https://github.com/KevinVandy/mantine-react-table/issues/327 */
    background-color: unset !important;
  }
  tr {
    /* Resolve https://github.com/KevinVandy/mantine-react-table/issues/327 */
    background-color: unset !important;
  }
  td {
    /* Resolve https://github.com/KevinVandy/mantine-react-table/issues/327 */
    /* see https://bugzilla.mozilla.org/show_bug.cgi?id=688556#c43 */
    background-clip: padding-box;
  }
}

Then these styles get used in MRT_TableOptions:

  import styles from './styles.module.css'
  export const getMyMRTOptions = <TData extends MRT_RowData>(
    config: MRTConfig = {},
  ): Partial<MRT_TableOptions<TData>> => ({
    // ...
    mantineTableProps: {
      className: styles.table,
    },
  })

from mantine-react-table.

iscy commented on July 29, 2024 1

@davidroeca, thanks for bringing up a solution that can easily be implemented.

from mantine-react-table.

alessandrojcm commented on July 29, 2024

This looks like a bug in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=688556, the CSS is not doing anything special here so I am inclined to believe it's a bug with the browser.

from mantine-react-table.

Recommend Projects