Merge pull request #475 from Panenco/feat/table-pagination-rowsPerPag…

…eSelectProps-and-pageSelectProps

feat: table pagination rows per page select and page select

src/components/pagination/table-pagination.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import cx from 'classnames';
 
 import { useTheme } from 'styled-components';
-import { Text, SelectInput, Button } from 'components';
+import { Text, SelectInput, SelectInputProps, Button } from 'components';
 import { usePagination } from './usePagination';
 import { StyledPagination } from './styles';
 import { additionalStyles } from '../select/style';
@@ -25,8 +25,16 @@ export type TablePaginationProps = {
   onChangePage: (page: number | PaginationOption) => void;
   onChangeRowsPerPage: any;
   page: number;
+  /**
+   *  used to pass props to the page select input
+   */
+  pageSelectProps?: SelectInputProps;
   rowsPerPage: number;
   rowsPerPageOptions?: any;
+  /**
+   * used to pass props to the rows per page select input
+   */
+  rowsPerPageSelectProps?: SelectInputProps;
   selectStyles?: {
     [key: string]: (...args) => { [k: string]: any };
   };
@@ -88,6 +96,8 @@ export const TablePagination = ({
       `Displaying ${rangeStart}-${rangeEnd} of ${pCount} items`,
     currentPage: (currentPage: number, pagesAmount: number) => `${currentPage} of ${pagesAmount} pages`,
   },
+  rowsPerPageSelectProps = {},
+  pageSelectProps = {},
   ...otherProps
 }: TablePaginationProps): JSX.Element => {
   const [isFirst, isLast, pagesAmount] = usePagination({ page, count, rowsPerPage });
@@ -114,6 +124,7 @@ export const TablePagination = ({
           {locales.itemsPerPage}
         </Text>
         <SelectInput
+          {...rowsPerPageSelectProps}
           options={rowsPerPageOptions}
           className='paginationSelect'
           id='rowsPerPage'
@@ -142,6 +153,7 @@ export const TablePagination = ({
           }}
         />
         <SelectInput
+          {...pageSelectProps}
           options={pagesOptions}
           className='paginationSelect'
           id='page'

stories/pagination/TablePagination.stories.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { TablePagination } from 'components/pagination/table-pagination';
+import { BrowserRouter } from 'react-router-dom';
+import { Col, Row } from 'components';
+
+export default {
+  title: 'Example/Pagination/TablePagination',
+  component: TablePagination,
+} as ComponentMeta<typeof TablePagination>;
+
+const Template: ComponentStory<typeof TablePagination> = (args) => <TablePagination {...args} />;
+
+export const Default = Template.bind({});
+
+const DemoTemplate = () => {
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(12);
+
+  const handleChangePage = (val) => {
+    setPage(Number(val));
+  };
+
+  const handleChangeRowsPerPage = (val) => {
+    setRowsPerPage(Number(val));
+    setPage(0);
+  };
+
+  return (
+    <BrowserRouter>
+      <Row style={{ justifyContent: 'center' }}>
+        <Col>
+          <TablePagination
+            page={page}
+            onChangePage={handleChangePage}
+            onChangeRowsPerPage={handleChangeRowsPerPage}
+            count={201}
+            rowsPerPage={rowsPerPage}
+          />
+        </Col>
+      </Row>
+    </BrowserRouter>
+  );
+};
+
+export const Demo = DemoTemplate.bind({});