added filter and sort

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

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

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 (
 
-        <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">
+                <thead className="bg-gray-300">
-                {headerGroups.map((headerGroup) => (
+                    {headerGroups.map((headerGroup) => (
-                <tr {...headerGroup.getHeaderGroupProps()}>
+                    <tr {...headerGroup.getHeaderGroupProps()}>
-                    {headerGroup.headers.map((column) => (
+                        {headerGroup.headers.map((column) => (
-                        <th {...column.getHeaderProps()} scope="col" className="px-6 py-3 text-right text-xs" style={{color: '#3287B9'}}>
+                            <th {...column.getHeaderProps(column.getSortByToggleProps())} scope="col" className="px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}>
-                            {column.render('Header')}
+                                {column.render('Header')}
-                        </th>
+                                <span>
+                                    {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
+                                </span>
+                            </th>
+                        ))}
+                    </tr>
                     ))} 
-                </tr>
+                </thead>
-                ))} 
+
-            </thead>
+                <tbody {...getTableBodyProps()} className="bg-white divide-y divide-gray-200">
-
+                    {rows.map((row) => {
-            <tbody {...getTableBodyProps()} className="bg-white divide-y divide-gray-200">
+                        prepareRow(row)
-                {rows.map((row) => {
+                        return(
-                    prepareRow(row)
+                            <tr {...row.getRowProps()}>
-                    return(
+                                {row.cells.map((cell) => {
-                        <tr {...row.getRowProps()}>
+                                    return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}>
-                            {row.cells.map((cell) => {
+                                        {cell.render('Cell')}
-                                return <td {...cell.getCellProps()} className="px-6 py-4 whitespace-nowrap" role="cell">
+                                    </td>
-                                    {cell.render('Cell')}
+                                })}
-                                </td>
+                            </tr>
-                            })}
+                        )
-                        </tr>
+                    })}
-                    )
+                </tbody>
-                })}
+
-            </tbody>
+                <tfoot className="bg-gray-300">
-
+                    {
-        </table>
+                        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>
+
+        </>
+
     )
 
 };

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 (
+
+        <>
+
+            <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;

src/components/ReactTable3/GlobalFilter.js

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

src/components/ReactTable3/MOCK_DATA.json

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

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 (
+        
+        <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;

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,
     },
 ]

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"