feat(Add Pagination): Add Optional Pagination Option

README.md

@@ -1,14 +1,19 @@
 # React Final Table <!-- omit in toc -->
 
-![CI](https://github.com/Buuntu/react-final-table/workflows/tests/badge.svg) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) [![codecov](https://codecov.io/gh/Buuntu/react-final-table/branch/master/graph/badge.svg)](https://codecov.io/gh/Buuntu/react-final-table) ![minzipped-size](https://img.shields.io/bundlephobia/minzip/react-final-table) ![release](https://img.shields.io/npm/v/react-final-table) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+![CI](https://github.com/Buuntu/react-final-table/workflows/tests/badge.svg)
+[![License:
+MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
+[![codecov](https://codecov.io/gh/Buuntu/react-final-table/branch/master/graph/badge.svg)](https://codecov.io/gh/Buuntu/react-final-table)
+![minzipped-size](https://img.shields.io/bundlephobia/minzip/react-final-table)
+![release](https://img.shields.io/npm/v/react-final-table)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
 A [headless UI component
 libray](https://www.merrickchristensen.com/articles/headless-user-interface-components/)
 for managing complex table state in React.
 
-Inspired by
-[react-table](https://github.com/tannerlinsley/react-table) but with Typescript
-support built in and a simpler API.
+Inspired by [react-table](https://github.com/tannerlinsley/react-table) but with
+Typescript support built in and a simpler API.
 
 ## Features
 
@@ -32,16 +37,17 @@ support built in and a simpler API.
   - [Basic example](#basic-example)
   - [Searching](#searching)
   - [Row Selection](#row-selection)
+  - [Pagination](#pagination)
 - [Performance](#performance)
 - [Contributing](#contributing)
 
 ## Motivation
 
-While there is an abundance of table libraries out there to help with sorting, filtering, pagination, and more, most are opinionated
-about the user interface. Opinionated UIs can seem nice at first, but they
-quickly become limiting. To embrace the Unix philosphy of separation of
-concerns, the interface should be separate from the engine (from [The Art of
-Unix
+While there is an abundance of table libraries out there to help with sorting,
+filtering, pagination, and more, most are opinionated about the user interface.
+Opinionated UIs can seem nice at first, but they quickly become limiting. To
+embrace the Unix philosphy of separation of concerns, the interface should be
+separate from the engine (from [The Art of Unix
 Programming](https://www.goodreads.com/book/show/104745.The_Art_of_UNIX_Programming)).
 
 This is a minimal, type-safe, headless UI component library that you can plugin
@@ -71,7 +77,9 @@ any table functionality. Only `columns` and `rows` are required as arguments:
 const { headers, rows } = useTable(columns, rows);
 ```
 
-1. `columns`: The first argument is an array of columns of type ColumnType. Only the name of each column is required. Each column has the following type signature:
+1. `columns`: The first argument is an array of columns of type ColumnType. Only
+   the name of each column is required. Each column has the following type
+   signature:
 
 ```typescript
 type ColumnType<T> = {
@@ -84,7 +92,8 @@ type ColumnType<T> = {
 };
 ```
 
-2. `rows`: Rows is the second argument to useTable and can be an array of any _object_ type.
+2. `rows`: Rows is the second argument to useTable and can be an array of any
+   _object_ type.
 
 ## Examples
 
@@ -233,8 +242,57 @@ function App() {
     </>
   );
 }
+```
+
+### Pagination
+
+```jsx
+export const App: FC = () => {
+  const memoColumns = useMemo(() => columns, []);
+  const memoData = useMemo(() => data, []);
 
-export default App;
+  const { headers, rows, pagination } = useTable<{
+    firstName: string;
+    lastName: string;
+  }>(memoColumns, memoData, { pagination: true });
+
+  return (
+    <>
+      <table>
+        <thead>
+          <tr>
+            {headers.map((header, idx) => (
+              <th key={idx}>{header.render()}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, idx) => (
+            <tr key={idx}>
+              {row.cells.map((cell, idx) => (
+                <td key={idx}>{cell.render()}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div>
+        <button
+          disabled={pagination.canPrev}
+          onClick={() => pagination.prevPage()}
+        >
+          {'<'}
+        </button>
+        <button
+          disabled={pagination.canNext}
+          onClick={() => pagination.nextPage()}
+        >
+          {'>'}
+        </button>
+      </div>
+    </>
+  );
+}
 ```
 
 ## Performance