MRT_TablePagination does not honor style props

[RampantDespair]

mantine-react-table version

v2.0.0-beta.9

react & react-dom versions

v19.0.0

Describe the bug and the steps to reproduce it

As the title suggest MRT_TablePagination does not honor styling props passed down to it, whether it's through:

mantinePaginationProps: {
  style: {
    padding: 0,
  },
},

OR

<MRT_TablePagination
  table={table}
  p={0}
/>

OR

<MRT_TablePagination
  table={table}
  style={{ padding: 0 }}
/>

The styles aren't applied.

Minimal, Reproducible Example - (Optional, but Recommended)

"use client";

import { Flex } from "@mantine/core";
import {
  MantineReactTable,
  MRT_ColumnDef,
  MRT_GlobalFilterTextInput,
  MRT_TablePagination,
  MRT_ToggleFiltersButton,
  useMantineReactTable,
} from "mantine-react-table";
import { useMemo } from "react";

type User = {
  id: string;
  uuid: number;
  email: string;
};

const generateUsers = (): User[] =>
  Array.from({ length: 20 }, (_, i) => ({
    id: `user-${i + 1}`,
    uuid: Math.floor(Math.random() * 1_000_000_000),
    email: `user${i + 1}@example.com`,
  }));

const users: User[] = generateUsers();

export default function TableTest() {
  const columns = useMemo<MRT_ColumnDef<User>[]>(
    () => [
      {
        accessorKey: "id",
        enableClickToCopy: true,
        header: "Id",
      },
      {
        accessorKey: "uuid",
        enableClickToCopy: true,
        header: "UUID",
      },
      {
        accessorKey: "email",
        enableClickToCopy: true,
        header: "Email",
      },
    ],
    [],
  );

  const table = useMantineReactTable<User>({
    columns,
    data: users, //must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
    enableColumnFilterModes: true,
    enableHiding: false,
    enableStickyHeader: true,
    initialState: {
      pagination: { pageSize: 10, pageIndex: 0 },
      showColumnFilters: false,
      showGlobalFilter: true,
    },
    paginationDisplayMode: "default",
    mantinePaginationProps: {
      showRowsPerPage: false,
      radius: "md",
      size: "lg",
      style: {
        padding: 0,
      },
    },
    mantinePaperProps: {
      style: {
        overflowX: "auto",
        height: "auto",
        maxHeight: "600px",
        maxWidth: "100%",
        width: "auto",
      },
    },
    mantineSearchTextInputProps: {
      placeholder: "Search",
    },
    mantineTableContainerProps: {
      style: {
        overflowX: "auto",
        maxHeight: 464,
        maxWidth: "100%",
        width: 2000,
      },
    },
    mantineTableHeadRowProps: {
      style: {
        height: 56,
        maxHeight: 56,
        minHeight: 56,
      },
    },
    renderBottomToolbar: ({ table }) => {
      return (
        <Flex
          p="md"
          gap="md"
          align="center"
          justify="end"
          h={68}
          mah={68}
          mih={68}
          style={{ borderTop: "1px solid var(--mantine-color-dark-4)" }}
        >
          <MRT_TablePagination
            table={table}
            p={0}
            style={{ padding: 0 }}
          />
        </Flex>
      );
    },
    renderTopToolbar: ({ table }) => {
      return (
        <Flex
          p="md"
          gap="md"
          align="center"
          justify="space-between"
          h={68}
          mah={68}
          mih={68}
          style={{ borderBottom: "1px solid var(--mantine-color-dark-4)" }}
        >
          <Flex align="center" justify="start" gap="md">
            <MRT_GlobalFilterTextInput table={table} />
            <MRT_ToggleFiltersButton table={table} />
          </Flex>
        </Flex>
      );
    },
  });

  return <MantineReactTable table={table} />;
}

Screenshots or Videos (Optional)

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

No, because I do not know how

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.

[unidesigner]

I came across a similar, probably related issue. When I set positionPagination: 'top', and use row selection, it adds a white area inbetween which is related to a margin-top setting that I would like to overwrite

[RampantDespair]

@unidesigner
Yeah it's unfortunate but it seems like some components have props applied at parent level whereas others it's only certain parts that are applied to the child.

mantine-react-table/packages/mantine-react-table/src/components/toolbar/MRT_TablePagination.tsx

Line 82 in 1cde9fb

'mrt-table-pagination',

[unidesigner]

Sounds like it would not be too complicated to fix to apply the props at the different levels.