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

added filter and sort

Browse Source
master
mahdi andalib 3 years ago
parent 18f0207ba2
commit 0203362697
9 changed files with 351 additions and 52 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. 18
      package-lock.json
  2. 1
      package.json
  3. 107
      src/components/ReactTable3/BasicTable.js
  4. 99
      src/components/ReactTable3/FilteringTable.js
  5. 15
      src/components/ReactTable3/GlobalFilter.js
  6. 45
      src/components/ReactTable3/MOCK_DATA.json
  7. 88
      src/components/ReactTable3/SortingTable.js
  8. 19
      src/components/ReactTable3/columns.js
  9. 5
      yarn.lock

18
package-lock.json generated
Unescape View File

@ -17,6 +17,7 @@
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@themesberg/flowbite": "^1.3.0",
"date-fns": "^2.28.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
@ -6141,6 +6142,18 @@
"node": ">=10"
}
},
"node_modules/date-fns": {
"version": "2.28.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
"integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": {
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@ -21318,6 +21331,11 @@
"whatwg-url": "^8.0.0"
}
},
"date-fns": {
"version": "2.28.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
"integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
},
"debug": {
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",

1
package.json
Unescape View File

@ -12,6 +12,7 @@
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@themesberg/flowbite": "^1.3.0",
"date-fns": "^2.28.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",

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

@ -1,8 +1,8 @@
import React, {useMemo} from 'react';
import {useTable} from 'react-table';
import {useTable, useSortBy, useGlobalFilter} from 'react-table';
import {COLUMNS} from './columns';
import MOCK_DATA from './MOCK_DATA.json';
import {GlobalFilter} from './GlobalFilter';
const BasicTable = () => {
@ -10,45 +10,86 @@ const BasicTable = () => {
const columns = React.useMemo(() => COLUMNS, [])
const data = useMemo(() => MOCK_DATA,[])
const tableInstance = useTable({
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow,
state,
setGlobalFilter,
} = useTable({
columns,
data,
})
},
useGlobalFilter,
useSortBy,
)
const { getTableProps, getTableBodyProps,headerGroups,rows,prepareRow, } = tableInstance
const { globalFilter } = state
return (
<table {...getTableProps()} className="min-w-full divide-y divide-gray-200">
<>
<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()} scope="col" className="px-6 py-3 text-right text-xs" style={{color: '#3287B9'}}>
{column.render('Header')}
</th>
<thead className="bg-gray-300">
{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'}}>
{column.render('Header')}
<span>
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
</span>
</th>
))}
</tr>
))}
</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-6 py-4 whitespace-nowrap" role="cell">
{cell.render('Cell')}
</td>
})}
</tr>
)
})}
</tbody>
</table>
</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">
{
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>
</>
)
};

99
src/components/ReactTable3/FilteringTable.js
Unescape View File

@ -0,0 +1,99 @@
// not using
import React, {useMemo} from 'react';
import {useTable, useSortBy, useGlobalFilter} from 'react-table';
import {COLUMNS} from './columns';
import MOCK_DATA from './MOCK_DATA.json';
const FilteringTable = () => {
const columns = React.useMemo(() => COLUMNS, [])
const data = useMemo(() => MOCK_DATA,[])
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow,
state,
setGlobalFilter,
} = useTable({
columns,
data,
},
useSortBy,
useGlobalFilter
)
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="px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}>
{column.render('Header')}
<span>
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
</span>
</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">
{
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 FilteringTable;

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

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

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

@ -1,26 +1,53 @@
[
{
"name": "1مایکروویر سامسونگ مدل",
"order-date": "1399/09/21",
"order-price": 20,
"name": "مایکروویر سامسونگ مدل 1",
"order-date": "1399/09/27",
"order-price": 27,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "1مایکروویر سامسونگ مدل",
"order-date": "1399/09/21",
"order-price": 20,
"name": "مایکروویر سامسونگ مدل 2",
"order-date": "1399/09/25",
"order-price": 26,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 2
},
{
"name": "1مایکروویر سامسونگ مدل",
"order-date": "1399/09/21",
"order-price": 20,
"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,

88
src/components/ReactTable3/SortingTable.js
Unescape View File

@ -0,0 +1,88 @@
// not using
import React, {useMemo} from 'react';
import {useTable, useSortBy} from 'react-table';
import {COLUMNS} from './columns';
import MOCK_DATA from './MOCK_DATA.json';
const SortingTable = () => {
const columns = React.useMemo(() => COLUMNS, [])
const data = useMemo(() => MOCK_DATA,[])
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow,
} = useTable({
columns,
data,
},
useSortBy
)
return (
<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="px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}>
{column.render('Header')}
<span>
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
</span>
</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">
{
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 SortingTable;

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

@ -1,37 +1,42 @@
import {format} from 'date-fns'
export const COLUMNS = [
{
Header: 'نام و نام خانوادگی',
Footer: 'نام و نام خانوادگی',
accessor: 'name',
disableSortBy: true,
},
{
Header: 'تاریخ سفارش',
Footer: 'تاریخ سفارش',
accessor: 'order-date',
Cell: ({ value }) => { return format(new Date (value), 'dd/MM/yyyy') }
},
{
Header: 'مبلغ سفارش',
Footer: 'مبلغ سفارش',
accessor: 'order-price',
},
{
Header: 'شماره سفارش',
Footer: 'شماره سفارش',
accessor: 'order-number',
},
{
Header: 'شغل کاربر',
Footer: 'شغل کاربر',
accessor: 'user-job',
},
{
Header: 'وضعیت سفارش',
Footer: 'وضعیت سفارش',
accessor: 'order-status',
},
{
Header: 'سطح اهمیت',
Footer: 'سطح اهمیت',
accessor: 'order-level',
disableSortBy: true,
},
]

5
yarn.lock
Unescape View File

@ -3567,6 +3567,11 @@
"whatwg-mimetype" "^2.3.0"
"whatwg-url" "^8.0.0"
"date-fns@^2.28.0":
"integrity" "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
"resolved" "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz"
"version" "2.28.0"
"debug@^2.6.0":
"integrity" "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="
"resolved" "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"

Write Preview
Loading…
Cancel
Save