update 12 files

master
mahdi 2 years ago
parent dcd94e355c
commit 909efc7154
  1. 30
      src/components/Tabels/ReactTable4/EditRow.js
  2. 3
      src/components/Tabels/ReactTable4/GlobalFilter.js
  3. 29
      src/components/Tabels/ReactTable4/History.js
  4. 4
      src/components/Tabels/ReactTable4/Location.js
  5. 78
      src/components/Tabels/ReactTable4/OrderLevel.js
  6. 25
      src/components/Tabels/ReactTable4/OrderStatus.js
  7. 187
      src/components/Tabels/ReactTable4/RenderRowSubComponent.js
  8. 12
      src/components/Tabels/ReactTable4/SelectColumnFilter.js
  9. 12
      src/components/Tabels/ReactTable4/SelectColumnFilter2.js
  10. 18
      src/components/Tabels/ReactTable4/SendForm.js
  11. 6
      src/components/Tabels/ReactTable4/Settings.js
  12. 12
      src/components/Tabels/ReactTable4/ShowMoreRows.js

@ -6,38 +6,21 @@ import History from "./History";
const EditRow = ({ row, columns }) => {
// console.log(columns);
return (
<section
className=" border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#F1F5FE" }}
>
<section className=" border-r-4 border-blue-600 bg-[#F1F5FE] p-2">
<div className="flex flex-row items-center mr-2 mt-2 mb-4">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p className="text-sm font-sansbold" style={{ color: "#00253A" }}>
اطلاعات هویتی
</p>
<div className="w-1 h-4 ml-1 rounded bg-[#65A9FF]"></div>
<p className="text-sm font-sansbold text-[#00253A]">اطلاعات هویتی</p>
</div>
{/* table data */}
<div className="flex flex-wrap">
{/* 1 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
<p className="text-xs text-blue-400 mb-2 border-[#65A9FF]">
نام و نام خانوادگی:
</p>
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
className="min-w-[96px] text-xs text-[#00253A] border-[#C8DEF9] bg-[#F8FBFF] rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.name}
</span>
@ -45,8 +28,7 @@ const EditRow = ({ row, columns }) => {
{/* 2 */}
<div className="flex flex-col my-2 mx-2">
<p
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
className="text-xs text-blue-400 mb-2 border-[#65A9FF]"
>
تاریخ سفارش:
</p>

@ -31,8 +31,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
onFocus={() => setActiveSearchBox(true)}
// onBlur={() => setActiveSearchBox(false)}
type="text"
className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className={`text-xs text-blue-400 bg-[#F9FBFF] border-[#B5D6FF] rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
/>
</div>
);

@ -4,46 +4,29 @@ const History = ({ sentForms }) => {
return (
<div className="flex flex-col relative mx-2">
{/* title */}
<span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
توضیحات قبلی:
</span>
<span className="text-sm mb-4 text-[#65A9FF]">توضیحات قبلی:</span>
{/* content */}
<div
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
}}
className="rounded-md border cursor-pointer h-44 no-scrollbar overflow-y-scroll "
>
<div className="rounded-md border cursor-pointer h-44 no-scrollbar overflow-y-scroll bg-[#F8FBFF] border-[#C8DEF9]">
{/* {sentForms.slice(0, 4).map((sentForm, index) => ( */}
{sentForms.map((sentForm, index) => (
<div>
{/* content */}
<div className="p-2">
<p className="text-xs" style={{ color: "#00253A" }}>
{sentForm.title}
</p>
<p
className="text-xs text-left mt-2"
style={{ color: "#6397B5" }}
>
<p className="text-xs text-[#00253A]">{sentForm.title}</p>
<p className="text-xs text-left mt-2 text-[#6397B5]">
<span>تاریخ:</span>
{" "}
{sentForm.date}
</p>
</div>
{/* border */}
{Number(index) !== sentForms.length - 1 && (
<div className="border" style={{ borderColor: "#C8DEF9" }}></div>
<div className="border border-[#C8DEF9]"></div>
)}
</div>
))}
</div>
{/* left border */}
<div
style={{ bottom: "33%", backgroundColor: "#C8DEF9" }}
className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 w-1 h-14 rounded"
></div>
<div className="absolute bottom-[33%] bg-[#C8DEF9] left-0.5 transform -translate-x-1/2 -translate-y-1/2 w-1 h-14 rounded"></div>
</div>
);
};

@ -3,9 +3,7 @@ import React from "react";
const Location = () => {
return (
<div className="mx-2">
<span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
لوکیشن مد نظر:
</span>
<span className="text-xs mr-2 text-[#65A9FF]">لوکیشن مد نظر:</span>
<img
className="mt-1 mr-2 border border-blue-300 rounded"
src="images/ReactTable4map.svg"

@ -1,35 +1,45 @@
export function OrderLevel({ value }) {
return (
<div className="p-2 rounded-3xl border border-gray-300 w-fit">
{(() => {
switch(value) {
case 1:
return <div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65FFAD" }}></span>
<span style={{ color: "#00253A" }} className="">وضعیت عادی</span>
</div>;
case 2:
return <div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FF6565" }}></span>
<span style={{ color: "#00253A" }} className="">اعلان سطح هشدار</span>
</div>;
case 3:
return <div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65DAFF" }}></span>
<span style={{ color: "#00253A" }} className="">بررسی و پیگیری</span>
</div>;
case 4:
return <div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FFEA65" }}></span>
<span style={{ color: "#00253A" }} className="">وضعیت بحرانی</span>
</div>;
default:
return <div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#CCFF65" }}></span>
<span style={{ color: "#00253A" }} className="">وضعیت پایدار</span>
</div>;
}
})()}
</div>
);
}
return (
<div className="p-2 rounded-3xl border border-gray-300 w-fit">
{(() => {
switch (value) {
case 1:
return (
<div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2 bg-[#65FFAD]"></span>
<span className="text-[#00253A]">وضعیت عادی</span>
</div>
);
case 2:
return (
<div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2 bg-[#FF6565]"></span>
<span className="text-[#00253A]">اعلان سطح هشدار</span>
</div>
);
case 3:
return (
<div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2 bg-[#65DAFF]"></span>
<span className="text-[#00253A]">بررسی و پیگیری</span>
</div>
);
case 4:
return (
<div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2 bg-[#FFEA65]"></span>
<span className="text-[#00253A]">وضعیت بحرانی</span>
</div>
);
default:
return (
<div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2 bg-[#CCFF65]"></span>
<span className="text-[#00253A]">وضعیت پایدار</span>
</div>
);
}
})()}
</div>
);
}

@ -6,46 +6,31 @@ export function OrderStatus({ value }) {
{(() => {
if (value === 1) {
return (
<span
style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
className="p-2 rounded"
>
<span className="p-2 rounded bg-[#E2FFE377] text-[#00613D]">
ارسال شده
</span>
);
} else if (value === 2) {
return (
<span
style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
className="p-2 rounded"
>
<span className="p-2 rounded bg-[#FFF78733] text-[#ECF150]">
رسیدگی
</span>
);
} else if (value === 3) {
return (
<span
style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
className="p-2 rounded"
>
<span className="p-2 rounded bg-[#FFD8CC33] text-[#611100]">
لغو شده
</span>
);
} else if (value === 4) {
return (
<span
style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
className="p-2 rounded"
>
<span className="p-2 rounded bg-[#E2FFFD33] text-[#00614A]">
پیگیری
</span>
);
} else {
return (
<span
style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
className="p-2 rounded"
>
<span className="p-2 rounded bg-[#DBCCFF33] text-[#440061]">
خطری
</span>
);

@ -2,258 +2,145 @@ import React from "react";
const RenderRowSubComponent = ({ columns, addTab, row }) => {
return (
<div
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 "
style={{ backgroundColor: "#FBFCFE" }}
>
<div className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 bg-[#FBFCFE]">
{/* right */}
<div
className="flex flex-row flex-wrap items-center "
style={{ width: "90%" }}
>
<div className="w-[90%] flex flex-row flex-wrap items-center ">
{/* 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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
وضعیت سفارش:
</p>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#65A9FF]">وضعیت سفارش:</p>
<span className="mr-1 text-black text-xs">
{columns[5].Cell({ value: row.order_status })}
</span>
</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" }}
>
سطح اهمیت:
</p>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#65A9FF]">سطح اهمیت:</p>
<span className="mr-1 text-xs text-black">
{columns[6].Cell({ value: row.order_level })}
</span>
</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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div>
<p className="text-xs text-blue-400 border-[#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" }}
>
<div className="w-[10%] flex flex-col items-end justify-end">
<button className="border border-[#D53921] text-[#D53921] rounded w-8/12 text-xs py-2 mb-2 bg-white">
حذف
</button>
<button
className="border rounded w-8/12 text-xs py-2 bg-white"
style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
className="border border-[#65A9FF] text-[#65A9FF] rounded w-8/12 text-xs py-2 bg-white"
onClick={() => {
console.log(row.name);
addTab({ name: row.name, id: row.id });

@ -14,8 +14,7 @@ export const SelectColumnFilter = ({
return (
<select
className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="text-xs flex bg-[#F9FBFF] border-[#B5D6FF] flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
name={id}
id={id}
value={filterValue}
@ -23,19 +22,14 @@ export const SelectColumnFilter = ({
setFilter(e.target.value || undefined);
}}
>
<option
className="text-white"
value=""
style={{ backgroundColor: "#65A9FF" }}
>
<option className="text-white bg-[#65A9FF]" value="">
همه
</option>
{options.map((option, i) => (
<option
key={i}
value={option}
className="text-right text-white px-2"
style={{ backgroundColor: "#65A9FF" }}
className="text-right text-white px-2 bg-[#65A9FF]"
>
{(() => {
if (option === 1) {

@ -13,8 +13,7 @@ export const SelectColumnFilter2 = ({
return (
<select
className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="text-xs bg-[#F9FBFF] border-[#B5D6FF] flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
name={id}
id={id}
value={filterValue}
@ -22,19 +21,14 @@ export const SelectColumnFilter2 = ({
setFilter(e.target.value || undefined);
}}
>
<option
className="text-white"
value=""
style={{ backgroundColor: "#65A9FF" }}
>
<option className="text-white bg-[#65A9FF]" value="">
همه
</option>
{options.map((option, i) => (
<option
key={i}
value={option}
className="text-right text-white px-2"
style={{ backgroundColor: "#65A9FF" }}
className="text-right text-white px-2 bg-[#65A9FF]"
>
{(() => {
if (option === 1) {

@ -3,27 +3,15 @@ import React from "react";
const SendForm = () => {
return (
<div className="flex flex-col flex-1 mx-2">
<span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
توضیحات:
</span>
<span className="text-sm mb-4 text-[#65A9FF]">توضیحات:</span>
<form className="flex flex-col ">
<input
placeholder="موضوع"
className="text-xs mb-2 placeholder-blue-300 rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
}}
className="text-xs border-[#C8DEF9] bg-[#F8FBFF] text-[#00253A] mb-2 placeholder-blue-300 rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
/>
<textarea
placeholder="متن"
className="resize-none w-full h-32 placeholder-blue-300 text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
}}
className="resize-none border-[#C8DEF9] bg-[#F8FBFF] text-[#00253A] w-full h-32 placeholder-blue-300 text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
></textarea>
</form>
</div>

@ -10,8 +10,7 @@ export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
<div
onClick={() => setOpenModal(true)}
data-modal-toggle="large-modal"
style={{ backgroundColor: "#F9FBFF" }}
className="mr-2 flex flex-col items-center justify-center p-1 rounded"
className="mr-2 flex flex-col items-center justify-center p-1 bg-[#F9FBFF] rounded"
>
<img
src="images/ReactTable4settings.svg"
@ -26,8 +25,7 @@ export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
onClick={() => setOpenModal(false)}
>
<div
className="absolute bg-white w-6/12 p-4 rounded"
style={{ top: "10%" }}
className="absolute top-[10%] bg-white w-6/12 p-4 rounded"
onClick={(e) => e.stopPropagation()}
>
<ToggleColumns

@ -3,11 +3,7 @@ import React from "react";
const ShowMoreRows = ({ pageSize, setPageSize }) => {
return (
<select
className="text-white text-sm rounded cursor-pointer mr-2"
style={{
backgroundColor: "#65A9FF",
borderColor: "#65A9FF",
}}
className="text-white text-sm rounded cursor-pointer mr-2 bg-[#65A9FF] bg-[#65A9FF]"
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
@ -15,11 +11,7 @@ const ShowMoreRows = ({ pageSize, setPageSize }) => {
<option
key={pageSize}
value={pageSize}
className=" text-xs"
style={{
direction: "ltr",
textAlign: "right",
}}
className=" text-xs text-right ltr"
>
نمایش {pageSize}
</option>

Loading…
Cancel
Save