master
mahdi andalib 3 years ago
parent 446c9b7d81
commit 18f0207ba2
  1. 4
      src/App.js
  2. 56
      src/components/ReactTable3/BasicTable.js
  3. 29
      src/components/ReactTable3/MOCK_DATA.json
  4. 37
      src/components/ReactTable3/columns.js
  5. 30
      src/components/ReactTable3/index.js

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

@ -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;

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

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

@ -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;
Loading…
Cancel
Save