From 0203362697aed7ca2683aceb9788ccb0371d5b6d Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Sun, 6 Feb 2022 16:52:37 +0330 Subject: [PATCH] added filter and sort --- package-lock.json | 18 +++ package.json | 1 + src/components/ReactTable3/BasicTable.js | 113 +++++++++++++------ src/components/ReactTable3/FilteringTable.js | 99 ++++++++++++++++ src/components/ReactTable3/GlobalFilter.js | 15 +++ src/components/ReactTable3/MOCK_DATA.json | 45 ++++++-- src/components/ReactTable3/SortingTable.js | 88 +++++++++++++++ src/components/ReactTable3/columns.js | 19 ++-- yarn.lock | 5 + 9 files changed, 351 insertions(+), 52 deletions(-) create mode 100644 src/components/ReactTable3/FilteringTable.js create mode 100644 src/components/ReactTable3/GlobalFilter.js create mode 100644 src/components/ReactTable3/SortingTable.js diff --git a/package-lock.json b/package-lock.json index ad52b11..8616f1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index a2057b3..896b89d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/ReactTable3/BasicTable.js b/src/components/ReactTable3/BasicTable.js index f922c17..4f23a03 100644 --- a/src/components/ReactTable3/BasicTable.js +++ b/src/components/ReactTable3/BasicTable.js @@ -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 ( - - - - - {headerGroups.map((headerGroup) => ( - - {headerGroup.headers.map((column) => ( - - ))} - - ))} - - - - {rows.map((row) => { - prepareRow(row) - return( - - {row.cells.map((cell) => { - return - })} - - ) - })} - - -
- {column.render('Header')} -
- {cell.render('Cell')} -
+ + <> + + + + + + + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column) => ( + + ))} + + ))} + + + + {rows.map((row) => { + prepareRow(row) + return( + + {row.cells.map((cell) => { + return + })} + + ) + })} + + + + { + footerGroups.map(footerGroup => ( + + { + footerGroup.headers.map(column => ( + + )) + } + + )) + } + + +
+ {column.render('Header')} + + {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''} + +
+ {cell.render('Cell')} +
+ { + column.render('Footer') + } +
+ + + ) }; diff --git a/src/components/ReactTable3/FilteringTable.js b/src/components/ReactTable3/FilteringTable.js new file mode 100644 index 0000000..ee56610 --- /dev/null +++ b/src/components/ReactTable3/FilteringTable.js @@ -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 ( + + <> + + + + + + + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column) => ( + + ))} + + ))} + + + + {rows.map((row) => { + prepareRow(row) + return( + + {row.cells.map((cell) => { + return + })} + + ) + })} + + + + { + footerGroups.map(footerGroup => ( + + { + footerGroup.headers.map(column => ( + + )) + } + + )) + } + + +
+ {column.render('Header')} + + {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''} + +
+ {cell.render('Cell')} +
+ { + column.render('Footer') + } +
+ + + + ) + +}; + +export default FilteringTable; diff --git a/src/components/ReactTable3/GlobalFilter.js b/src/components/ReactTable3/GlobalFilter.js new file mode 100644 index 0000000..b528288 --- /dev/null +++ b/src/components/ReactTable3/GlobalFilter.js @@ -0,0 +1,15 @@ +import React from 'react'; + +export const GlobalFilter = ({ filter, setFilter }) => { + return ( + + + + Search: {''} + + setFilter(e.target.value)} /> + + + + ); +}; diff --git a/src/components/ReactTable3/MOCK_DATA.json b/src/components/ReactTable3/MOCK_DATA.json index 995650d..133d6d0 100644 --- a/src/components/ReactTable3/MOCK_DATA.json +++ b/src/components/ReactTable3/MOCK_DATA.json @@ -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, diff --git a/src/components/ReactTable3/SortingTable.js b/src/components/ReactTable3/SortingTable.js new file mode 100644 index 0000000..6d712bc --- /dev/null +++ b/src/components/ReactTable3/SortingTable.js @@ -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 ( + + + + + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column) => ( + + ))} + + ))} + + + + {rows.map((row) => { + prepareRow(row) + return( + + {row.cells.map((cell) => { + return + })} + + ) + })} + + + + { + footerGroups.map(footerGroup => ( + + { + footerGroup.headers.map(column => ( + + )) + } + + )) + } + + +
+ {column.render('Header')} + + {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''} + +
+ {cell.render('Cell')} +
+ { + column.render('Footer') + } +
+ ) + +}; + +export default SortingTable; diff --git a/src/components/ReactTable3/columns.js b/src/components/ReactTable3/columns.js index 8f889e2..2712cba 100644 --- a/src/components/ReactTable3/columns.js +++ b/src/components/ReactTable3/columns.js @@ -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, }, ] \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index b7237fc..b9850e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"