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) => ( + + ))} + + ))} + + + + {rows.map((row) => { + prepareRow(row) + return( + + {row.cells.map((cell) => { + return + })} + + ) + })} + + + 2 ? 'hidden' : 'block'}`} > + { + footerGroups.map(footerGroup => ( + + { + footerGroup.headers.map(column => ( + + )) + } + + )) + } + + +
+ {column.render('Header')} + + {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''} + + {/*
+ {column.canFilter ? column.render('Filter') : null } +
*/} +
+ {cell.render('Cell')} +
+ { + 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: 'شماره سفارش',