diff --git a/src/components/ReactTable3/BasicTable.js b/src/components/ReactTable3/BasicTable.js
index 4f23a03..4ada758 100644
--- a/src/components/ReactTable3/BasicTable.js
+++ b/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) => (
{headerGroup.headers.map((column) => (
-
+ |
{column.render('Header')}
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
+ {/*
+ {column.canFilter ? column.render('Filter') : null }
+ */}
|
))}
@@ -54,7 +72,19 @@ const BasicTable = () => {
- {rows.map((row) => {
+ {/* {rows.map((row) => {
+ prepareRow(row)
+ return(
+
+ {row.cells.map((cell) => {
+ return
+ {cell.render('Cell')}
+ |
+ })}
+
+ )
+ })} */}
+ {page.map((row) => {
prepareRow(row)
return(
@@ -68,7 +98,7 @@ const BasicTable = () => {
})}
-
+ 10 ? 'w-full' : 'hidden'}`} >
{
footerGroups.map(footerGroup => (
@@ -88,6 +118,42 @@ const BasicTable = () => {
+
+
+
+
+ Page{' '}
+
+
+ {pageIndex + 1} of {pageOptions.length}
+ {''}
+
+
+
+
+
+ | Go to Page: {' '}
+
+ {
+ const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0
+ gotoPage(pageNumber)
+ } }
+ style={{ width: '50px' }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
>
)
diff --git a/src/components/ReactTable3/ColumnFilter.js b/src/components/ReactTable3/ColumnFilter.js
new file mode 100644
index 0000000..f70108e
--- /dev/null
+++ b/src/components/ReactTable3/ColumnFilter.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const ColumnFilter = ({ column }) => {
+
+ const { filterValue, setFilter } = column
+
+ return (
+
+
+
+ Search: {''}
+
+ setFilter(e.target.value)} />
+
+
+
+ );
+};
diff --git a/src/components/ReactTable3/GlobalFilter.js b/src/components/ReactTable3/GlobalFilter.js
index b528288..04ebf3f 100644
--- a/src/components/ReactTable3/GlobalFilter.js
+++ b/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 (
- Search: {''}
+ جستجو:
+
+ {/* setFilter(e.target.value)} /> */}
- setFilter(e.target.value)} />
+ {
+ setValue(e.target.value)
+ onChange(e.target.value)
+ }}
+ />
diff --git a/src/components/ReactTable3/MOCK_DATA.json b/src/components/ReactTable3/MOCK_DATA.json
index 133d6d0..5333ec4 100644
--- a/src/components/ReactTable3/MOCK_DATA.json
+++ b/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",
diff --git a/src/components/ReactTable3/PaginationTable.js b/src/components/ReactTable3/PaginationTable.js
new file mode 100644
index 0000000..31c50fb
--- /dev/null
+++ b/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 (
+
+ <>
+
+
+
+
+
+
+ {headerGroups.map((headerGroup) => (
+
+ {headerGroup.headers.map((column) => (
+
+ {column.render('Header')}
+
+ {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
+
+ {/*
+ {column.canFilter ? column.render('Filter') : null }
+ */}
+ |
+ ))}
+
+ ))}
+
+
+
+ {rows.map((row) => {
+ prepareRow(row)
+ return(
+
+ {row.cells.map((cell) => {
+ return
+ {cell.render('Cell')}
+ |
+ })}
+
+ )
+ })}
+
+
+ 2 ? 'hidden' : 'block'}`} >
+ {
+ footerGroups.map(footerGroup => (
+
+ {
+ footerGroup.headers.map(column => (
+
+ {
+ column.render('Footer')
+ }
+ |
+ ))
+ }
+
+ ))
+ }
+
+
+
+
+ >
+
+ )
+
+};
+
+export default PaginationTable;
diff --git a/src/components/ReactTable3/columns.js b/src/components/ReactTable3/columns.js
index 2712cba..7d7cd46 100644
--- a/src/components/ReactTable3/columns.js
+++ b/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: 'شماره سفارش',