From c262a95f7bc5607038e85a1765d6c22cf028419a Mon Sep 17 00:00:00 2001
From: Domino987 <domino987@gmail.com>
Date: Thu, 19 May 2022 18:21:07 +0200
Subject: [PATCH] feat: be able to adjust pagination position using flex

---
 src/index.js          | 6 +-----
 src/material-table.js | 9 ++++++---
 types/index.d.ts      | 1 +
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/index.js b/src/index.js
index e8d913b8..c2cc089e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,12 +9,8 @@ MaterialTable.defaultProps = defaultProps;
 MaterialTable.propTypes = propTypes;
 
 const styles = (theme) => ({
-  paginationRoot: {
-    width: '100%'
-  },
   paginationToolbar: {
-    padding: 0,
-    width: '100%'
+    padding: 0
   },
   paginationCaption: {
     display: 'none'
diff --git a/src/material-table.js b/src/material-table.js
index 64889542..cf641640 100644
--- a/src/material-table.js
+++ b/src/material-table.js
@@ -903,14 +903,17 @@ export default class MaterialTable extends React.Component {
             <TableRow style={{ display: 'grid' }}>
               <props.components.Pagination
                 classes={{
-                  root: props.classes.paginationRoot,
                   toolbar: props.classes.paginationToolbar,
                   caption: props.classes.paginationCaption,
                   selectRoot: props.classes.paginationSelectRoot
                 }}
                 style={{
-                  float: props.theme.direction === 'rtl' ? '' : 'right',
-                  overflowX: 'auto'
+                  overflowX: 'auto',
+                  display: 'flex',
+                  direction: props.theme.direction,
+                  justifyContent: props.options.paginationAlignment
+                    ? props.options.paginationAlignment
+                    : 'flex-end'
                 }}
                 colSpan={3}
                 count={
diff --git a/types/index.d.ts b/types/index.d.ts
index b1870c69..efea06ae 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -379,6 +379,7 @@ export interface Options<RowData extends object> {
   overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'initial' | 'inherit';
   pageSize?: number;
   pageSizeOptions?: number[];
+  paginationAlignment?: React.CSSProperties['justifyContent'];
   paginationType?: 'normal' | 'stepped';
   paginationPosition?: 'bottom' | 'top' | 'both';
   persistentGroupingsId?: string;