Mantine React Table Icons background color issues

[HxnDev]

mantine-react-table version

v2.0.0-beta.5

react & react-dom versions

v18.3.1

Describe the bug and the steps to reproduce it

I am using Mantine React Tables and everything is good. However, I enabled the sorting and filtering options of my table and then the sort icon (arrows) starting showing up with the green background color (which is the products primary color). I keep trying to set the background as transparent, but nothing works.

The inspect element shows the following:

-> On the element.style window in inspect. i can see the primary color being assigned to the background, but if i put the same classname (.m_8d3f4000) in code to remove background, it does nothing.

Minimal, Reproducible Example - (Optional, but Recommended)

const Table = () => {
  const table = useMantineReactTable({
    columns,
    data: rowData,
    enableSorting: true,
  })
  return table
}

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[alessandrojcm]

Hi, I believe this was fixed, can you try the latest beta and confirm please?

[HxnDev]

Hi, I believe this was fixed, can you try the latest beta and confirm please?

Hello @alessandrojcm

I updated to version 2-beta7, but the error still persists:

const columns = useMemo<MRT_ColumnDef<ContributionItems>[]>(
    () => [
      {
        accessorKey: 'project.name',
        header: 'Project Name',
        Cell: ({ cell }) => {
          const project_name = cell.getValue<string>() || 'N/A'
          return <TruncatedTextWithTooltip text={project_name} />
        },
      },
      {
        accessorKey: 'project.location.countryName',
        header: 'Country',
        Cell: ({ cell }) => {
          const country = cell.getValue<string>() || 'N/A'
          return <TruncatedTextWithTooltip text={country} />
        },
      },

const table = useMantineReactTable({
    columns,
    data: rowData,
    rowCount: totalRowCount,
    pageCount: Math.ceil(totalRowCount / pagination.pageSize),
    enablePagination: false,
    enableGlobalFilter: false,
    mantineToolbarAlertBannerProps: error
      ? {
          color: 'red',
          children: error.message,
        }
      : undefined,
    state: {
      isLoading: loading,
      showAlertBanner: !!error,
      showSkeletons: false,
      pagination,
    },
    onPaginationChange: (newPagination) => {
      if (typeof newPagination === 'function') {
        setPagination((prevPagination) => newPagination(prevPagination))
      } else {
        setPagination(newPagination)
      }
    },
  })

[chindathorn]

@HxnDev make sure you add import 'mantine-react-table/styles.css'; in your root file

[HxnDev]

@HxnDev make sure you add import 'mantine-react-table/styles.css'; in your root file

Hello @chindathorn
Thank you. I did try that and it works.

However just a followup question, now the table toolbar is moved to the far right side and theres this empty space in the bottom. Is there anything i could do about it?

Picture 1: Previous Table version

Picture 2: Current Table after adding style.css

[chindathorn]

@HxnDev try this

const table = useMantineReactTable({
    mantineTopToolbarProps: {
        style: { justifyContent: 'start' },
        // ...your other custom styles
    },
})

[HxnDev]

Hey @chindathorn

I did try that, but no use

const table = useMantineReactTable({
    columns,
    data: rowData,
    rowCount: totalRowCount,
    pageCount: Math.ceil(totalRowCount / pagination.pageSize),
    enablePagination: false,
    enableGlobalFilter: false,
    manualFiltering: true,
    manualSorting: true,
    manualPagination: true,
    enableColumnActions: true,
    mantineTopToolbarProps: {
      style: { justifyContent: 'start' },
      // ...your other custom styles
    },
    mantineToolbarAlertBannerProps: error
      ? {
          color: 'red',
          children: error.message,
        }
      : undefined,
    state: {
      isLoading: loading,
      showAlertBanner: !!error,
      showSkeletons: false,
      pagination,
      sorting,
      columnFilters,
      columnVisibility,
    },

I also tried the below too but still no solution:

const table = useMantineReactTable({
    columns,
    data: rowData,
    rowCount: totalRowCount,
    pageCount: Math.ceil(totalRowCount / pagination.pageSize),
    enablePagination: false,
    enableGlobalFilter: false,
    manualFiltering: true,
    manualSorting: true,
    manualPagination: true,
    enableColumnActions: true,
    layoutMode: 'semantic',
mantineTableHeadCellProps: {
      style: {
        textAlign: 'left',
      }
    },