Added option numberOfPagesAround (#501)

* Added option numberOfPagesAround

* Changes based on Code review

* Normalize the value and add TS

* adjust brackets

Co-authored-by: Domino987 <domino051@gmail.com>
Co-authored-by: Domino987 <domino987@gmail.com>

__tests__/demo/demo-components/index.js

@@ -1165,6 +1165,31 @@ export function TableWithSummary() {
   );
 }
 
+export function TableWithNumberOfPagesAround() {
+  const [numberOfPagesAround, setNumberOfPagesAround] = useState(1);
+
+  return (
+    <>
+      <button onClick={() => setNumberOfPagesAround(numberOfPagesAround + 1)}>
+        +1
+      </button>
+      <button onClick={() => setNumberOfPagesAround(numberOfPagesAround - 1)}>
+        -1
+      </button>
+      <p>Available options: integer from 1 to 10</p>
+      <p>{`current option: {numberOfPagesAround: ${numberOfPagesAround}, paginationType: "stepped"}`}</p>
+      <MaterialTable
+        title="Table with custom amount of pages around current"
+        columns={columns}
+        data={rawData}
+        options={{
+          numberOfPagesAround: numberOfPagesAround,
+          paginationType: 'stepped'
+        }}
+      />
+    </>
+  );
+}
 export function FixedColumnWithEdit() {
   const [data, setData] = useState([
     { name: 'jack', id: 1 },

__tests__/demo/demo.js

@@ -44,6 +44,7 @@ import {
   DetailPanelRemounting,
   TreeData,
   TableWithSummary,
+  TableWithNumberOfPagesAround,
   FixedColumnWithEdit
 } from './demo-components';
 import { I1353, I1941, I122 } from './demo-components/RemoteData';
@@ -160,6 +161,11 @@ render(
         <I122 />
       </li>
     </ol>
+    <h1>
+      Table with custom numbers of pages around current page in stepped
+      navigation
+    </h1>
+    <TableWithNumberOfPagesAround />
     <h1>Fixed Column with Row Edits</h1>
     <FixedColumnWithEdit />
   </div>,