CODEWITHSUNDEEP
reactjspaginationcentermui-datatabletanstack-table
arjun pandu
arjun pandu

Reputation: 1

How to center pagination of Material React Table

i have been working on a table project using Material React Table which is built with Built with Material UI v5 and TanStack TableV8

i want to center the pagination to the center of the page/table but i couldn't can anyone help me out. below is the code of the project when i have researched about the problem i have seen some examples and tried them but i couldnt find any way to center it refer this link for more examples

click here for image

import {MaterialReactTable,useMaterialReactTable,}
import { data } from "../data/data";
import { useMemo } from "react";
import moment from "moment";
const Table = () =>
const columns = useMemo(
() => [
  { accessorKey: "id", header: "ID", size: 50 },
  {
    accessorKey: "name",
    header: "Name",
    muiTableBodyCellProps: {
      align: "center",
    },
    muiTableHeadCellProps: {
      align: "center",
    },
    size: 160,
  },
  {
    accessorKey: "category",
    header: "Category",
    muiTableBodyCellProps: {
      align: "center",
    },
    muiTableHeadCellProps: {
      align: "center",
    },
    size: 120,
  },
  {
    accessorKey: "subcategory",
    header: "Subcategory",
    muiTableBodyCellProps: {
      align: "center",
    },
    muiTableHeadCellProps: {
      align: "center",
    },
  },
  {
    accessorKey: "createdAt",
    header: "Created At",
    Cell: ({ cell }) => (
      <span>{moment(cell.value).format("DD-MMM-YYYY HH:mm")}</span>
    ),
    muiTableBodyCellProps: {
      align: "center",
    },
    muiTableHeadCellProps: {
      align: "center",
    },
  },
  {
    accessorKey: "updatedAt",
    header: "Updated At",
    Cell: ({ cell }) => (
      <span>{moment(cell.value).format("DD-MMM-YYYY HH:mm")}</span>
    ),
    muiTableBodyCellProps: {
      align: "center",
    },
    muiTableHeadCellProps: {
      align: "center",
    },
  },
  {
    accessorKey: "price",
    header: "Price",
    muiTableBodyCellProps: {
      align: "center",
    },
    muiTableHeadCellProps: {
      align: "center",
    },
    size: 80,
  },
  {
    accessorKey: "sale_price",
    header: "Sale Price",
    muiTableBodyCellProps: {
      align: "center",
    },
    muiTableHeadCellProps: {
      align: "center",
    },
    size: 80,
  },
],
[]

);

const table = useMaterialReactTable({
columns,
data,
enableStickyHeader: true,
enableStickyFooter: true,
paginationDisplayMode: "pages",
enableGlobalFilter: false,
enableColumnActions: false,
muiPaginationProps: {
  showRowsPerPage: false,
  shape: "rounded",
  variant: "outlined",
},
muiTablePaperProps: {
  elevation: 0, //change the mui box shadow
  //customize paper styles
  sx: {
    borderRadius: "0",
    border: "none",

    "& tr > td": {
      borderBottom: "none",
    },
    "& tr:nth-of-type(odd) > td": {
      backgroundColor: "#f5f5f5",
    },
  },
},

});

return <MaterialReactTable table={table} />;

};

Upvotes: 0

Views: 370

Answers (2)

ali Sharifi
ali Sharifi

Reputation: 1

this problem is in ".muirtl-qpxlqp" class , because "justify-content attribute is set on "flex-end"

.muirtl-qpxlqp{
   justify-content: flex-end;
}

you should replaced by {justify-content: center} and append {width:100%} in ".muirtl-qpxlqp" class

.muirtl-qpxlqp{
   justify-content: center;
   width:100%;
}

Upvotes: 0

ali Sharifi
ali Sharifi

Reputation: 1

also you can use a diffrent way to set center

.muirtl-qpxlqp{   position: absolute; }

replaced by this

.muirtl-qpxlqp{   position: relative;   margin: auto; }

Upvotes: 0

Related Questions