filter column added

master
mahdi andalib 3 years ago
parent c8b2c35e78
commit 82e513c890
  1. 69
      src/components/ReactTable4/BasicTable.js
  2. 2
      src/components/ReactTable4/ColumnSearch.js
  3. 2
      src/components/ReactTable4/GlobalFilter.js
  4. 46
      src/components/ReactTable4/SelectColumnFilter.js
  5. 5
      src/components/ReactTable4/columns.js

@ -1,7 +1,7 @@
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import "./index.scss"; import "./index.scss";
import { ColumnFilter } from "./ColumnFilter.js"; import { ColumnSearch } from "./ColumnSearch.js";
import { import {
useTable, useTable,
@ -24,64 +24,13 @@ import { Settings } from "./Settings";
import { Checkbox } from "./Checkbox"; import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json"; import MOCK_DATA from "./MOCK_DATA.json";
// This is a custom filter UI for selecting
// a unique option from a list
export function SelectColumnFilter({
column: { filterValue, setFilter, preFilteredRows, id, render },
}) {
const options = React.useMemo(() => {
const options = new Set();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return [...options.values()];
}, [id, preFilteredRows]);
// Render a multi-select box
return (
<label className="flex gap-x-2 items-baseline">
<span className="text-gray-700">{render("Header")}: </span>
<select
className="rounded-md border-gray-300 shadow-sm text-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
name={id}
id={id}
value={filterValue}
onChange={(e) => {
setFilter(e.target.value || undefined);
}}
>
<option className="text-xs" value="">
همه
</option>
{options.map((option, i) => (
<option key={i} value={option} className="text-xs">
{(() => {
if (option === 1) {
return "وضعیت عادی";
} else if (option === 2) {
return "اعلان سطح هشدار";
} else if (option === 3) {
return "بررسی و پیگیری";
} else if (option === 4) {
return "وضعیت بحرانی";
} else {
return " وضعیت پایدار";
}
})()}{" "}
</option>
))}
</select>
</label>
);
}
const BasicTable = ({ settingsIcon }) => { 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(() => { const defaultColumn = useMemo(() => {
return { return {
Filter: ColumnFilter, Filter: ColumnSearch,
}; };
}, []); }, []);
@ -246,7 +195,18 @@ const BasicTable = ({ settingsIcon }) => {
: " 🔼" : " 🔼"
: ""} : ""}
</span> </span>
<div>{column.canFilter ? column.render("Filter") : null}</div> </th>
))}
{/* <div>{column.canFilter ? column.render("Filter") : null}</div> */}
</tr>
))}
</thead>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>
{column.canFilter ? column.render("Filter") : null}
</th> </th>
))} ))}
</tr> </tr>
@ -260,6 +220,7 @@ const BasicTable = ({ settingsIcon }) => {
prepareRow(row); prepareRow(row);
return ( return (
<React.Fragment> <React.Fragment>
<tr></tr>
<tr <tr
{...row.getRowProps()} {...row.getRowProps()}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"} // className={isEven(idx) ? "bg-gray-600" : "bg-white"}

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
export const ColumnFilter = ({ column }) => { export const ColumnSearch = ({ column }) => {
const { filterValue, setFilter } = column; const { filterValue, setFilter } = column;
return ( return (

@ -32,6 +32,8 @@ export const GlobalFilter = ({ filter, setFilter }) => {
<input <input
value={filter || ""} value={filter || ""}
onChange={(e) => setFilter(e.target.value)} onChange={(e) => setFilter(e.target.value)}
onFocus={() => setActiveSearchBox(true)}
// onBlur={() => setActiveSearchBox(false)}
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" }}

@ -0,0 +1,46 @@
import React from "react";
export const SelectColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id, render },
}) => {
const options = React.useMemo(() => {
const options = new Set();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return [...options.values()];
}, [id, preFilteredRows]);
return (
<select
className="rounded-md border-gray-300 shadow-sm text-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
name={id}
id={id}
value={filterValue}
onChange={(e) => {
setFilter(e.target.value || undefined);
}}
>
<option className="text-xs" value="">
همه
</option>
{options.map((option, i) => (
<option key={i} value={option} className="text-xs">
{(() => {
if (option === 1) {
return "وضعیت عادی";
} else if (option === 2) {
return "اعلان سطح هشدار";
} else if (option === 3) {
return "بررسی و پیگیری";
} else if (option === 4) {
return "وضعیت بحرانی";
} else {
return " وضعیت پایدار";
}
})()}{" "}
</option>
))}
</select>
);
};

@ -1,13 +1,12 @@
import { format } from "date-fns"; import { format } from "date-fns";
import Table, { SelectColumnFilter } from "./BasicTable"; // new import Table from "./BasicTable"; // new
import { ColumnFilter } from "./ColumnFilter.js";
import { OrderStatus } from "./OrderStatus"; import { OrderStatus } from "./OrderStatus";
import { OrderLevel } from "./OrderLevel"; import { OrderLevel } from "./OrderLevel";
import { Buttons } from "./Buttons"; import { Buttons } from "./Buttons";
import { EditButtons } from "./EditButtons"; import { EditButtons } from "./EditButtons";
import { SelectColumnFilter } from "./SelectColumnFilter.js";
export const COLUMNS = [ export const COLUMNS = [
{ {

Loading…
Cancel
Save