global filter and column filter working properly

master
mahdi andalib 3 years ago
parent ec4db56170
commit c8b2c35e78
  1. 10
      src/components/ReactTable4/BasicTable.js
  2. 5
      src/components/ReactTable4/EditButtons.js
  3. 10
      src/components/ReactTable4/GlobalFilter.js
  4. 76
      src/components/ReactTable4/MOCK_DATA.json
  5. 9
      src/components/ReactTable4/columns.js
  6. 2
      src/components/ReactTable4/index.js

@ -1,6 +1,7 @@
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import "./index.scss"; import "./index.scss";
import { ColumnFilter } from "./ColumnFilter.js";
import { import {
useTable, useTable,
@ -78,6 +79,12 @@ const BasicTable = ({ settingsIcon }) => {
const columns = React.useMemo(() => COLUMNS, []); const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []); const data = useMemo(() => MOCK_DATA, []);
const defaultColumn = useMemo(() => {
return {
Filter: ColumnFilter,
};
}, []);
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند // اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
const isEven = (idx) => idx % 2 === 0; const isEven = (idx) => idx % 2 === 0;
@ -108,6 +115,7 @@ const BasicTable = ({ settingsIcon }) => {
{ {
columns, columns,
data, data,
defaultColumn,
// initialState: { pageIndex: 2 } // initialState: { pageIndex: 2 }
}, },
useColumnOrder, useColumnOrder,
@ -238,7 +246,7 @@ const BasicTable = ({ settingsIcon }) => {
: " 🔼" : " 🔼"
: ""} : ""}
</span> </span>
{/* <div>{column.canFilter ? column.render("Filter") : null}</div> */} <div>{column.canFilter ? column.render("Filter") : null}</div>
</th> </th>
))} ))}
</tr> </tr>

@ -1,15 +1,16 @@
import React, { useState } from "react"; import React, { useState } from "react";
import DropDown from "./DropDown";
import filter from "./filter.svg"; import filter from "./filter.svg";
import plus from "./plus.svg"; import plus from "./plus.svg";
import more from "./more2.svg";
import DropDown from "./DropDown";
export function EditButtons({}) { export function EditButtons({}) {
const [activeFilter, setActiveFilter] = useState(null); const [activeFilter, setActiveFilter] = useState(null);
return ( return (
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
{/* add new row */}
<button <button
className=" flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600" className=" flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
style={{ backgroundColor: "#65A9FF" }} style={{ backgroundColor: "#65A9FF" }}

@ -28,7 +28,15 @@ export const GlobalFilter = ({ filter, setFilter }) => {
alt="" alt=""
className="w-4 h-4 absolute left-2 cursor-pointer" className="w-4 h-4 absolute left-2 cursor-pointer"
/> />
<input <input
value={filter || ""}
onChange={(e) => setFilter(e.target.value)}
type="text"
className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
/>
{/* <input
value={value || ""} value={value || ""}
onChange={(e) => { onChange={(e) => {
setValue(e.target.value); setValue(e.target.value);
@ -39,7 +47,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
type="text" type="text"
className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`} className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
/> /> */}
</div> </div>
); );
}; };

@ -17,5 +17,81 @@
"birth_day": "1368/09/02", "birth_day": "1368/09/02",
"Criminal record": "4 سال حبس", "Criminal record": "4 سال حبس",
"uni": "تهران" "uni": "تهران"
},
{
"name": "خسرو شکیبایی",
"order-date": "1340/04/13",
"order-price": 225.2569,
"order-number": "09390646589",
"user-job": "بازیگر",
"order-status": 2,
"order-level": 2,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "علی علوی",
"order-date": "1330/12/05",
"order-price": 910.325,
"order-number": "09120403285",
"user-job": "تاجر",
"order-status": 3,
"order-level": 3,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "پارسا ایرانی",
"order-date": "1372/01/08",
"order-price": 123456789,
"order-number": "09120336508",
"user-job": "حسابدار",
"order-status": 4,
"order-level": 4,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
},
{
"name": "محمد محمدی",
"order-date": "1389/01/26",
"order-price": 550000,
"order-number": "0913698574",
"user-job": "دکتر",
"order-status": 5,
"order-level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
} }
] ]

@ -15,13 +15,12 @@ export const COLUMNS = [
Footer: "نام و نام خانوادگی", Footer: "نام و نام خانوادگی",
accessor: "name", accessor: "name",
disableSortBy: true, disableSortBy: true,
Filter: false, disableFilters: true,
}, },
{ {
Header: "تاریخ سفارش", Header: "تاریخ سفارش",
Footer: "تاریخ سفارش", Footer: "تاریخ سفارش",
accessor: "order-date", accessor: "order-date",
Filter: false,
Cell: ({ value }) => { Cell: ({ value }) => {
return format(new Date(value), "dd/MM/yyyy"); return format(new Date(value), "dd/MM/yyyy");
}, },
@ -30,25 +29,21 @@ export const COLUMNS = [
Header: "مبلغ سفارش", Header: "مبلغ سفارش",
Footer: "مبلغ سفارش", Footer: "مبلغ سفارش",
accessor: "order-price", accessor: "order-price",
Filter: false,
}, },
{ {
Header: "شماره سفارش", Header: "شماره سفارش",
Footer: "شماره سفارش", Footer: "شماره سفارش",
accessor: "order-number", accessor: "order-number",
Filter: false,
}, },
{ {
Header: "شغل کاربر", Header: "شغل کاربر",
Footer: "شغل کاربر", Footer: "شغل کاربر",
accessor: "user-job", accessor: "user-job",
Filter: false,
}, },
{ {
Header: "وضعیت سفارش", Header: "وضعیت سفارش",
Footer: "وضعیت سفارش", Footer: "وضعیت سفارش",
accessor: "order-status", accessor: "order-status",
Filter: false,
Cell: OrderStatus, Cell: OrderStatus,
}, },
{ {
@ -62,8 +57,8 @@ export const COLUMNS = [
Header: EditButtons, Header: EditButtons,
Footer: "ویرایش", Footer: "ویرایش",
accessor: "edit", accessor: "edit",
Filter: false,
Cell: Buttons, Cell: Buttons,
disableSortBy: true, disableSortBy: true,
disableFilters: true,
}, },
]; ];

@ -6,7 +6,6 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
return ( return (
<div className="my-10 w-11/12 mx-auto"> <div className="my-10 w-11/12 mx-auto">
{/* breadCrumb */} {/* breadCrumb */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
{breadCrumbs.map((breadCrumb, index) => ( {breadCrumbs.map((breadCrumb, index) => (
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
@ -29,7 +28,6 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
</div> </div>
))} ))}
</div> </div>
<div className="my-7"> <div className="my-7">
{/* page Title */} {/* page Title */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">

Loading…
Cancel
Save