feat: be able to adjust pagination position using flex

material-table-core · May 19, 2022 · c262a95 · c262a95
1 parent 2a9178b
commit c262a95
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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;