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 "./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 }) => {
: " 🔼"
: ""}
</span>
{/* <div>{column.canFilter ? column.render("Filter") : null}</div> */}
<div>{column.canFilter ? column.render("Filter") : null}</div>
</th>
))}
</tr>

@ -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 (
<div className="flex flex-row items-center justify-end">
{/* add new row */}
<button
className=" flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
style={{ backgroundColor: "#65A9FF" }}

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

@ -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": "تهران"
}
]

@ -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,
},
];

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

Loading…
Cancel
Save