Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/Tables/ExtendedTable/components/CustomSizePerPageButton.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { map } from 'lodash';
+import {
+    UncontrolledButtonDropdown,
+    DropdownToggle,
+    DropdownMenu,
+    DropdownItem
+} from './../../../../components';
+
+export const CustomSizePerPageButton = ({
+    options,
+    currSizePerPage,
+    onSizePerPageChange,
+    ...ddProps,
+}) => (
+    <UncontrolledButtonDropdown { ...ddProps }>
+        <DropdownToggle size="sm" color="link" className="text-decoration-none">
+            { currSizePerPage }<i className="fa fa-angle-down ml-2" />
+        </DropdownToggle>
+        <DropdownMenu>
+            <DropdownItem header>Page Size</DropdownItem>
+            {
+                map(options, option => (
+                    <DropdownItem
+                        onClick={() => onSizePerPageChange(option.page)}
+                        active={option.page === currSizePerPage}
+                    >
+                        { option.text }
+                    </DropdownItem>
+                ))
+            }
+        </DropdownMenu>
+    </UncontrolledButtonDropdown>
+);
+CustomSizePerPageButton.propTypes = {
+    options: PropTypes.object,
+    currSizePerPage: PropTypes.number,
+    onSizePerPageChange: PropTypes.func
+}