diff --git a/src/App.js b/src/App.js
index 665a927..03f6f75 100644
--- a/src/App.js
+++ b/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() {
{/* */}
{/* */}
{/* */}
-
+ {/* */}
{/* */}
{/* */}
{/* */}
@@ -88,6 +89,7 @@ function App() {
{/* */}
{/* */}
{/* */}
+
);
diff --git a/src/components/ReactTable3/BasicTable.js b/src/components/ReactTable3/BasicTable.js
new file mode 100644
index 0000000..f922c17
--- /dev/null
+++ b/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 (
+
+
+
+
+ {headerGroups.map((headerGroup) => (
+
+ {headerGroup.headers.map((column) => (
+
+ {column.render('Header')}
+ |
+ ))}
+
+ ))}
+
+
+
+ {rows.map((row) => {
+ prepareRow(row)
+ return(
+
+ {row.cells.map((cell) => {
+ return
+ {cell.render('Cell')}
+ |
+ })}
+
+ )
+ })}
+
+
+
+ )
+
+};
+
+export default BasicTable;
diff --git a/src/components/ReactTable3/MOCK_DATA.json b/src/components/ReactTable3/MOCK_DATA.json
new file mode 100644
index 0000000..995650d
--- /dev/null
+++ b/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
+ }
+ ]
diff --git a/src/components/ReactTable3/columns.js b/src/components/ReactTable3/columns.js
new file mode 100644
index 0000000..8f889e2
--- /dev/null
+++ b/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',
+
+ },
+]
\ No newline at end of file
diff --git a/src/components/ReactTable3/index.js b/src/components/ReactTable3/index.js
new file mode 100644
index 0000000..1207b32
--- /dev/null
+++ b/src/components/ReactTable3/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import BasicTable from './BasicTable';
+
+const ReactTable3 = () => {
+ return (
+
+
+)
+};
+
+export default ReactTable3;
+
+
+
+
+