diff --git a/src/components/ReactTable3/BasicTable.js b/src/components/ReactTable3/BasicTable.js index 21db47c..08bafd1 100644 --- a/src/components/ReactTable3/BasicTable.js +++ b/src/components/ReactTable3/BasicTable.js @@ -18,6 +18,69 @@ import { Checkbox } from "./Checkbox"; import MOCK_DATA from "./MOCK_DATA.json"; +export function StatusPill({ value }) { + return ( +
| {column.render("Header")} @@ -207,7 +274,7 @@ const BasicTable = () => { return ( | @@ -221,7 +288,7 @@ const BasicTable = () => { |
|---|---|
| {column.render("Footer")} | @@ -238,8 +305,7 @@ const BasicTable = () => { ))}
+ {/*
{JSON.stringify(
{
@@ -249,24 +315,36 @@ const BasicTable = () => {
2
)}
-
-
-
-
- Page{" "}
-
- {pageIndex + 1} of {pageOptions.length}
+ */}
+
+
+ صفحه{" "}
+
+ {pageIndex + 1} از {pageOptions.length}
{""}
diff --git a/src/components/ReactTable3/MOCK_DATA.json b/src/components/ReactTable3/MOCK_DATA.json
index 5333ec4..bc21815 100644
--- a/src/components/ReactTable3/MOCK_DATA.json
+++ b/src/components/ReactTable3/MOCK_DATA.json
@@ -1,200 +1,47 @@
- [
- {
- "name": "مایکروویر سامسونگ مدل 1",
- "order-date": "1399/09/27",
- "order-price": 27,
- "order-number": "09120023100",
- "user-job": "مهندس ساختمان",
- "order-status": 1,
- "order-level": 2
- },
- {
- "name": "مایکروویر سامسونگ مدل 2",
- "order-date": "1399/09/25",
- "order-price": 26,
- "order-number": "09120023100",
- "user-job": "مهندس ساختمان",
- "order-status": 1,
- "order-level": 2
- },
- {
- "name": "مایکروویر سامسونگ مدل 3",
- "order-date": "1399/09/22",
- "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,
- "order-level": 2
- },
- {
- "name": "مایکروویر سامسونگ مدل 2",
- "order-date": "1399/09/25",
- "order-price": 26,
- "order-number": "09120023100",
- "user-job": "مهندس ساختمان",
- "order-status": 1,
- "order-level": 2
- },
- {
- "name": "مایکروویر سامسونگ مدل 2",
- "order-date": "1399/09/25",
- "order-price": 26,
- "order-number": "09120023100",
- "user-job": "مهندس ساختمان",
- "order-status": 1,
- "order-level": 2
- },
- {
- "name": "مایکروویر سامسونگ مدل 3",
- "order-date": "1399/09/22",
- "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": "مایکروویر سامسونگ مدل 3",
- "order-date": "1399/09/22",
- "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,
- "order-level": 2
- },
- {
- "name": "مایکروویر سامسونگ مدل 1",
- "order-date": "1399/09/27",
- "order-price": 27,
- "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,
- "order-level": 2
- },
- {
- "name": "مایکروویر سامسونگ مدل 2",
- "order-date": "1399/09/25",
- "order-price": 26,
- "order-number": "09120023100",
- "user-job": "مهندس ساختمان",
- "order-status": 1,
- "order-level": 2
- },
- {
- "name": "مایکروویر سامسونگ مدل 3",
- "order-date": "1399/09/22",
- "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,
- "order-level": 2
- }
- ]
+[
+ {
+ "name": "مایکروویر سامسونگ مدل 1",
+ "order-date": "1399/09/27",
+ "order-price": 27,
+ "order-number": "09120023100",
+ "user-job": "مهندس ساختمان",
+ "order-status": 1,
+ "order-level": 2
+ },
+ {
+ "name": "مایکروویر سامسونگ مدل 2",
+ "order-date": "1399/09/25",
+ "order-price": 26,
+ "order-number": "09120023100",
+ "user-job": "مهندس ساختمان",
+ "order-status": 2,
+ "order-level": 2
+ },
+ {
+ "name": "مایکروویر سامسونگ مدل 3",
+ "order-date": "1399/09/22",
+ "order-price": 44,
+ "order-number": "09120023100",
+ "user-job": "مهندس ساختمان",
+ "order-status": 3,
+ "order-level": 2
+ },
+ {
+ "name": "لپ تاپ مک بوک اپل",
+ "order-date": "1410/09/27",
+ "order-price": 73,
+ "order-number": "09120023100",
+ "user-job": "مهندس ساختمان",
+ "order-status": 4,
+ "order-level": 2
+ },
+ {
+ "name": "تبلت اپل",
+ "order-date": "1375/09/25",
+ "order-price": 96,
+ "order-number": "09120023100",
+ "user-job": "مهندس ساختمان",
+ "order-status": 5,
+ "order-level": 2
+ }
+]
diff --git a/src/components/ReactTable3/columns.js b/src/components/ReactTable3/columns.js
index 7d7cd46..1e56c8e 100644
--- a/src/components/ReactTable3/columns.js
+++ b/src/components/ReactTable3/columns.js
@@ -1,45 +1,49 @@
-import {format} from 'date-fns'
+import { format } from "date-fns";
+import Table, { StatusPill } from "./BasicTable"; // new
-import {ColumnFilter} from './ColumnFilter';
+import { ColumnFilter } from "./ColumnFilter";
export const COLUMNS = [
- {
- Header: 'نام و نام خانوادگی',
- Footer: 'نام و نام خانوادگی',
- accessor: 'name',
- disableSortBy: true,
+ {
+ 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-date',
- Cell: ({ value }) => { return format(new Date (value), 'dd/MM/yyyy') }
- },
- {
- Header: 'مبلغ سفارش',
- Footer: 'مبلغ سفارش',
- accessor: 'order-price',
- Filter: ColumnFilter
- },
- {
- Header: 'شماره سفارش',
- Footer: 'شماره سفارش',
- accessor: 'order-number',
- },
- {
- Header: 'شغل کاربر',
- Footer: 'شغل کاربر',
- accessor: 'user-job',
- },
- {
- Header: 'وضعیت سفارش',
- Footer: 'وضعیت سفارش',
- accessor: 'order-status',
- },
- {
- Header: 'سطح اهمیت',
- Footer: 'سطح اهمیت',
- accessor: 'order-level',
- disableSortBy: true,
- },
-]
\ No newline at end of file
+ },
+ {
+ Header: "مبلغ سفارش",
+ Footer: "مبلغ سفارش",
+ accessor: "order-price",
+ Filter: ColumnFilter,
+ },
+ {
+ Header: "شماره سفارش",
+ Footer: "شماره سفارش",
+ accessor: "order-number",
+ },
+ {
+ Header: "شغل کاربر",
+ Footer: "شغل کاربر",
+ accessor: "user-job",
+ },
+ {
+ Header: "وضعیت سفارش",
+ Footer: "وضعیت سفارش",
+ accessor: "order-status",
+ Cell: StatusPill,
+ },
+ {
+ Header: "سطح اهمیت",
+ Footer: "سطح اهمیت",
+ accessor: "order-level",
+ Cell: StatusPill,
+ },
+];