docs: add min and max in pagination "number" input. (#5321)

TanStack · Aug 3, 2024 · 2fea8c2 · 2fea8c2
1 parent 9370c9e
commit 2fea8c2
Show file tree

Hide file tree

Showing 11 changed files with 22 additions and 0 deletions.
diff --git a/examples/react/editable-data/src/main.tsx b/examples/react/editable-data/src/main.tsx
@@ -246,6 +246,8 @@ function App() {
           | Go to page:
           <input
             type="number"
+            min="1"
+            max={table.getPageCount()}
             defaultValue={table.getState().pagination.pageIndex + 1}
             onChange={e => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0

diff --git a/examples/react/expanding/src/main.tsx b/examples/react/expanding/src/main.tsx
@@ -221,6 +221,8 @@ function App() {
           | Go to page:
           <input
             type="number"
+            min="1"
+            max={table.getPageCount()}
             defaultValue={table.getState().pagination.pageIndex + 1}
             onChange={e => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0

diff --git a/examples/react/filters/src/main.tsx b/examples/react/filters/src/main.tsx
@@ -203,6 +203,8 @@ function App() {
           | Go to page:
           <input
             type="number"
+            min="1"
+            max={table.getPageCount()}
             defaultValue={table.getState().pagination.pageIndex + 1}
             onChange={e => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0

diff --git a/examples/react/full-width-table/src/main.tsx b/examples/react/full-width-table/src/main.tsx
@@ -171,6 +171,8 @@ function App() {
             | Go to page:
             <input
               type="number"
+              min="1"
+              max={table.getPageCount()}
               defaultValue={table.getState().pagination.pageIndex + 1}
               onChange={e => {
                 const page = e.target.value ? Number(e.target.value) - 1 : 0

diff --git a/examples/react/fully-controlled/src/main.tsx b/examples/react/fully-controlled/src/main.tsx
@@ -194,6 +194,8 @@ function App() {
           | Go to page:
           <input
             type="number"
+            min="1"
+            max={table.getPageCount()}
             defaultValue={table.getState().pagination.pageIndex + 1}
             onChange={e => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0

diff --git a/examples/react/grouping/src/main.tsx b/examples/react/grouping/src/main.tsx
@@ -246,6 +246,8 @@ function App() {
           | Go to page:
           <input
             type="number"
+            min="1"
+            max={table.getPageCount()}
             defaultValue={table.getState().pagination.pageIndex + 1}
             onChange={e => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0

diff --git a/examples/react/kitchen-sink/src/components/ActionButtons.tsx b/examples/react/kitchen-sink/src/components/ActionButtons.tsx
@@ -75,6 +75,8 @@ export function ActionButtons<T extends RowData>({
           | Go to page:
           <input
             type="number"
+            min="1"
+            max={table.getPageCount()}
             defaultValue={pageIndex + 1}
             onChange={e => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0

diff --git a/examples/react/pagination-controlled/src/main.tsx b/examples/react/pagination-controlled/src/main.tsx
@@ -194,6 +194,8 @@ function App() {
           | Go to page:
           <input
             type="number"
+            min="1"
+            max={table.getPageCount()}
             defaultValue={table.getState().pagination.pageIndex + 1}
             onChange={e => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0

diff --git a/examples/react/pagination/src/main.tsx b/examples/react/pagination/src/main.tsx
@@ -207,6 +207,8 @@ function MyTable({
           | Go to page:
           <input
             type="number"
+            min="1"
+            max={table.getPageCount()}
             defaultValue={table.getState().pagination.pageIndex + 1}
             onChange={e => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0

diff --git a/examples/react/row-pinning/src/main.tsx b/examples/react/row-pinning/src/main.tsx
@@ -262,6 +262,8 @@ function App() {
           | Go to page:
           <input
             type="number"
+            min="1"
+            max={table.getPageCount()}
             defaultValue={table.getState().pagination.pageIndex + 1}
             onChange={e => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0

diff --git a/examples/react/row-selection/src/main.tsx b/examples/react/row-selection/src/main.tsx
@@ -230,6 +230,8 @@ function App() {
           | Go to page:
           <input
             type="number"
+            min="1"
+            max={table.getPageCount()}
             defaultValue={table.getState().pagination.pageIndex + 1}
             onChange={e => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0