update added

master
mahdi 3 years ago
parent d162a07b6a
commit f65096ccfe
  1. 6
      src/App.js
  2. 2
      src/components/ReactTable3/index.js
  3. 382
      src/components/ReactTable4/BasicTable.js
  4. 31
      src/components/ReactTable4/Buttons.js
  5. 16
      src/components/ReactTable4/Checkbox.js
  6. 19
      src/components/ReactTable4/ColumnFilter.js
  7. 126
      src/components/ReactTable4/EditButtons.js
  8. 27
      src/components/ReactTable4/GlobalFilter.js
  9. 182
      src/components/ReactTable4/MOCK_DATA.json
  10. 302
      src/components/ReactTable4/NOTUSINGBasicTableDefaultCode.js
  11. 35
      src/components/ReactTable4/OrderLevel.js
  12. 55
      src/components/ReactTable4/OrderStatus.js
  13. 6
      src/components/ReactTable4/arrow-icon.svg
  14. 4
      src/components/ReactTable4/blue-arrow.svg
  15. 64
      src/components/ReactTable4/columns.js
  16. 6
      src/components/ReactTable4/edit.svg
  17. 3
      src/components/ReactTable4/filter.svg
  18. 158
      src/components/ReactTable4/index.js
  19. 16
      src/components/ReactTable4/index.scss
  20. 10
      src/components/ReactTable4/more2.svg
  21. 6
      src/components/ReactTable4/plus.svg
  22. 10
      src/components/ReactTable4/search-normal.svg
  23. 14
      src/components/ReactTable4/settings.svg

@ -42,7 +42,8 @@ import Design1 from "./components/ProductSalesAmount/Design1";
import Design2 from "./components/ProductSalesAmount/Design2";
import TableDesign1 from "./components/Table/Design1";
import ReactTable2 from "./components/ReactTable2";
import ReactTable3 from "./components/ReactTable3";
// import ReactTable3 from "./components/ReactTable3";
import ReactTable4 from "./components/ReactTable4";
import Switch from "./components/Switch";
@ -89,7 +90,8 @@ function App() {
{/* <Design2 /> */}
{/* <TableDesign1 /> */}
{/* <ReactTable2 /> */}
<ReactTable3 />
{/* <ReactTable3 /> */}
<ReactTable4 />
</div>
</Provider>
);

@ -5,7 +5,7 @@ import BasicTable from "./BasicTable";
const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
return (
<div className="my-10 w-11/12 mx-auto">
<h1 className="text-3lg bg-pink-600 text-whtite rounded shadow-sm p-4 text-center text-white">
<h1 className="text-9xl bg-pink-600 text-whtite rounded shadow-sm p-4 text-center text-white">
search box pop up CLICK ON THE SEARCH ICON AND SEE THE RESULT
</h1>
{/* breadCrumb */}

@ -0,0 +1,382 @@
import React, { useMemo } from "react";
import "./index.scss";
import {
useTable,
useSortBy,
useGlobalFilter,
useFilters,
usePagination,
useRowSelect,
useColumnOrder,
useExpanded,
useResizeColumns,
} from "react-table";
import { COLUMNS } from "./columns";
import { GlobalFilter } from "./GlobalFilter";
import { Checkbox } from "./Checkbox";
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 = () => {
const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []);
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
const isEven = (idx) => idx % 2 === 0;
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
setPageSize,
prepareRow,
allColumns,
getToggleHideAllColumnsProps,
setColumnOrder,
selectedFlatRows,
state,
setGlobalFilter,
resetResizing,
} = useTable(
{
columns,
data,
// initialState: { pageIndex: 2 }
},
useColumnOrder,
useFilters,
useGlobalFilter,
useSortBy,
useExpanded,
usePagination,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => {
return [
{
id: "selection",
Header: ({ getToggleAllRowsSelectedProps }) => (
<Checkbox {...getToggleAllRowsSelectedProps()} />
),
Cell: ({ row }) => (
<Checkbox {...row.getToggleRowSelectedProps()} />
),
},
...columns,
];
});
}
);
const changeOrder = () => {
setColumnOrder([
"name",
"order-number",
"user-job",
"order-level",
"order-status",
"order-price",
]);
};
const { globalFilter, pageIndex, pageSize } = state;
// const firstPageRows = rows.slice(0, 10);
return (
<>
<div className="customeClass1">
{headerGroups.map((headerGroup) =>
headerGroup.headers.map((column) =>
column.Filter ? (
<div className="mt-2 sm:mt-0 customeClass2" key={column.id}>
{column.render("Filter")}
</div>
) : null
)
)}
</div>
<div className="flex flex-row items-center justify-end mb-3 mx-4">
{/* search box */}
{/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
{/* pagination */}
<div
className="border border-blue-400 rounded-sm py-1 px-2 flex flex-items-center"
style={{}}
>
{/* go to page */}
<div>
<input
className="ml-1 text-xs p-1 rounded border-blue-400"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>
<span className={`text-xs`} style={{ color: "#65A9FF" }}>
{" "}
برو به صفحه{" "}
</span>
</div>
{/* */}
<div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
{/* arrows */}
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
{"<<"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
{"<"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()}
disabled={!canNextPage}
>
{">"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
{">>"}
</button>
</div>
</div>
{/* */}
{/* toggle columns */}
{/* <div>
<div>
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
</div>
{allColumns.map((column) => (
<div key={column.id}>
<label>
<input type="checkbox" {...column.getToggleHiddenProps()} />
{column.Header}
</label>
</div>
))}
</div> */}
{/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */}
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="" style={{ backgroundColor: "#F3F8FF" }}>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps(column.getSortByToggleProps())}
scope="col"
className="cursor-pointer p-4 text-right text-sm font-medium"
style={{ color: "#3287B9" }}
>
{column.render("Header")}
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody
{...getTableBodyProps()}
className="divide-y divide-gray-200 bg-white"
>
{page.map((row, idx) => {
prepareRow(row);
return (
<React.Fragment>
<tr
{...row.getRowProps()}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
>
{row.cells.map((cell) => {
return (
<td
{...cell.getCellProps()}
className="p-4 whitespace-nowrap text-xs"
role="cell"
style={{ color: "#00253A" }}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
{row.isExpanded ? (
<tr>
<td colSpan={headerGroups[0].headers.length}>
{renderRowSubComponent({ row: row.values })}
</td>
</tr>
) : null}
</React.Fragment>
);
})}
</tbody>
<tfoot
className={`bg-blue-900 ${rows.length > 10 ? "w-full" : "hidden"}`}
>
{footerGroups.map((footerGroup) => (
<tr {...footerGroup.getFooterGroupProps()}>
{footerGroup.headers.map((column) => (
<td
{...column.getFooterProps}
className="px-4 py-2 text-right text-xs"
style={{ color: "#fff" }}
>
{column.render("Footer")}
</td>
))}
</tr>
))}
</tfoot>
</table>
<pre>
<code>
{JSON.stringify(
{
selectedFlatRows: selectedFlatRows.map((row) => row.original),
},
null,
2
)}
</code>
</pre>
<div className="mt-3 ">
<span className="text-sm ml-4">
صفحه{" "}
<strong className="text-indigo-500">
{pageIndex + 1} از {pageOptions.length}
</strong>
{""}
</span>
<select
className="text-white text-sm rounded cursor-pointer"
style={{
backgroundColor: "#65A9FF",
borderColor: "#65A9FF",
}}
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
{[7, 10, 25, 50].map((pageSize) => (
<option
key={pageSize}
value={pageSize}
className=" text-sm"
style={{
direction: "ltr",
textAlign: "right",
}}
>
نمایش {pageSize}
</option>
))}
</select>
</div>
</>
);
};
function renderRowSubComponent({ row }) {
return (
<div className="pl-2 pr-5 bg-blue-200">
نام: {row.name}
<br />
<button className="bg-blue-400">ویرایش</button>
</div>
);
}
export default BasicTable;

@ -0,0 +1,31 @@
import arrowIcon from "./arrow-icon.svg";
import more from "./more2.svg";
import edit from "./edit.svg";
import { useState } from "react";
export function Buttons({ row }) {
const [activeDetails, setActiveDetails] = useState(null);
return (
<div className="flex flex-row items-center justify-end">
<button
className="flex flex-row items-center justify-around p-2 rounded border border-gray-300 mx-1"
onClick={() => setActiveDetails(!activeDetails)}
{...row.getToggleRowExpandedProps()}
>
جزیات
<img
src={arrowIcon}
alt=""
className={`w-3 cursor-pointer mr-2 ${
activeDetails ? "rotate-60" : "rotate-90"
}`}
/>
</button>
<div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
<img src={edit} alt="" className="w-4" />
</div>
<img src={more} alt="" className="w-5 cursor-pointer mx-1" />
</div>
);
}

@ -0,0 +1,16 @@
import React from "react";
export const Checkbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
const defaultRef = React.useRef();
const resolvedRef = ref || defaultRef;
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return (
<>
<input type="checkbox" ref={resolvedRef} {...rest} />
</>
);
});

@ -0,0 +1,19 @@
import React from 'react';
export const ColumnFilter = ({ column }) => {
const { filterValue, setFilter } = column
return (
<span>
Search: {''}
<input value={filterValue || '' }
onChange={(e) => setFilter(e.target.value)} />
</span>
);
};

@ -0,0 +1,126 @@
import React, { useState } from "react";
import filter from "./filter.svg";
import plus from "./plus.svg";
import more from "./more2.svg";
export function EditButtons({ buttons }) {
const [selectedButton, setSelectedButton] = useState(null);
return (
<div className="flex flex-row items-center justify-end">
{buttons.map((button, index) => (
<div>
<button
id="dropdownButton"
data-dropdown-toggle="dropdown"
type="button"
className={`flex flex-row items-center justify-around p-1 rounded-md bg-opacity-30 mx-1 ${
button.border
} ${button.borderColor} ${
selectedButton === button ? "border" : "border-0"
}`}
key={index}
style={{
backgroundColor: button.backgroundColor,
padding: button.padding,
}}
onClick={() =>
setSelectedButton(selectedButton === button ? null : button)
}
>
<p className={` text-white`}>{button.title}</p>
<img
src={button.logo}
alt=""
className={`cursor-pointer ${button.width} ${button.height} ${
button.title === null ? "mr-0" : "mx-2"
}`}
/>
</button>
<div
id="dropdown"
className="hidden z-10 w-44 text-base list-none bg-red-600 rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
>
{button.buttonSubItems === !null &&
button.buttonSubItems.map((buttonSubItem, i) => (
<p>{buttonSubItem.title}</p>
))}
{/* <ul className="py-1" aria-labelledby="dropdownButton">
{button.buttonSubItems === !null &&
button.buttonSubItems.map((buttonSubItem, i) => (
<li className="bg-red-400">{buttonSubItem.title}</li>
))}
</ul> */}
</div>
</div>
))}
</div>
);
}
EditButtons.defaultProps = {
buttons: [
{
logo: plus,
width: "w-3",
height: "h-3",
title: "ثبت جدید",
backgroundColor: "#65A9FF",
border: "border-b-4",
borderColor: "#3686EC",
padding: "4px 7px",
components: "d",
buttonSubItems: [],
},
{
logo: filter,
width: "w-5",
height: "h-5",
title: null,
backgroundColor: "#F3F8FF",
border: null,
borderColor: null,
components: "a",
buttonSubItems: [],
},
{
logo: more,
width: "w-5",
height: "h-5",
title: null,
textColor: null,
backgroundColor: "#F3F8FF",
border: null,
borderColor: null,
components: "a",
buttonSubItems: [
{
title: "دراپ داون 1",
},
{
title: "دراپ داون 2",
},
{
title: "دراپ داون 3",
},
{
title: "دراپ داون 4",
},
{
title: "دراپ داون 5",
},
],
},
],
};
// {
// logo: settings,
// width: "w-5",
// height: "h-5",
// title: null,
// textColor: null,
// backgroundColor: "#F3F8FF",
// components: "b",
// },

@ -0,0 +1,27 @@
import React, { useState } from "react";
import { useAsyncDebounce } from "react-table";
import search from "./search-normal.svg";
export const GlobalFilter = ({ filter, setFilter }) => {
const [openModal, setOpenModal] = useState(true);
const [value, setValue] = useState(filter);
const onChange = useAsyncDebounce((value) => {
setFilter(value || undefined);
}, 400);
return (
<input
value={value || ""}
onChange={(e) => {
setValue(e.target.value);
onChange(e.target.value);
}}
type="text"
placeholder="نام کالا را جستجو کنید..."
className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none"
/>
);
};

@ -0,0 +1,182 @@
[
{
"name": "مایکروویر سامسونگ مدل 1",
"order-date": "1399/09/27",
"order-price": 27,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1
},
{
"name": "مایکروویر سامسونگ مدل 2",
"order-date": "1399/09/25",
"order-price": 26,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 2,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 3",
"order-date": "1399/09/22",
"order-price": 44,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 3,
"order-level": 3
},
{
"name": "لپ تاپ مک بوک اپل",
"order-date": "1410/09/27",
"order-price": 73,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 4,
"order-level": 4
},
{
"name": "تبلت اپل",
"order-date": "1375/09/25",
"order-price": 96,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 5,
"order-level": 5
},
{
"name": "مایکروویر سامسونگ مدل 1",
"order-date": "1399/09/27",
"order-price": 27,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1
},
{
"name": "مایکروویر سامسونگ مدل 2",
"order-date": "1399/09/25",
"order-price": 26,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 2,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 3",
"order-date": "1399/09/22",
"order-price": 44,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 3,
"order-level": 3
},
{
"name": "لپ تاپ مک بوک اپل",
"order-date": "1410/09/27",
"order-price": 73,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 4,
"order-level": 4
},
{
"name": "تبلت اپل",
"order-date": "1375/09/25",
"order-price": 96,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 5,
"order-level": 5
},
{
"name": "مایکروویر سامسونگ مدل 1",
"order-date": "1399/09/27",
"order-price": 27,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1
},
{
"name": "مایکروویر سامسونگ مدل 2",
"order-date": "1399/09/25",
"order-price": 26,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 2,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 3",
"order-date": "1399/09/22",
"order-price": 44,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 3,
"order-level": 3
},
{
"name": "لپ تاپ مک بوک اپل",
"order-date": "1410/09/27",
"order-price": 73,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 4,
"order-level": 4
},
{
"name": "تبلت اپل",
"order-date": "1375/09/25",
"order-price": 96,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 5,
"order-level": 5
},
{
"name": "مایکروویر سامسونگ مدل 1",
"order-date": "1399/09/27",
"order-price": 27,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1
},
{
"name": "مایکروویر سامسونگ مدل 2",
"order-date": "1399/09/25",
"order-price": 26,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 2,
"order-level": 2
},
{
"name": "مایکروویر سامسونگ مدل 3",
"order-date": "1399/09/22",
"order-price": 44,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 3,
"order-level": 3
},
{
"name": "لپ تاپ مک بوک اپل",
"order-date": "1410/09/27",
"order-price": 73,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 4,
"order-level": 4
},
{
"name": "تبلت اپل",
"order-date": "1375/09/25",
"order-price": 96,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 5,
"order-level": 5
}
]

@ -0,0 +1,302 @@
import React, { useMemo } from "react";
import {
useTable,
useSortBy,
useGlobalFilter,
useFilters,
usePagination,
useRowSelect,
useColumnOrder,
} from "react-table";
import { COLUMNS } from "./columns";
import { GlobalFilter } from "./GlobalFilter";
import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json";
const BasicTable = () => {
const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []);
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
setPageSize,
prepareRow,
allColumns,
getToggleHideAllColumnsProps,
setColumnOrder,
selectedFlatRows,
state,
setGlobalFilter,
} = useTable(
{
columns,
data,
// initialState: { pageIndex: 2 }
},
useColumnOrder,
useFilters,
useGlobalFilter,
useSortBy,
usePagination,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => {
return [
{
id: "selection",
Header: ({ getToggleAllRowsSelectedProps }) => (
<Checkbox {...getToggleAllRowsSelectedProps()} />
),
Cell: ({ row }) => (
<Checkbox {...row.getToggleRowSelectedProps()} />
),
},
...columns,
];
});
}
);
const changeOrder = () => {
setColumnOrder([
"name",
"order-number",
"user-job",
"order-level",
"order-status",
"order-price",
]);
};
const { globalFilter, pageIndex, pageSize } = state;
// const firstPageRows = rows.slice(0, 10);
return (
<>
<div className="bg-yellow-500">
{/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{/* pagination */}
</div>
{/* toggle columns */}
{/* <div>
<div>
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
</div>
{allColumns.map((column) => (
<div key={column.id}>
<label>
<input type="checkbox" {...column.getToggleHiddenProps()} />
{column.Header}
</label>
</div>
))}
</div> */}
{/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */}
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-300">
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps(column.getSortByToggleProps())}
scope="col"
className="cursor-pointer px-4 py-2 text-right text-xs"
style={{ color: "#3287B9" }}
>
{column.render("Header")}
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
{/* not using */}
{/* <div>
{column.canFilter ? column.render('Filter') : null }
</div> */}
</th>
))}
</tr>
))}
</thead>
<tbody
{...getTableBodyProps()}
className="bg-white divide-y divide-gray-200"
>
{/* not using */}
{/* {rows.map((row) => {
prepareRow(row)
return(
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}>
{cell.render('Cell')}
</td>
})}
</tr>
)
})} */}
{page.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td
{...cell.getCellProps()}
className="px-4 py-4 whitespace-nowrap text-sm"
role="cell"
style={{ color: "#00253A" }}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
);
})}
{/* not using */}
{/* {firstPageRows.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td
{...cell.getCellProps()}
className="px-4 py-4 whitespace-nowrap text-sm"
role="cell"
style={{ color: "#00253A" }}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
);
})} */}
</tbody>
<tfoot
className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`}
>
{footerGroups.map((footerGroup) => (
<tr {...footerGroup.getFooterGroupProps()}>
{footerGroup.headers.map((column) => (
<td
{...column.getFooterProps}
className="px-4 py-2 text-right text-xs"
style={{ color: "#3287B9" }}
>
{column.render("Footer")}
</td>
))}
</tr>
))}
</tfoot>
</table>
<pre>
<code>
{JSON.stringify(
{
selectedFlatRows: selectedFlatRows.map((row) => row.original),
},
null,
2
)}
</code>
</pre>
<div>
<span>
Page{" "}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>
{""}
</span>
<span>
| Go to Page:{" "}
<input
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>
</span>
<select
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
{[7, 10, 25, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
{" "}
{"<<"}{" "}
</button>
<button
className="bg-blue-400 m-2 rounded text-white p-2"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="bg-blue-400 m-2 rounded text-white p-2"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
{" "}
{">>"}{" "}
</button>
</div>
</>
);
};
export default BasicTable;

@ -0,0 +1,35 @@
export function OrderLevel({ value }) {
return (
<div className="p-2 rounded-3xl border border-gray-300 w-fit">
{(() => {
switch(value) {
case 1:
return <div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65FFAD" }}></span>
<span style={{ color: "#00253A" }} className="">وضعیت عادی</span>
</div>;
case 2:
return <div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FF6565" }}></span>
<span style={{ color: "#00253A" }} className="">اعلان سطح هشدار</span>
</div>;
case 3:
return <div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65DAFF" }}></span>
<span style={{ color: "#00253A" }} className="">بررسی و پیگیری</span>
</div>;
case 4:
return <div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FFEA65" }}></span>
<span style={{ color: "#00253A" }} className="">وضعیت بحرانی</span>
</div>;
default:
return <div className="flex flex-row items-center justify-center ">
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#CCFF65" }}></span>
<span style={{ color: "#00253A" }} className="">وضعیت پایدار</span>
</div>;
}
})()}
</div>
);
}

@ -0,0 +1,55 @@
export function OrderStatus({ value }) {
return (
<div className="">
{(() => {
if (value === 1) {
return (
<span
style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
className="p-2 rounded"
>
ارسال شده
</span>
);
} else if (value === 2) {
return (
<span
style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
className="p-2 rounded"
>
رسیدگی
</span>
);
} else if (value === 3) {
return (
<span
style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
className="p-2 rounded"
>
لغو شده
</span>
);
} else if (value === 4) {
return (
<span
style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
className="p-2 rounded"
>
پیگیری
</span>
);
} else {
return (
<span
style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
className="p-2 rounded"
>
خطری
</span>
);
}
})()}{" "}
</div>
);
}

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
<g id="arrow-down" transform="translate(0)">
<path id="Vector" d="M9.9,0,5.825,4.075a1.241,1.241,0,0,1-1.75,0L0,0" transform="translate(2.55 5.594)" fill="none" stroke="rgba(0,37,58,0.32)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H15V15H0Z" transform="translate(15 15) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 489 B

@ -0,0 +1,4 @@
<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16.237" height="16.237" viewBox="0 0 16.237 16.237">
<path id="Vector" d="M10.716,0,6.305,4.411a1.343,1.343,0,0,1-1.894,0L0,0" transform="translate(2.76 6.055)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H16.237V16.237H0Z" transform="translate(16.237 16.237) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 472 B

@ -0,0 +1,64 @@
import { format } from "date-fns";
import Table, { SelectColumnFilter } from "./BasicTable"; // new
import { ColumnFilter } from "./ColumnFilter";
import { OrderStatus } from "./OrderStatus";
import { OrderLevel } from "./OrderLevel";
import { Buttons } from "./Buttons";
import { EditButtons } from "./EditButtons";
export const COLUMNS = [
{
Header: "نام و نام خانوادگی",
Footer: "نام و نام خانوادگی",
accessor: "name",
disableSortBy: true,
},
{
Header: "تاریخ سفارش",
Footer: "تاریخ سفارش",
accessor: "order-date",
Cell: ({ value }) => {
return format(new Date(value), "dd/MM/yyyy");
},
},
{
Header: "مبلغ سفارش",
Footer: "مبلغ سفارش",
accessor: "order-price",
Filter: ColumnFilter,
},
{
Header: "شماره سفارش",
Footer: "شماره سفارش",
accessor: "order-number",
},
{
Header: "شغل کاربر",
Footer: "شغل کاربر",
accessor: "user-job",
},
{
Header: "وضعیت سفارش",
Footer: "وضعیت سفارش",
accessor: "order-status",
Cell: OrderStatus,
},
{
Header: "سطح اهمیت",
Footer: "سطح اهمیت",
accessor: "order-level",
Cell: OrderLevel,
// Filter: SelectColumnFilter,
// new
},
{
Header: EditButtons,
Footer: "ویرایش",
accessor: "edit",
Cell: Buttons,
disableSortBy: true,
},
];

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.715" height="16.703" viewBox="0 0 16.715 16.703">
<g id="edit" transform="translate(-626.295 -252.999)">
<path id="Vector" d="M8.991,1.271l-7.88,7.88a2.712,2.712,0,0,0-.66,1.32l-.43,3.01a1.424,1.424,0,0,0,1.7,1.7l3.01-.43a2.8,2.8,0,0,0,1.32-.66l7.88-7.88c1.36-1.36,2-2.94,0-4.94S10.351-.089,8.991,1.271Z" transform="translate(627.049 253.749)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0A7.144,7.144,0,0,0,4.94,4.94" transform="translate(634.91 256.15)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 725 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.631" height="22.407" viewBox="0 0 19.631 22.407">
<path id="Vector" d="M2.105,0h13.92a2.107,2.107,0,0,1,2.105,2.105V4.428A3.933,3.933,0,0,1,17.078,6.86L13.613,9.924l-1.072.947A3.417,3.417,0,0,0,11.488,13.3v4.537a2.367,2.367,0,0,1-.944,1.8l-1.47.926a2.145,2.145,0,0,1-3.267-1.8v-5.59a3.962,3.962,0,0,0-.853-2.214L.944,6.733A3.43,3.43,0,0,1,0,4.628V2.214A2.133,2.133,0,0,1,2.105,0Z" transform="translate(0.75 0.75)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 570 B

@ -0,0 +1,158 @@
import React, { useRef } from "react";
import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll";
const ReactTable3 = ({ 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">
<span
className={`cursor-pointer text-xs hover:text-blue-900 ${
breadCrumb.active ? "text-blue-900" : "text-blue-400"
}`}
>
{breadCrumb.name}
</span>
{Number(index) !== breadCrumbs.length - 1 && (
<div
className={`mx-2 ${
breadCrumb.active ? "text-blue-900" : "text-blue-400"
}`}
>
{" > "}
</div>
)}
</div>
))}
</div>
<div className="my-7">
{/* page Title */}
<div className="flex flex-row items-center">
<div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
<h2 className="text-base text-blue-900">{title}</h2>
</div>
{/* page Title */}
<div className="flex flex-row items-center mt-4">
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
<h2 className="text-sm">{subTitle}</h2>
</div>
</div>
<Tabbar />
<BasicTable />
</div>
);
};
window.isDown = false;
export default ReactTable3;
function Tabbar({}) {
const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref);
const tabs = [
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
];
return (
<ul
className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch"
onMouseDown={(e) => {
const slider = window.document.querySelector(".tabbar");
window.isDown = true;
window.startX = e.pageX - slider.offsetLeft;
window.scrollLeft = slider.scrollLeft;
}}
onMouseLeave={(e) => {
window.isDown = false;
}}
onMouseUp={(e) => {
window.isDown = false;
}}
onMouseMove={(e) => {
const slider = window.document.querySelector(".tabbar");
if (!window.isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - window.startX) * 1;
slider.scrollLeft = window.scrollLeft - walk;
}}
>
{tabs.map((el) => (
<li className="mr-2 ">
<span
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"
>
<span className="p-2">
{el} <span className="p-2">x</span>
</span>
</span>
</li>
))}
</ul>
);
}
ReactTable3.defaultProps = {
breadCrumbs: [
{
name: "صفحه اصلی",
active: false,
},
{
name: "آمار و گزارشات",
active: false,
},
{
name: "فروش محصولات",
active: false,
},
{
name: "سال 1400",
active: true,
},
],
title: "میزان فروش محصولات",
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
};

@ -0,0 +1,16 @@
.customeClass1 .customeClass2 input {
display: none !important;
}
.customeClass1 .customeClass2 span {
display: none !important;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.tabbar{
cursor: pointer;
}
.active2 ,.active2 li a{
cursor: move !important;
}

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_linear_more" data-name="vuesax/linear/more" transform="translate(-188 580) rotate(-90)">
<g id="more">
<path id="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(559 198)" fill="#6397b5"/>
<path id="Vector-2" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(573 198)" fill="#6397b5"/>
<path id="Vector-3" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(566 198)" fill="#6397b5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(556 188)" fill="#6397b5" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 749 B

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.72" height="11.72" viewBox="0 0 11.72 11.72">
<g id="Group_1916" data-name="Group 1916" transform="translate(-34.5 -316.547)">
<path id="Vector" d="M0,0H9.72" transform="translate(35.5 322.407)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,9.72V0" transform="translate(40.36 317.547)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 543 B

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="search-normal" transform="translate(-428 -188)">
<g id="Vector" transform="translate(430 190)" fill="none">
<path d="M19,9.5A9.5,9.5,0,1,1,9.5,0,9.5,9.5,0,0,1,19,9.5Z" stroke="none"/>
<path d="M 9.5 1.5 C 5.088789939880371 1.5 1.5 5.088789939880371 1.5 9.5 C 1.5 13.91121006011963 5.088789939880371 17.5 9.5 17.5 C 13.91121006011963 17.5 17.5 13.91121006011963 17.5 9.5 C 17.5 5.088789939880371 13.91121006011963 1.5 9.5 1.5 M 9.5 0 C 14.74670028686523 0 19 4.253290176391602 19 9.5 C 19 14.74670028686523 14.74670028686523 19 9.5 19 C 4.253290176391602 19 0 14.74670028686523 0 9.5 C 0 4.253290176391602 4.253290176391602 0 9.5 0 Z" stroke="none" fill="#65a9ff"/>
</g>
<path id="Vector-2" data-name="Vector" d="M2.552,3.252a.7.7,0,0,1-.49-.2L.2,1.192A.706.706,0,0,1,.2.2a.706.706,0,0,1,.99,0l1.86,1.86a.706.706,0,0,1,0,.99A.738.738,0,0,1,2.552,3.252Z" transform="translate(446.747 206.747)" fill="#65a9ff"/>
<path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(452 212) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.7 KiB

Loading…
Cancel
Save