You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
891 lines
27 KiB
891 lines
27 KiB
import React, { useMemo, useState } from "react"; |
|
|
|
import "./index.scss"; |
|
|
|
import Tabbar from "./Tabbar"; |
|
import MOCK_DATA from "./MOCK_DATA.json"; |
|
|
|
import { ColumnSearch } from "./ColumnSearch"; |
|
import { GlobalFilter } from "./GlobalFilter"; |
|
|
|
import { ToggleColumns } from "./ToggleColumns"; |
|
import { COLUMNS } from "./COLUMNS"; |
|
import { Pagination } from "./Pagination"; |
|
import { GoToPage } from "./GoToPage"; |
|
import { Settings } from "./Settings"; |
|
import { Checkbox } from "./Checkbox"; |
|
|
|
import { |
|
useTable, |
|
useSortBy, |
|
useGlobalFilter, |
|
useFilters, |
|
usePagination, |
|
useRowSelect, |
|
useColumnOrder, |
|
useExpanded, |
|
} from "react-table"; |
|
|
|
const BasicTable = ({ |
|
settingsIcon, |
|
addTab, |
|
tabs, |
|
delTab, |
|
setActivateTab, |
|
activeTab, |
|
}) => { |
|
const data = useMemo(() => MOCK_DATA, []); |
|
|
|
const [filtering, setFiltering] = useState(false); |
|
|
|
const columns = React.useMemo( |
|
() => COLUMNS({ filtering, setFiltering, addTab }), |
|
[] |
|
); |
|
|
|
// یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم |
|
const defaultColumn = useMemo(() => { |
|
return { |
|
Filter: ColumnSearch, |
|
}; |
|
}, []); |
|
|
|
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند |
|
const isEven = (idx) => idx % 2 === 0; |
|
|
|
const { |
|
getTableProps, |
|
getTableBodyProps, |
|
headerGroups, |
|
footerGroups, |
|
rows, |
|
page, |
|
nextPage, |
|
previousPage, |
|
canNextPage, |
|
canPreviousPage, |
|
pageOptions, |
|
gotoPage, |
|
pageCount, |
|
setPageSize, |
|
prepareRow, |
|
allColumns, |
|
getToggleHideAllColumnsProps, |
|
setColumnOrder, |
|
selectedFlatRows, |
|
state, |
|
setGlobalFilter, |
|
resetResizing, |
|
} = useTable( |
|
{ |
|
columns, |
|
data, |
|
defaultColumn, |
|
}, |
|
useColumnOrder, |
|
useFilters, |
|
useGlobalFilter, |
|
useSortBy, |
|
useExpanded, |
|
usePagination, |
|
useRowSelect, |
|
(hooks) => { |
|
hooks.visibleColumns.push((columns) => { |
|
return [ |
|
{ |
|
id: "selection", |
|
Header: ({ getToggleAllRowsSelectedProps }) => ( |
|
<Checkbox {...getToggleAllRowsSelectedProps()} /> |
|
), |
|
Cell: ({ row }) => ( |
|
<Checkbox {...row.getToggleRowSelectedProps()} /> |
|
), |
|
}, |
|
...columns, |
|
]; |
|
}); |
|
} |
|
); |
|
|
|
const { globalFilter, pageIndex, pageSize } = state; |
|
|
|
return ( |
|
<> |
|
{/* toggle columns */} |
|
{/* <ToggleColumns |
|
allColumns={allColumns} |
|
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps} |
|
/> */} |
|
<div className="flex flex-row items-center justify-between"> |
|
{/* right box */} |
|
<div className="flex-1"> |
|
<Tabbar |
|
tabs={tabs} |
|
delTab={delTab} |
|
setActivateTab={setActivateTab} |
|
activeTab={activeTab} |
|
/> |
|
</div> |
|
{/* left box */} |
|
{activeTab == 0 ? ( |
|
<div |
|
className="p-2 flex flex-row items-center rounded-tl rounded-tr" |
|
style={{ backgroundColor: "#F1F6FF" }} |
|
> |
|
{/* search box */} |
|
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> |
|
{/* pagination */} |
|
<div |
|
className="flex flex-row items-center p-1 rounded" |
|
style={{ backgroundColor: "#F9FBFF" }} |
|
> |
|
{/* go to page */} |
|
<GoToPage |
|
pageIndex={pageIndex} |
|
gotoPage={gotoPage} |
|
pageOptions={pageOptions} |
|
/> |
|
{/* vertical line */} |
|
<div |
|
className={`w-0.5 h-4 mr-2`} |
|
style={{ backgroundColor: "#65A9FF" }} |
|
></div> |
|
{/* arrows */} |
|
<Pagination |
|
gotoPage={gotoPage} |
|
canPreviousPage={canPreviousPage} |
|
previousPage={previousPage} |
|
canNextPage={canNextPage} |
|
pageCount={pageCount} |
|
nextPage={nextPage} |
|
/> |
|
</div> |
|
{/* settings icon */} |
|
{settingsIcon && <Settings />} |
|
</div> |
|
) : null} |
|
</div> |
|
{/* table */} |
|
{activeTab == 0 ? ( |
|
<> |
|
<table |
|
{...getTableProps()} |
|
className="min-w-full divide-y divide-gray-200" |
|
> |
|
<thead className="" style={{ backgroundColor: "#F3F8FF" }}> |
|
{headerGroups.map((headerGroup, index) => ( |
|
<tr key={index} {...headerGroup.getHeaderGroupProps()}> |
|
{headerGroup.headers.map((column) => ( |
|
<th |
|
{...column.getHeaderProps(column.getSortByToggleProps())} |
|
scope="col" |
|
className="cursor-pointer p-2 text-right text-xs font-medium" |
|
style={{ color: "#3287B9" }} |
|
> |
|
{column.render("Header")} |
|
<span> |
|
{column.isSorted |
|
? column.isSortedDesc |
|
? " 🔽" |
|
: " 🔼" |
|
: ""} |
|
</span> |
|
</th> |
|
))} |
|
</tr> |
|
))} |
|
</thead> |
|
{/* filter row */} |
|
{filtering && ( |
|
<thead style={{ backgroundColor: "#F1F5FE" }}> |
|
{headerGroups.map((headerGroup, index) => ( |
|
<tr key={index} {...headerGroup.getHeaderGroupProps()}> |
|
{headerGroup.headers.map((column) => ( |
|
<th {...column.getHeaderProps()} className="py-2 text-sm"> |
|
{column.canFilter ? column.render("Filter") : null} |
|
</th> |
|
))} |
|
</tr> |
|
))} |
|
</thead> |
|
)} |
|
<tbody |
|
{...getTableBodyProps()} |
|
className="divide-y divide-gray-200 bg-white" |
|
> |
|
{page.map((row, idx) => { |
|
prepareRow(row); |
|
return ( |
|
<React.Fragment key={idx}> |
|
<tr |
|
{...row.getRowProps()} |
|
// className={isEven(idx) ? "bg-gray-600" : "bg-white"} |
|
> |
|
{row.cells.map((cell, index) => { |
|
return ( |
|
<td |
|
key={index} |
|
{...cell.getCellProps()} |
|
className="p-4 whitespace-nowrap text-xs" |
|
role="cell" |
|
style={{ color: "#00253A" }} |
|
> |
|
{cell.render("Cell")} |
|
</td> |
|
); |
|
})} |
|
</tr> |
|
{row.isExpanded ? ( |
|
<tr> |
|
<td colSpan={headerGroups[0].headers.length}> |
|
{RenderRowSubComponent({ |
|
row: row.original, |
|
columns, |
|
})} |
|
{/* {RenderRowSubComponent({ row: row.values })} */} |
|
</td> |
|
</tr> |
|
) : null} |
|
</React.Fragment> |
|
); |
|
})} |
|
</tbody> |
|
<tfoot |
|
className={`bg-blue-900 ${ |
|
rows.length > 10 ? "w-full" : "hidden" |
|
}`} |
|
> |
|
{footerGroups.map((footerGroup, index) => ( |
|
<tr key={index} {...footerGroup.getFooterGroupProps()}> |
|
{footerGroup.headers.map((column, index) => ( |
|
<td |
|
key={index} |
|
{...column.getFooterProps} |
|
className="px-4 py-2 text-right text-xs" |
|
style={{ color: "#fff" }} |
|
> |
|
{column.render("Footer")} |
|
</td> |
|
))} |
|
</tr> |
|
))} |
|
</tfoot> |
|
</table> |
|
<div className="mt-3 "> |
|
<span className="text-sm ml-4"> |
|
صفحه{" "} |
|
<strong className="text-indigo-500"> |
|
<input |
|
className="ml-1 text-xs p-1 rounded border-blue-400" |
|
type="number" |
|
defaultValue={pageIndex + 1} |
|
onChange={(e) => { |
|
const pageNumber = e.target.value |
|
? Number(e.target.value) - 1 |
|
: 0; |
|
gotoPage(pageNumber); |
|
}} |
|
style={{ width: "50px" }} |
|
/>{" "} |
|
از {pageOptions.length} |
|
</strong> |
|
{""} |
|
</span> |
|
<select |
|
className="text-white text-sm rounded cursor-pointer" |
|
style={{ |
|
backgroundColor: "#65A9FF", |
|
borderColor: "#65A9FF", |
|
}} |
|
value={pageSize} |
|
onChange={(e) => setPageSize(Number(e.target.value))} |
|
> |
|
{[7, 10, 25, 50].map((pageSize) => ( |
|
<option |
|
key={pageSize} |
|
value={pageSize} |
|
className=" text-sm" |
|
style={{ |
|
direction: "ltr", |
|
textAlign: "right", |
|
}} |
|
> |
|
نمایش {pageSize} |
|
</option> |
|
))} |
|
</select> |
|
</div> |
|
</> |
|
) : ( |
|
<EditRow |
|
row={ |
|
rows.find((e) => e.original && +e.original.id === activeTab) |
|
?.original || {} |
|
} |
|
columns={columns} |
|
/> |
|
)} |
|
{/* <pre> |
|
<code> |
|
{JSON.stringify( |
|
{ |
|
selectedFlatRows: selectedFlatRows.map((row) => row.original), |
|
}, |
|
null, |
|
2 |
|
)} |
|
</code> |
|
</pre> */} |
|
</> |
|
); |
|
}; |
|
function EditRow({ row, columns }) { |
|
console.log(row); |
|
const persian = { |
|
weight: "وزن", |
|
pageNumber: "تعداد صفحات", |
|
pageType: "نوع کاغذ", |
|
bookNumber: "شماره شابک", |
|
publisher: "انتشارات", |
|
author: "نویسنده", |
|
bookType: "قطع", |
|
publishedYear: "سال انتشار", |
|
}; |
|
return ( |
|
<div |
|
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2" |
|
style={{ backgroundColor: "#FAFBFF" }} |
|
> |
|
{/* right */} |
|
<div |
|
className="flex flex-row flex-wrap items-center" |
|
style={{ width: "90%" }} |
|
> |
|
{/* 1 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
نام و نام خانوادگی: |
|
<input type="text" className="mr-1 text-black" value={row.name} /> |
|
</p> |
|
</div> |
|
{/* 2 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
تاریخ سفارش: |
|
<span className="mr-1 text-black">{row.order_date}</span> |
|
</p> |
|
</div> |
|
{/* 3 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
مبلغ سفارش: |
|
<span className="mr-1 text-black">{row.order_price}</span> |
|
</p> |
|
</div> |
|
{/* 4 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
شماره سفارش: |
|
<span className="mr-1 text-black">{row.order_number}</span> |
|
</p> |
|
</div> |
|
{/* 5 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
شغل کاربر: |
|
<span className="mr-1 text-black">{row.user_job}</span> |
|
</p> |
|
</div> |
|
{/* 6 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
وضعیت سفارش: |
|
<span className="mr-1 text-black"> |
|
{columns[5].Cell({ value: row.order_status })} |
|
</span> |
|
</p> |
|
</div> |
|
{/* 7 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
سطح اهمیت: |
|
<span className="mr-1 text-black"> |
|
{columns[6].Cell({ value: row.order_level })} |
|
</span> |
|
</p> |
|
</div> |
|
{/* 8 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
محل تولد: |
|
<span className="mr-1 text-black">{row.birth_place}</span> |
|
</p> |
|
</div> |
|
{/* 9 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
تلفن محل کار: |
|
<span className="mr-1 text-black">{row.office_phone}</span> |
|
</p> |
|
</div> |
|
{/* 10 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
تحصیلات: |
|
<span className="mr-1 text-black">{row.education}</span> |
|
</p> |
|
</div> |
|
{/* 11 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
تاریخ تولد: |
|
<span className="mr-1 text-black">{row.birth_day}</span> |
|
</p> |
|
</div> |
|
{/* 12 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
شغل: |
|
<span className="mr-1 text-black">{row.job}</span> |
|
</p> |
|
</div> |
|
{/* 13 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
دانشگاه: |
|
<span className="mr-1 text-black">{row.uni}</span> |
|
</p> |
|
</div> |
|
{/* 14 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
رشته تحصیلی: |
|
<span className="mr-1 text-black">{row.field_study}</span> |
|
</p> |
|
</div> |
|
{/* 15 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
اخلاق: |
|
<span className="mr-1 text-black">{row.behaviour}</span> |
|
</p> |
|
</div> |
|
{/* 16 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
نشانی: |
|
<span className="mr-1 text-black">{row.address}</span> |
|
</p> |
|
</div> |
|
</div> |
|
{/* left */} |
|
<div |
|
className="flex flex-col items-end justify-end" |
|
style={{ width: "10%" }} |
|
> |
|
<button |
|
className="border rounded w-8/12 text-xs py-2 mb-2 bg-white" |
|
style={{ borderColor: "#D53921", color: "#D53921" }} |
|
> |
|
حذف |
|
</button> |
|
<button |
|
className="border rounded w-8/12 text-xs py-2 bg-white" |
|
style={{ borderColor: "#65A9FF", color: "#65A9FF" }} |
|
> |
|
جزیات بیشتر |
|
</button> |
|
</div> |
|
</div> |
|
); |
|
} |
|
function RenderRowSubComponent({ row, columns }) { |
|
console.log(row); |
|
const persian = { |
|
weight: "وزن", |
|
pageNumber: "تعداد صفحات", |
|
pageType: "نوع کاغذ", |
|
bookNumber: "شماره شابک", |
|
publisher: "انتشارات", |
|
author: "نویسنده", |
|
bookType: "قطع", |
|
publishedYear: "سال انتشار", |
|
}; |
|
return ( |
|
<div |
|
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2" |
|
style={{ backgroundColor: "#FBFCFE" }} |
|
> |
|
{/* right */} |
|
<div |
|
className="flex flex-row flex-wrap items-center" |
|
style={{ width: "90%" }} |
|
> |
|
{/* 1 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
نام و نام خانوادگی: |
|
<span className="mr-1 text-black">{row.name}</span> |
|
</p> |
|
</div> |
|
{/* 2 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
تاریخ سفارش: |
|
<span className="mr-1 text-black">{row.order_date}</span> |
|
</p> |
|
</div> |
|
{/* 3 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
مبلغ سفارش: |
|
<span className="mr-1 text-black">{row.order_price}</span> |
|
</p> |
|
</div> |
|
{/* 4 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
شماره سفارش: |
|
<span className="mr-1 text-black">{row.order_number}</span> |
|
</p> |
|
</div> |
|
{/* 5 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
شغل کاربر: |
|
<span className="mr-1 text-black">{row.user_job}</span> |
|
</p> |
|
</div> |
|
{/* 6 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
وضعیت سفارش: |
|
<span className="mr-1 text-black"> |
|
{columns[5].Cell({ value: row.order_status })} |
|
</span> |
|
</p> |
|
</div> |
|
{/* 7 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
سطح اهمیت: |
|
<span className="mr-1 text-black"> |
|
{columns[6].Cell({ value: row.order_level })} |
|
</span> |
|
</p> |
|
</div> |
|
{/* 8 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
محل تولد: |
|
<span className="mr-1 text-black">{row.birth_place}</span> |
|
</p> |
|
</div> |
|
{/* 9 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
تلفن محل کار: |
|
<span className="mr-1 text-black">{row.office_phone}</span> |
|
</p> |
|
</div> |
|
{/* 10 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
تحصیلات: |
|
<span className="mr-1 text-black">{row.education}</span> |
|
</p> |
|
</div> |
|
{/* 11 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
تاریخ تولد: |
|
<span className="mr-1 text-black">{row.birth_day}</span> |
|
</p> |
|
</div> |
|
{/* 12 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
شغل: |
|
<span className="mr-1 text-black">{row.job}</span> |
|
</p> |
|
</div> |
|
{/* 13 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
دانشگاه: |
|
<span className="mr-1 text-black">{row.uni}</span> |
|
</p> |
|
</div> |
|
{/* 14 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
رشته تحصیلی: |
|
<span className="mr-1 text-black">{row.field_study}</span> |
|
</p> |
|
</div> |
|
{/* 15 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
اخلاق: |
|
<span className="mr-1 text-black">{row.behaviour}</span> |
|
</p> |
|
</div> |
|
{/* 16 */} |
|
<div className="flex flex-row items-center mr-2 my-2"> |
|
<div |
|
className="w-1 h-4 ml-1 rounded" |
|
style={{ backgroundColor: "#EDF2FB" }} |
|
></div> |
|
<p |
|
className="text-xs text-blue-400" |
|
style={{ borderColor: "#65A9FF" }} |
|
> |
|
نشانی: |
|
<span className="mr-1 text-black">{row.address}</span> |
|
</p> |
|
</div> |
|
</div> |
|
{/* left */} |
|
<div |
|
className="flex flex-col items-end justify-end" |
|
style={{ width: "10%" }} |
|
> |
|
<button |
|
className="border rounded w-8/12 text-xs py-2 mb-2 bg-white" |
|
style={{ borderColor: "#D53921", color: "#D53921" }} |
|
> |
|
حذف |
|
</button> |
|
<button |
|
className="border rounded w-8/12 text-xs py-2 bg-white" |
|
style={{ borderColor: "#65A9FF", color: "#65A9FF" }} |
|
> |
|
جزیات بیشتر |
|
</button> |
|
</div> |
|
</div> |
|
); |
|
} |
|
|
|
export default BasicTable; |
|
|
|
BasicTable.defaultProps = { |
|
settingsIcon: true, |
|
};
|
|
|