pagination added

src/components/ReactTable3/BasicTable.js

@@ -1,9 +1,13 @@
 import React, {useMemo} from 'react';
-import {useTable, useSortBy, useGlobalFilter} from 'react-table';
+
+import {useTable, useSortBy, useGlobalFilter, useFilters, usePagination} from 'react-table';
+
 import {COLUMNS} from './columns';
-import MOCK_DATA from './MOCK_DATA.json';
+
 import {GlobalFilter} from './GlobalFilter';
 
+import MOCK_DATA from './MOCK_DATA.json';
+
 const BasicTable = () => {
 
 
@@ -16,19 +20,30 @@ const BasicTable = () => {
         headerGroups,
         footerGroups,
         rows,
+        page,
+        nextPage,
+        previousPage,
+        canNextPage,
+        canPreviousPage,
+        pageOptions,
+        gotoPage,
+        pageCount,
         prepareRow,
         state,
         setGlobalFilter,
     } = useTable({
         columns,
         data,
+        // initialState: { pageIndex: 2 }
     },
+        useFilters,
         useGlobalFilter,
         useSortBy,
+        usePagination,
     )
 
 
-    const { globalFilter } = state
+    const { globalFilter, pageIndex } = state
 
     return (
 
@@ -42,11 +57,14 @@ const BasicTable = () => {
                     {headerGroups.map((headerGroup) => (
                     <tr {...headerGroup.getHeaderGroupProps()}>
                         {headerGroup.headers.map((column) => (
-                            <th {...column.getHeaderProps(column.getSortByToggleProps())} scope="col" className="px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}>
+                            <th {...column.getHeaderProps(column.getSortByToggleProps())} scope="col" className="cursor-pointer px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}>
                                 {column.render('Header')}
                                 <span>
                                     {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
                                 </span>
+                                {/* <div>
+                                    {column.canFilter ? column.render('Filter') : null }
+                                </div> */}
                             </th>
                         ))}
                     </tr>
@@ -54,7 +72,19 @@ const BasicTable = () => {
                 </thead>
 
                 <tbody {...getTableBodyProps()} className="bg-white divide-y divide-gray-200">
-                    {rows.map((row) => {
+                    {/* {rows.map((row) => {
+                        prepareRow(row)
+                        return(
+                            <tr {...row.getRowProps()}>
+                                {row.cells.map((cell) => {
+                                    return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}>
+                                        {cell.render('Cell')}
+                                    </td>
+                                })}
+                            </tr>
+                        )
+                    })} */}
+                    {page.map((row) => {
                         prepareRow(row)
                         return(
                             <tr {...row.getRowProps()}>
@@ -68,7 +98,7 @@ const BasicTable = () => {
                     })}
                 </tbody>
 
-                <tfoot className="bg-gray-300">
+                <tfoot className={`bg-gray-300 ${rows.length > 10 ? 'w-full' : 'hidden'}`} >
                     {
                         footerGroups.map(footerGroup => (
                             <tr {...footerGroup.getFooterGroupProps()}>
@@ -88,6 +118,42 @@ const BasicTable = () => {
 
             </table>
 
+            <div>
+
+                <span>
+
+                    Page{' '}
+
+                    <strong>
+                        {pageIndex + 1} of {pageOptions.length}
+                    </strong>{''}
+
+                </span>
+
+                <span>
+
+                    | Go to Page: {' '}
+
+                    <input type='number'
+                        defaultValue={ pageIndex + 1 }
+                        onChange={ (e) => {
+                            const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0
+                            gotoPage(pageNumber) 
+                    } } 
+                    style={{ width: '50px' }}
+                    />
+                    
+                </span>
+
+                <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}> { '<<' } </button>
+
+                <button className="bg-blue-400 m-2 rounded text-white p-2" onClick={() => previousPage() } disabled={!canPreviousPage} >Previous</button>
+                <button className="bg-blue-400 m-2 rounded text-white p-2" onClick={() => nextPage() } disabled={!canNextPage}>Next</button>
+
+                <button onClick={() => gotoPage( pageCount - 1 )} disabled={!canNextPage}> { '>>' } </button>
+
+            </div>
+
         </>
 
     )

src/components/ReactTable3/ColumnFilter.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const ColumnFilter = ({ column }) => {
+
+    const { filterValue, setFilter } = column 
+
+    return (
+        
+        <span>
+
+            Search: {''}
+
+            <input value={filterValue || '' }
+            onChange={(e) => setFilter(e.target.value)} />
+
+        </span>
+        
+    );
+};

src/components/ReactTable3/GlobalFilter.js

@@ -1,13 +1,29 @@
-import React from 'react';
+import React, {useState} from 'react';
+import { useAsyncDebounce } from 'react-table';
 
 export const GlobalFilter = ({ filter, setFilter }) => {
+
+  const [value, setValue] = useState(filter);
+
+  const onChange = useAsyncDebounce(value => {
+    setFilter(value || undefined)
+  }, 1000)
+
   return (
       
     <span>
 
-        Search: {''}
+        جستجو:
+
+        {/* <input value={filter || '' } onChange={(e) => setFilter(e.target.value)} /> */}
 
-        <input value={filter || '' } onChange={(e) => setFilter(e.target.value)} />
+        <input
+          value={value || ''}
+          onChange={(e) => {
+            setValue(e.target.value)
+            onChange(e.target.value)
+          }}
+         />
 
     </span>
     

src/components/ReactTable3/MOCK_DATA.json

@@ -44,6 +44,150 @@
       "order-status": 1,
       "order-level": 2
     },
+    {
+      "name": "کیس استوک",
+      "order-date": "1396/09/22",
+      "order-price": 75,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "مایکروویر سامسونگ مدل 2",
+      "order-date": "1399/09/25",
+      "order-price": 26,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "مایکروویر سامسونگ مدل 2",
+      "order-date": "1399/09/25",
+      "order-price": 26,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "مایکروویر سامسونگ مدل 3",
+      "order-date": "1399/09/22",
+      "order-price": 44,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "لپ تاپ مک بوک اپل",
+      "order-date": "1410/09/27",
+      "order-price": 73,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "تبلت اپل",
+      "order-date": "1375/09/25",
+      "order-price": 96,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "مایکروویر سامسونگ مدل 3",
+      "order-date": "1399/09/22",
+      "order-price": 44,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "لپ تاپ مک بوک اپل",
+      "order-date": "1410/09/27",
+      "order-price": 73,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "تبلت اپل",
+      "order-date": "1375/09/25",
+      "order-price": 96,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "کیس استوک",
+      "order-date": "1396/09/22",
+      "order-price": 75,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "مایکروویر سامسونگ مدل 1",
+      "order-date": "1399/09/27",
+      "order-price": 27,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "کیس استوک",
+      "order-date": "1396/09/22",
+      "order-price": 75,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "مایکروویر سامسونگ مدل 2",
+      "order-date": "1399/09/25",
+      "order-price": 26,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "مایکروویر سامسونگ مدل 3",
+      "order-date": "1399/09/22",
+      "order-price": 44,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "لپ تاپ مک بوک اپل",
+      "order-date": "1410/09/27",
+      "order-price": 73,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "تبلت اپل",
+      "order-date": "1375/09/25",
+      "order-price": 96,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
     {
       "name": "کیس استوک",
       "order-date": "1396/09/22",

src/components/ReactTable3/PaginationTable.js

@@ -0,0 +1,107 @@
+// not using
+
+import React, {useMemo} from 'react';
+
+import {useTable, useSortBy, useGlobalFilter, useFilters} from 'react-table';
+
+import {COLUMNS} from './columns';
+
+import {GlobalFilter} from './GlobalFilter';
+
+import MOCK_DATA from './MOCK_DATA.json';
+
+const PaginationTable = () => {
+
+
+    const columns = React.useMemo(() => COLUMNS, [])
+    const data = useMemo(() => MOCK_DATA,[])
+
+    const {
+        getTableProps,
+        getTableBodyProps,
+        headerGroups,
+        footerGroups,
+        rows,
+        prepareRow,
+        state,
+        setGlobalFilter,
+    } = useTable({
+        columns,
+        data,
+    },
+        useFilters,
+        useGlobalFilter,
+        useSortBy,
+    )
+
+
+    const { globalFilter } = state
+
+    return (
+
+        <>
+
+            <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
+
+            <table {...getTableProps()} className="min-w-full divide-y divide-gray-200">
+
+                <thead className="bg-gray-300">
+                    {headerGroups.map((headerGroup) => (
+                    <tr {...headerGroup.getHeaderGroupProps()}>
+                        {headerGroup.headers.map((column) => (
+                            <th {...column.getHeaderProps(column.getSortByToggleProps())} scope="col" className="cursor-pointer px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}>
+                                {column.render('Header')}
+                                <span>
+                                    {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
+                                </span>
+                                {/* <div>
+                                    {column.canFilter ? column.render('Filter') : null }
+                                </div> */}
+                            </th>
+                        ))}
+                    </tr>
+                    ))} 
+                </thead>
+
+                <tbody {...getTableBodyProps()} className="bg-white divide-y divide-gray-200">
+                    {rows.map((row) => {
+                        prepareRow(row)
+                        return(
+                            <tr {...row.getRowProps()}>
+                                {row.cells.map((cell) => {
+                                    return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}>
+                                        {cell.render('Cell')}
+                                    </td>
+                                })}
+                            </tr>
+                        )
+                    })}
+                </tbody>
+
+                <tfoot className={`bg-gray-300 ${headerGroup.headers.length > 2 ? 'hidden' : 'block'}`} >
+                    {
+                        footerGroups.map(footerGroup => (
+                            <tr {...footerGroup.getFooterGroupProps()}>
+                                {
+                                    footerGroup.headers.map(column => (
+                                        <td {...column.getFooterProps} className="px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}>
+                                            {
+                                                column.render('Footer')
+                                            }
+                                        </td>
+                                    ))
+                                }
+                            </tr>
+                        ))
+                    }
+                </tfoot>
+
+            </table>
+
+        </>
+
+    )
+
+};
+
+export default PaginationTable;

src/components/ReactTable3/columns.js

@@ -1,5 +1,7 @@
 import {format} from 'date-fns'
 
+import {ColumnFilter} from './ColumnFilter';
+
 export const COLUMNS = [
     {
         Header: 'نام و نام خانوادگی',
@@ -17,6 +19,7 @@ export const COLUMNS = [
         Header: 'مبلغ سفارش',
         Footer: 'مبلغ سفارش',
         accessor: 'order-price',
+        Filter: ColumnFilter
     },
     {
         Header: 'شماره سفارش',