mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

pagination added

Browse Source
master
mahdi andalib 3 years ago
parent 0203362697
commit 8fd968cd1f
6 changed files with 364 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

78
src/components/ReactTable3/BasicTable.js
Unescape View File

@ -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>
</>
)

19
src/components/ReactTable3/ColumnFilter.js
Unescape View File

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

22
src/components/ReactTable3/GlobalFilter.js
Unescape View File

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

144
src/components/ReactTable3/MOCK_DATA.json
Unescape View File

@ -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",

107
src/components/ReactTable3/PaginationTable.js
Unescape View File

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

3
src/components/ReactTable3/columns.js
Unescape View File

@ -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: 'شماره سفارش',

Write Preview
Loading…
Cancel
Save