pagination added

master
mahdi andalib 3 years ago
parent 0203362697
commit 8fd968cd1f
  1. 78
      src/components/ReactTable3/BasicTable.js
  2. 19
      src/components/ReactTable3/ColumnFilter.js
  3. 22
      src/components/ReactTable3/GlobalFilter.js
  4. 144
      src/components/ReactTable3/MOCK_DATA.json
  5. 107
      src/components/ReactTable3/PaginationTable.js
  6. 3
      src/components/ReactTable3/columns.js

@ -1,9 +1,13 @@
import React, {useMemo} from 'react'; 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 {COLUMNS} from './columns';
import MOCK_DATA from './MOCK_DATA.json';
import {GlobalFilter} from './GlobalFilter'; import {GlobalFilter} from './GlobalFilter';
import MOCK_DATA from './MOCK_DATA.json';
const BasicTable = () => { const BasicTable = () => {
@ -16,19 +20,30 @@ const BasicTable = () => {
headerGroups, headerGroups,
footerGroups, footerGroups,
rows, rows,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
prepareRow, prepareRow,
state, state,
setGlobalFilter, setGlobalFilter,
} = useTable({ } = useTable({
columns, columns,
data, data,
// initialState: { pageIndex: 2 }
}, },
useFilters,
useGlobalFilter, useGlobalFilter,
useSortBy, useSortBy,
usePagination,
) )
const { globalFilter } = state const { globalFilter, pageIndex } = state
return ( return (
@ -42,11 +57,14 @@ const BasicTable = () => {
{headerGroups.map((headerGroup) => ( {headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}> <tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => ( {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')} {column.render('Header')}
<span> <span>
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''} {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
</span> </span>
{/* <div>
{column.canFilter ? column.render('Filter') : null }
</div> */}
</th> </th>
))} ))}
</tr> </tr>
@ -54,7 +72,19 @@ const BasicTable = () => {
</thead> </thead>
<tbody {...getTableBodyProps()} className="bg-white divide-y divide-gray-200"> <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) prepareRow(row)
return( return(
<tr {...row.getRowProps()}> <tr {...row.getRowProps()}>
@ -68,7 +98,7 @@ const BasicTable = () => {
})} })}
</tbody> </tbody>
<tfoot className="bg-gray-300"> <tfoot className={`bg-gray-300 ${rows.length > 10 ? 'w-full' : 'hidden'}`} >
{ {
footerGroups.map(footerGroup => ( footerGroups.map(footerGroup => (
<tr {...footerGroup.getFooterGroupProps()}> <tr {...footerGroup.getFooterGroupProps()}>
@ -88,6 +118,42 @@ const BasicTable = () => {
</table> </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>
</> </>
) )

@ -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>
);
};

@ -1,13 +1,29 @@
import React from 'react'; import React, {useState} from 'react';
import { useAsyncDebounce } from 'react-table';
export const GlobalFilter = ({ filter, setFilter }) => { export const GlobalFilter = ({ filter, setFilter }) => {
const [value, setValue] = useState(filter);
const onChange = useAsyncDebounce(value => {
setFilter(value || undefined)
}, 1000)
return ( return (
<span> <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> </span>

@ -44,6 +44,150 @@
"order-status": 1, "order-status": 1,
"order-level": 2 "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": "کیس استوک", "name": "کیس استوک",
"order-date": "1396/09/22", "order-date": "1396/09/22",

@ -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;

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

Loading…
Cancel
Save