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, + }, +];