From c8b2c35e781c351458cc97c8a8a52566218f4ec8 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Fri, 18 Feb 2022 15:04:43 +0330 Subject: [PATCH] global filter and column filter working properly --- src/components/ReactTable4/BasicTable.js | 10 ++- src/components/ReactTable4/EditButtons.js | 5 +- src/components/ReactTable4/GlobalFilter.js | 10 ++- src/components/ReactTable4/MOCK_DATA.json | 76 ++++++++++++++++++++++ src/components/ReactTable4/columns.js | 9 +-- src/components/ReactTable4/index.js | 2 - 6 files changed, 99 insertions(+), 13 deletions(-) diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 6c65e69..ddff9ef 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -1,6 +1,7 @@ import React, { useMemo } from "react"; import "./index.scss"; +import { ColumnFilter } from "./ColumnFilter.js"; import { useTable, @@ -78,6 +79,12 @@ const BasicTable = ({ settingsIcon }) => { const columns = React.useMemo(() => COLUMNS, []); const data = useMemo(() => MOCK_DATA, []); + const defaultColumn = useMemo(() => { + return { + Filter: ColumnFilter, + }; + }, []); + // اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند const isEven = (idx) => idx % 2 === 0; @@ -108,6 +115,7 @@ const BasicTable = ({ settingsIcon }) => { { columns, data, + defaultColumn, // initialState: { pageIndex: 2 } }, useColumnOrder, @@ -238,7 +246,7 @@ const BasicTable = ({ settingsIcon }) => { : " 🔼" : ""} - {/*
{column.canFilter ? column.render("Filter") : null}
*/} +
{column.canFilter ? column.render("Filter") : null}
))} diff --git a/src/components/ReactTable4/EditButtons.js b/src/components/ReactTable4/EditButtons.js index 8f9f57e..17a010e 100644 --- a/src/components/ReactTable4/EditButtons.js +++ b/src/components/ReactTable4/EditButtons.js @@ -1,15 +1,16 @@ import React, { useState } from "react"; +import DropDown from "./DropDown"; + import filter from "./filter.svg"; import plus from "./plus.svg"; -import more from "./more2.svg"; -import DropDown from "./DropDown"; export function EditButtons({}) { const [activeFilter, setActiveFilter] = useState(null); return (
+ {/* add new row */}
); }; diff --git a/src/components/ReactTable4/MOCK_DATA.json b/src/components/ReactTable4/MOCK_DATA.json index 97a9b7f..85eb2a4 100644 --- a/src/components/ReactTable4/MOCK_DATA.json +++ b/src/components/ReactTable4/MOCK_DATA.json @@ -17,5 +17,81 @@ "birth_day": "1368/09/02", "Criminal record": "4 سال حبس", "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": "تهران" } ] diff --git a/src/components/ReactTable4/columns.js b/src/components/ReactTable4/columns.js index ef200b4..773ac7f 100644 --- a/src/components/ReactTable4/columns.js +++ b/src/components/ReactTable4/columns.js @@ -15,13 +15,12 @@ export const COLUMNS = [ Footer: "نام و نام خانوادگی", accessor: "name", disableSortBy: true, - Filter: false, + disableFilters: true, }, { Header: "تاریخ سفارش", Footer: "تاریخ سفارش", accessor: "order-date", - Filter: false, Cell: ({ value }) => { return format(new Date(value), "dd/MM/yyyy"); }, @@ -30,25 +29,21 @@ export const COLUMNS = [ Header: "مبلغ سفارش", Footer: "مبلغ سفارش", accessor: "order-price", - Filter: false, }, { Header: "شماره سفارش", Footer: "شماره سفارش", accessor: "order-number", - Filter: false, }, { Header: "شغل کاربر", Footer: "شغل کاربر", accessor: "user-job", - Filter: false, }, { Header: "وضعیت سفارش", Footer: "وضعیت سفارش", accessor: "order-status", - Filter: false, Cell: OrderStatus, }, { @@ -62,8 +57,8 @@ export const COLUMNS = [ Header: EditButtons, Footer: "ویرایش", accessor: "edit", - Filter: false, Cell: Buttons, disableSortBy: true, + disableFilters: true, }, ]; diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js index 3bdb3b7..49b95f7 100644 --- a/src/components/ReactTable4/index.js +++ b/src/components/ReactTable4/index.js @@ -6,7 +6,6 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { return (
{/* breadCrumb */} -
{breadCrumbs.map((breadCrumb, index) => (
@@ -29,7 +28,6 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
))}
-
{/* page Title */}