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.

591 lines
17 KiB

3 years ago
import React, { useMemo } from "react";
import "./index.scss";
import { ColumnSearch } from "./ColumnSearch.js";
3 years ago
import {
useTable,
useSortBy,
useGlobalFilter,
useFilters,
usePagination,
useRowSelect,
useColumnOrder,
useExpanded,
} from "react-table";
import { COLUMNS } from "./columns";
import { GlobalFilter } from "./GlobalFilter";
3 years ago
import { Pagination } from "./Pagination";
import { GoToPage } from "./GoToPage";
3 years ago
import { Settings } from "./Settings";
3 years ago
import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json";
const BasicTable = ({ settingsIcon }) => {
3 years ago
const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []);
const defaultColumn = useMemo(() => {
return {
Filter: ColumnSearch,
};
}, []);
3 years ago
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
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,
3 years ago
},
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",
// ]);
// };
3 years ago
const { globalFilter, pageIndex, pageSize } = state;
// const firstPageRows = rows.slice(0, 10);
return (
<>
{/* 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-end">
{/* left box */}
3 years ago
<div
3 years ago
className="rounded-md p-2 flex flex-row items-center"
3 years ago
style={{ backgroundColor: "#F1F6FF" }}
>
{/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
3 years ago
{/* pagination */}
<div
3 years ago
className="flex flex-row items-center p-1 rounded"
style={{ backgroundColor: "#F9FBFF" }}
>
3 years ago
{/* go to page */}
3 years ago
<GoToPage
pageIndex={pageIndex}
gotoPage={gotoPage}
pageOptions={pageOptions}
/>
{/* vertical line */}
<div
3 years ago
className={`w-0.5 h-4 mr-2`}
style={{ backgroundColor: "#65A9FF" }}
></div>
3 years ago
{/* arrows */}
<Pagination
gotoPage={gotoPage}
canPreviousPage={canPreviousPage}
previousPage={previousPage}
canNextPage={canNextPage}
pageCount={pageCount}
nextPage={nextPage}
/>
3 years ago
</div>
{/* settings icon */}
3 years ago
{settingsIcon && <Settings />}
3 years ago
</div>
</div>
3 years ago
<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 */}
<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}
3 years ago
</th>
))}
</tr>
))}
</thead>
<tbody
{...getTableBodyProps()}
className="divide-y divide-gray-200 bg-white"
>
{page.map((row, idx) => {
prepareRow(row);
return (
<React.Fragment>
<tr></tr>
3 years ago
<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({ rows: row.original })}
{/* {renderRowSubComponent({ row: row.values })} */}
3 years ago
</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 ">
3 years ago
{/* <span className="text-sm ml-4">
3 years ago
صفحه{" "}
<strong className="text-indigo-500">
{pageIndex + 1} از {pageOptions.length}
</strong>
{""}
3 years ago
</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>
{""}
3 years ago
</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({ rows }) {
const persian = {
weight: "وزن",
pageNumber: "تعداد صفحات",
pageType: "نوع کاغذ",
bookNumber: "شماره شابک",
publisher: "انتشارات",
author: "نویسنده",
bookType: "قطع",
publishedYear: "سال انتشار",
};
3 years ago
return (
<div className="w-full flex flex-row items-center bg-indigo-100 border-r-4 border-blue-600 p-2">
{/* 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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.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">{rows.address}</span>
</p>
</div>
</div>
{/* left */}
<div
className="flex flex-col items-end justify-end"
style={{ width: "10%" }}
>
<button
className="border rounded text-red-600 w-8/12 text-xs py-2 mb-2"
style={{ borderColor: "#D53921" }}
>
حذف
</button>
<button className="border rounded text-blue-600 w-8/12 text-xs py-2">
جزیات بیشتر
</button>
</div>
3 years ago
</div>
);
}
export default BasicTable;
BasicTable.defaultProps = {
3 years ago
settingsIcon: true,
};