Custom vertical padding for pagination?

[mzdr]

Hey there, thanks for making that Mantine plugin, so far its working pretty well for me. I am currently trying to style/adjust the pagination and ran into an issue. I am currently changing the vertical padding of the pagination like this:

const useStyles = createStyles(({ spacing }) => ({
  pagination: {
    "&&": {
      padding: `${spacing.sm} ${spacing.md}`,
    },
  },
}));

Unfortunately that seems to mess with the useElementSize hook for the paginationHeight as it never gets the correct height for pb in that line:

mantine-datatable/package/DataTable.tsx

Line 529 in 2d179d7

pb={paginationHeight}

So I was wondering, would it be possible to either have this py:

mantine-datatable/package/DataTablePagination.tsx

Line 104 in 2d179d7

py="xs"

configurable or is there some other way to properly adjust the vertical padding of the pagination so that the empty state’s box gets the proper bottom padding? 👇

mantine-datatable/package/DataTableEmptyState.tsx

Line 41 in 2d179d7

<Center pt={pt} pb={pb} className={cx(classes.root, { [classes.active]: active })}>

---

By the way, I just tested this:

import { DataTable } from "mantine-datatable";
import { useEffect, useState } from "react";

const employees: [] = [];
const PAGE_SIZE = 15;

const Page = () => {
  const [page, setPage] = useState(1);
  const [records, setRecords] = useState(employees.slice(0, PAGE_SIZE));

  useEffect(() => {
    const from = (page - 1) * PAGE_SIZE;
    const to = from + PAGE_SIZE;
    setRecords(employees.slice(from, to));
  }, [page]);

  return (
    <DataTable
      withBorder
      records={employees}
      minHeight={150}
      columns={[
        { accessor: "firstName", width: 100 },
        { accessor: "lastName", width: 100 },
      ]}
      totalRecords={employees.length}
      recordsPerPage={PAGE_SIZE}
      page={page}
      onPageChange={(p) => setPage(p)}
    />
  );
};

export default Page;

This also results in the issue that the padding-bottom for that EmptyState box is too small. Not sure whats the issue here. Any help appreciated. 🙏

[icflorescu]

Hey Sebastian,

Thanks for bringing this to my attention!

This looks like a bug. The Mantine's documentation is rather vague here, but I was using useElementSize under the assumption that it returns its total (outer) dimensions, which is obviously not the case.

I guess I'll probably need to do a bit of refactoring to use useResizeObserver...

[icflorescu]

Hey @mzdr,

Can you please check if 2.9.11 is fixing the issue for you?

[mzdr]

Works like a charm. Thank you very much @icflorescu! <3