update

src/App.js

@@ -42,6 +42,7 @@ import Design1 from "./components/ProductSalesAmount/Design1";
 import Design2 from "./components/ProductSalesAmount/Design2";
 import TableDesign1 from "./components/Table/Design1";
 import ReactTable2 from "./components/ReactTable2";
+import ReactTable3 from "./components/ReactTable3";
 
 import Switch from "./components/Switch";
 
@@ -70,7 +71,7 @@ function App() {
         {/* <Design2D /> */}
         {/* <Features /> */}
         {/* <Feedback /> */}
-        <Alert />
+        {/* <Alert /> */}
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
@@ -88,6 +89,7 @@ function App() {
         {/* <Design2 /> */}
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
+        <ReactTable3 />
       </div>
     </Provider>
   );

src/components/ReactTable3/BasicTable.js

@@ -0,0 +1,56 @@
+import React, {useMemo} from 'react';
+import {useTable} from 'react-table';
+import {COLUMNS} from './columns';
+import MOCK_DATA from './MOCK_DATA.json';
+
+
+const BasicTable = () => {
+
+
+    const columns = React.useMemo(() => COLUMNS, [])
+    const data = useMemo(() => MOCK_DATA,[])
+
+   const tableInstance = useTable({
+        columns,
+        data,
+    })
+
+    const { getTableProps, getTableBodyProps,headerGroups,rows,prepareRow, } = tableInstance
+
+    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()} scope="col" className="px-6 py-3 text-right text-xs" style={{color: '#3287B9'}}>
+                            {column.render('Header')}
+                        </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-6 py-4 whitespace-nowrap" role="cell">
+                                    {cell.render('Cell')}
+                                </td>
+                            })}
+                        </tr>
+                    )
+                })}
+            </tbody>
+
+        </table>
+    )
+
+};
+
+export default BasicTable;

src/components/ReactTable3/MOCK_DATA.json

@@ -0,0 +1,29 @@
+ [
+    {
+      "name": "1مایکروویر سامسونگ مدل",
+      "order-date": "1399/09/21",
+      "order-price": 20,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "1مایکروویر سامسونگ مدل",
+      "order-date": "1399/09/21",
+      "order-price": 20,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    },
+    {
+      "name": "1مایکروویر سامسونگ مدل",
+      "order-date": "1399/09/21",
+      "order-price": 20,
+      "order-number": "09120023100",
+      "user-job": "مهندس ساختمان",
+      "order-status": 1,
+      "order-level": 2
+    }
+  ]

src/components/ReactTable3/columns.js

@@ -0,0 +1,37 @@
+export const COLUMNS = [
+    {
+        Header: 'نام و نام خانوادگی',
+        accessor: 'name',
+
+    },
+    {
+        Header: 'تاریخ سفارش',
+        accessor: 'order-date',
+
+    },
+    {
+        Header: 'مبلغ سفارش',
+        accessor: 'order-price',
+
+    },
+    {
+        Header: 'شماره سفارش',
+        accessor: 'order-number',
+
+    },
+    {
+        Header: 'شغل کاربر',
+        accessor: 'user-job',
+
+    },
+    {
+        Header: 'وضعیت سفارش',
+        accessor: 'order-status',
+
+    },
+    {
+        Header: 'سطح اهمیت',
+        accessor: 'order-level',
+
+    },
+]

src/components/ReactTable3/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import BasicTable from './BasicTable';
+
+const ReactTable3 = () => {
+  return (
+    <div className="min-h-screen ">
+      <main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-4">
+        <div className="my-4 flex flex-col">
+          <div className="-my-2 overflow-x-auto -mx-4 sm:-mx-6 lg:-mx-8">
+            <div className="py-2 align-middle inline-block min-w-full">
+              <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+
+                <BasicTable />
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+
+)
+};
+
+export default ReactTable3;
+
+
+
+
+