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) => ( + + ))} + + ))} + + + + {rows.map((row) => { + prepareRow(row) + return( + + {row.cells.map((cell) => { + return + })} + + ) + })} + + +
+ {column.render('Header')} +
+ {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; + + + + +