Pagination problem placed in center position

Angelk90 commented 4 years ago

Issue Check list

[x] Agree to the Code of Conduct
[x] Read the README
[x] You are using React 16.8.0+
[x] You installed styled-components
[x] Include relevant code or preferably a code sandbox

Describe the bug

Park Smart - The New Frontier of Urban Mobility 4-11-2020 11-58-28

Schermata da 2020-11-04 12-06-46

As you can see in the image, the pagination appears in the center. After doing the update I noticed this problem. I used to use the version, "react-data-table-component": "^6.3.1" now the "react-data-table-component": "^6.11.5".

Analyzing the code (see screen) I noticed that before the nav tag there is a div tag, which was not there before if the following tag is given as the following rule: width: 100%;, it seems to fix the problem, but I'm not sure.

At the moment I use a custom pagination (see code below), but even if I remove the custom pagination it gives me the same problem.

Another thing I noticed is that weird line above the pagination.

Expected behavior

Pagination on the right.

Code Sandbox, Screenshots, or Relevant Code

Table:

<CardContent className="flex flex-col items-center justify-center p-0 py-20">
        <DataTable
          columns={columns}
          data={filteredItems}
          pagination
          paginationComponent={CustomMaterialPagination}
          paginationResetDefaultPage={resetPaginationToggle}
          subHeader
          subHeaderComponent={subHeaderComponentMemo}
          progressPending={pending}
          progressComponent={
            <div className={classes.root}>
              <LinearProgress />
            </div>
          }
          persistTableHead
          noHeader
          noDataComponent={<div style={{ padding: 24 }}>{t('TABLE_NO_RECORDS')}</div>}
        />
      </CardContent>

CustomMaterialPagination:

import React from 'react';
import { IconButton, TablePagination } from '@material-ui/core';
import { FirstPage, KeyboardArrowLeft, KeyboardArrowRight, LastPage } from '@material-ui/icons';
import i18next from 'i18next';

import { useTranslation } from 'react-i18next';
import en from './i18n/en';
import it from './i18n/it';

i18next.addResourceBundle('en', 'componentsPage', en);
i18next.addResourceBundle('it', 'componentsPage', it);

function TablePaginationActions({ count, page, rowsPerPage, onChangePage }) {
    const handleFirstPageButtonClick = () => {
        onChangePage(1);
    };

    // RDT uses page index starting at 1, MUI starts at 0
    // i.e. page prop will be off by one here
    const handleBackButtonClick = () => {
        onChangePage(page);
    };

    const handleNextButtonClick = () => {
        onChangePage(page + 2);
    };

    const handleLastPageButtonClick = () => {
        onChangePage(getNumberOfPages(count, rowsPerPage));
    };

    const getNumberOfPages = (rowCount, rowsPerPage) => Math.ceil(rowCount / rowsPerPage);

    return (
        <>
            <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
                <FirstPage />
            </IconButton>
            <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
                <KeyboardArrowLeft />
            </IconButton>
            <IconButton
                onClick={handleNextButtonClick}
                disabled={page >= getNumberOfPages(count, rowsPerPage) - 1}
                aria-label="next page"
            >
                <KeyboardArrowRight />
            </IconButton>
            <IconButton
                onClick={handleLastPageButtonClick}
                disabled={page >= getNumberOfPages(count, rowsPerPage) - 1}
                aria-label="last page"
            >
                <LastPage />
            </IconButton>
        </>
    );
}

function CustomMaterialPagination({ rowsPerPage, rowCount, onChangePage, onChangeRowsPerPage, currentPage }) {
    const { t } = useTranslation('componentsPage');

    // console.log(rowsPerPage, rowCount, currentPage - 1);

    return (
        <TablePagination
            component="nav"
            count={rowCount}
            rowsPerPage={rowsPerPage}
            page={currentPage - 1}
            onChangePage={a => {
                console.log('Ch', a);
                onChangePage(a);
            }}
            onChangeRowsPerPage={({ target }) => onChangeRowsPerPage(Number(target.value))}
            ActionsComponent={TablePaginationActions}
            labelRowsPerPage={`${t('ROWS_PER_PAGE')}:`}
            labelDisplayedRows={({ from, to, count }) =>
                `${from}-${to} ${t('OF')} ${count !== -1 ? count : `${t('MORE_THAN')} ${to}`}`
            }
        />
    );
}

export default CustomMaterialPagination;

Versions (please complete the following information)

React (RDT requires 16.8.0+) Styled Components OS: Ubuntu 18

Browser chrome

Additional context

@jbetancur : Could you give me a hand?

rajanrahman commented 4 years ago

I've been having a similar issue. Your problem might be resolved by hacking your css a little bit. In the parent div of your table and pagination don't use flex. If you need flex, don't align your items horizontally in the center.

I think this issue might also lie in the fact your pagination div is rendered outside of your table div, which shouldn't be happening. Strangely it's been happening in my production built but not locally.