master
mahdi andalib 3 years ago
parent 5b96ce80c0
commit dce41aeeb6
  1. 4
      src/components/ReactTable4/BasicTable.js
  2. 6
      src/components/ReactTable4/ColumnSearch.js
  3. 6
      src/components/ReactTable4/GlobalFilter.js
  4. 2
      src/components/ReactTable4/SliderColumnFilter.js
  5. 17
      src/components/ReactTable4/index.js
  6. 12
      src/components/ReactTable4/zarbedar-icon.svg

@ -133,12 +133,12 @@ const BasicTable = ({ settingsIcon }) => {
{/* <button onClick={changeOrder}> Change Column Order </button> */}
<div className="flex flex-row items-center justify-between">
{/* right box */}
<div className="w-8/12">
<div className="" style={{ width: "70%" }}>
<Tabbar />
</div>
{/* left box */}
<div
className="rounded-md p-2 flex flex-row items-center"
className="rounded-md p-2 flex flex-row items-center justify-end"
style={{ backgroundColor: "#F1F6FF" }}
>
{/* search box */}

@ -1,7 +1,7 @@
import React, { useState } from "react";
import search from "./search-normal.svg";
import settings from "./settings.svg";
import cancleIcon from "./zarbedar-icon.svg";
export const ColumnSearch = ({ column }) => {
const { filterValue, setFilter } = column;
@ -12,9 +12,9 @@ export const ColumnSearch = ({ column }) => {
<div className="flex flex-row items-center relative">
{activeSearchBox && (
<img
src={settings}
src={cancleIcon}
alt=""
className="w-4 h-4 absolute left-16 cursor-pointer"
className="w-2 h-2 absolute left-16 cursor-pointer"
onClick={() => setActiveSearchBox(false)}
/>
)}

@ -2,7 +2,7 @@ import React, { useState } from "react";
import { useAsyncDebounce } from "react-table";
import search from "./search-normal.svg";
import settings from "./settings.svg";
import cancleIcon from "./zarbedar-icon.svg";
export const GlobalFilter = ({ filter, setFilter }) => {
const [activeSearchBox, setActiveSearchBox] = useState(false);
@ -17,9 +17,9 @@ export const GlobalFilter = ({ filter, setFilter }) => {
<div className="flex flex-row-reverse items-center relative ml-2 ">
{activeSearchBox && (
<img
src={settings}
src={cancleIcon}
alt=""
className="w-4 h-4 absolute left-7 cursor-pointer"
className="w-3 h-3 absolute left-7 cursor-pointer"
onClick={() => setActiveSearchBox(false)}
/>
)}

@ -27,7 +27,7 @@ export const SliderColumnFilter = ({
setFilter(parseInt(e.target.value, 10));
}}
/>
<div className="p-1 rounded bg-blue-300">
<div className="p-1 rounded bg-blue-300 bg-opacity-20">
<img
src={cancleIcon}
onClick={() => setFilter(undefined)}

@ -2,6 +2,8 @@ import React, { useRef } from "react";
import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll";
import cancleIcon from "./zarbedar-icon.svg";
const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
return (
<div className="my-10 w-11/12 mx-auto">
@ -90,7 +92,7 @@ export function Tabbar({}) {
];
return (
<ul
className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch"
className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
onMouseDown={(e) => {
const slider = window.document.querySelector(".tabbar");
window.isDown = true;
@ -113,19 +115,16 @@ export function Tabbar({}) {
}}
>
{tabs.map((el) => (
<li className="mr-2 ">
<span
<li
onClick={(e) => {
if (window.isDown) return e.preventDefault();
///do here
}}
aria-current="page"
className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"
className="flex flex-row items-center text-sm text-center active px-2 py-1 rounded-sm mx-1"
style={{ backgroundColor: "#F1F6FF" }}
>
<span className="p-2">
{el} <span className="p-2">x</span>
</span>
</span>
<span className="">{el}</span>
<img src={cancleIcon} className="w-2 h-2 mx-2" />
</li>
))}
</ul>

@ -1,10 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18.118" height="18.118" viewBox="0 0 18.118 18.118">
<g id="Group_1" data-name="Group 1" transform="translate(-244.586 -251.497)">
<g id="vuesax_linear_clipboard-close" data-name="vuesax/linear/clipboard-close">
<g id="clipboard-close">
<path id="Vector" d="M15.136,15.136,0,0" transform="translate(246.153 252.911)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M15.136,0,0,15.136" transform="translate(246 253.064)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</g>
<svg xmlns="http://www.w3.org/2000/svg" width="5.397" height="5.397" viewBox="0 0 5.397 5.397">
<g id="Group_1887" data-name="Group 1887" transform="translate(0.707 0.707)">
<path id="Vector" d="M3.943,3.943,0,0" transform="translate(0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M3.943,0,0,3.943" transform="translate(0 0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 713 B

After

Width:  |  Height:  |  Size: 545 B

Loading…
Cancel
Save