|
|
|
import React, { useMemo, useState } from "react";
|
|
|
|
|
|
|
|
import "./index.scss";
|
|
|
|
import { ColumnSearch } from "./ColumnSearch.js";
|
|
|
|
import { Tabbar } from "./index";
|
|
|
|
|
|
|
|
import {
|
|
|
|
useTable,
|
|
|
|
useSortBy,
|
|
|
|
useGlobalFilter,
|
|
|
|
useFilters,
|
|
|
|
usePagination,
|
|
|
|
useRowSelect,
|
|
|
|
useColumnOrder,
|
|
|
|
useExpanded,
|
|
|
|
} from "react-table";
|
|
|
|
|
|
|
|
import { COLUMNS } from "./columns";
|
|
|
|
import { GlobalFilter } from "./GlobalFilter";
|
|
|
|
|
|
|
|
import { Pagination } from "./Pagination";
|
|
|
|
import { GoToPage } from "./GoToPage";
|
|
|
|
import { Settings } from "./Settings";
|
|
|
|
|
|
|
|
import { Checkbox } from "./Checkbox";
|
|
|
|
import MOCK_DATA from "./MOCK_DATA.json";
|
|
|
|
|
|
|
|
const BasicTable = ({ settingsIcon }) => {
|
|
|
|
const columns = React.useMemo(() => COLUMNS, []);
|
|
|
|
const data = useMemo(() => MOCK_DATA, []);
|
|
|
|
|
|
|
|
//selected row
|
|
|
|
// const [selectedFilterRow, setSelectedFilterRow] = useState(null);
|
|
|
|
|
|
|
|
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 changeOrder = () => {
|
|
|
|
// setColumnOrder([
|
|
|
|
// "name",
|
|
|
|
// "order-number",
|
|
|
|
// "user-job",
|
|
|
|
// "order-level",
|
|
|
|
// "order-status",
|
|
|
|
// "order-price",
|
|
|
|
// ]);
|
|
|
|
// };
|
|
|
|
|
|
|
|
const { globalFilter, pageIndex, pageSize } = state;
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{/* <button
|
|
|
|
className="bg-orange-600"
|
|
|
|
onClick={() => setSelectedFilterRow(!selectedFilterRow)}
|
|
|
|
>
|
|
|
|
click me
|
|
|
|
</button> */}
|
|
|
|
{/* toggle columns */}
|
|
|
|
{/* <div>
|
|
|
|
<div>
|
|
|
|
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
|
|
|
|
</div>
|
|
|
|
{allColumns.map((column) => (
|
|
|
|
<div key={column.id}>
|
|
|
|
<label>
|
|
|
|
<input type="checkbox" {...column.getToggleHiddenProps()} />
|
|
|
|
{column.Header}
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div> */}
|
|
|
|
{/* Change Column Order */}
|
|
|
|
{/* <button onClick={changeOrder}> Change Column Order </button> */}
|
|
|
|
<div className="flex flex-row items-center justify-between">
|
|
|
|
{/* right box */}
|
|
|
|
<div className="" style={{ width: "70%" }}>
|
|
|
|
<Tabbar />
|
|
|
|
</div>
|
|
|
|
{/* left box */}
|
|
|
|
<div
|
|
|
|
className="rounded-md p-2 flex flex-row items-center justify-end"
|
|
|
|
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>
|
|
|
|
</div>
|
|
|
|
<table
|
|
|
|
{...getTableProps()}
|
|
|
|
className="min-w-full divide-y divide-gray-200"
|
|
|
|
>
|
|
|
|
<thead className="" style={{ backgroundColor: "#F3F8FF" }}>
|
|
|
|
{headerGroups.map((headerGroup) => (
|
|
|
|
<tr {...headerGroup.getHeaderGroupProps()}>
|
|
|
|
{headerGroup.headers.map((column) => (
|
|
|
|
<th
|
|
|
|
{...column.getHeaderProps(column.getSortByToggleProps())}
|
|
|
|
scope="col"
|
|
|
|
className="cursor-pointer p-4 text-right text-sm font-medium"
|
|
|
|
style={{ color: "#3287B9" }}
|
|
|
|
>
|
|
|
|
{column.render("Header")}
|
|
|
|
<span>
|
|
|
|
{column.isSorted
|
|
|
|
? column.isSortedDesc
|
|
|
|
? " 🔽"
|
|
|
|
: " 🔼"
|
|
|
|
: ""}
|
|
|
|
</span>
|
|
|
|
</th>
|
|
|
|
))}
|
|
|
|
</tr>
|
|
|
|
))}
|
|
|
|
</thead>
|
|
|
|
{/* filter row */}
|
|
|
|
{/* {selectedFilterRow === !null && ( )} */}
|
|
|
|
<thead style={{ backgroundColor: "#FAFBFF" }}>
|
|
|
|
{headerGroups.map((headerGroup) => (
|
|
|
|
<tr {...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>
|
|
|
|
<tr
|
|
|
|
{...row.getRowProps()}
|
|
|
|
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
|
|
|
|
>
|
|
|
|
{row.cells.map((cell) => {
|
|
|
|
return (
|
|
|
|
<td
|
|
|
|
{...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 })}
|
|
|
|
{/* {renderRowSubComponent({ row: row.values })} */}
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
) : null}
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</tbody>
|
|
|
|
<tfoot
|
|
|
|
className={`bg-blue-900 ${rows.length > 10 ? "w-full" : "hidden"}`}
|
|
|
|
>
|
|
|
|
{footerGroups.map((footerGroup) => (
|
|
|
|
<tr {...footerGroup.getFooterGroupProps()}>
|
|
|
|
{footerGroup.headers.map((column) => (
|
|
|
|
<td
|
|
|
|
{...column.getFooterProps}
|
|
|
|
className="px-4 py-2 text-right text-xs"
|
|
|
|
style={{ color: "#fff" }}
|
|
|
|
>
|
|
|
|
{column.render("Footer")}
|
|
|
|
</td>
|
|
|
|
))}
|
|
|
|
</tr>
|
|
|
|
))}
|
|
|
|
</tfoot>
|
|
|
|
</table>
|
|
|
|
<pre>
|
|
|
|
<code>
|
|
|
|
{JSON.stringify(
|
|
|
|
{
|
|
|
|
selectedFlatRows: selectedFlatRows.map((row) => row.original),
|
|
|
|
},
|
|
|
|
null,
|
|
|
|
2
|
|
|
|
)}
|
|
|
|
</code>
|
|
|
|
</pre>
|
|
|
|
<div className="mt-3 ">
|
|
|
|
{/* <span className="text-sm ml-4">
|
|
|
|
صفحه{" "}
|
|
|
|
<strong className="text-indigo-500">
|
|
|
|
{pageIndex + 1} از {pageOptions.length}
|
|
|
|
</strong>
|
|
|
|
{""}
|
|
|
|
</span> */}
|
|
|
|
<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>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
function renderRowSubComponent({ row }) {
|
|
|
|
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" }}
|
|
|
|
>
|
|
|
|
نام و نام خانوادگی:
|
|
|
|
<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">{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">{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,
|
|
|
|
};
|