master
mahdi andalib 3 years ago
parent dce41aeeb6
commit 3475a99de0
  1. 49
      src/components/ReactTable4/BasicTable.js
  2. 21
      src/components/ReactTable4/ToggleColumns.js
  3. 43
      src/components/ReactTable4/index.js

@ -2,6 +2,7 @@ import React, { useMemo, useState } from "react";
import "./index.scss"; import "./index.scss";
import { ColumnSearch } from "./ColumnSearch.js"; import { ColumnSearch } from "./ColumnSearch.js";
import { ToggleColumns } from "./ToggleColumns.js";
import { Tabbar } from "./index"; import { Tabbar } from "./index";
import { import {
@ -29,9 +30,6 @@ const BasicTable = ({ settingsIcon }) => {
const columns = React.useMemo(() => COLUMNS, []); const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []); const data = useMemo(() => MOCK_DATA, []);
//selected row
// const [selectedFilterRow, setSelectedFilterRow] = useState(null);
const defaultColumn = useMemo(() => { const defaultColumn = useMemo(() => {
return { return {
Filter: ColumnSearch, Filter: ColumnSearch,
@ -95,42 +93,14 @@ const BasicTable = ({ settingsIcon }) => {
} }
); );
// const changeOrder = () => {
// setColumnOrder([
// "name",
// "order-number",
// "user-job",
// "order-level",
// "order-status",
// "order-price",
// ]);
// };
const { globalFilter, pageIndex, pageSize } = state; const { globalFilter, pageIndex, pageSize } = state;
return ( return (
<> <>
{/* <button
className="bg-orange-600"
onClick={() => setSelectedFilterRow(!selectedFilterRow)}
>
click me
</button> */}
{/* toggle columns */} {/* toggle columns */}
{/* <div> <ToggleColumns
<div> allColumns={allColumns}
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
</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> */}
<div className="flex flex-row items-center justify-between"> <div className="flex flex-row items-center justify-between">
{/* right box */} {/* right box */}
<div className="" style={{ width: "70%" }}> <div className="" style={{ width: "70%" }}>
@ -280,13 +250,6 @@ const BasicTable = ({ settingsIcon }) => {
</code> </code>
</pre> </pre>
<div className="mt-3 "> <div className="mt-3 ">
{/* <span className="text-sm ml-4">
صفحه{" "}
<strong className="text-indigo-500">
{pageIndex + 1} از {pageOptions.length}
</strong>
{""}
</span> */}
<span className="text-sm ml-4"> <span className="text-sm ml-4">
صفحه{" "} صفحه{" "}
<strong className="text-indigo-500"> <strong className="text-indigo-500">
@ -306,7 +269,6 @@ const BasicTable = ({ settingsIcon }) => {
</strong> </strong>
{""} {""}
</span> </span>
<select <select
className="text-white text-sm rounded cursor-pointer" className="text-white text-sm rounded cursor-pointer"
style={{ style={{
@ -603,6 +565,7 @@ function renderRowSubComponent({ row }) {
</div> </div>
); );
} }
export default BasicTable; export default BasicTable;
BasicTable.defaultProps = { BasicTable.defaultProps = {

@ -0,0 +1,21 @@
import React from "react";
export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
return (
<div>
<div>
<input type="checkbox" {...getToggleHideAllColumnsProps()} /> Toggle All
</div>
{allColumns.map((column) => (
<div key={column.id}>
<label>
<input type="checkbox" {...column.getToggleHiddenProps()} />
{column.Header}
</label>
</div>
))}
</div>
);
};
export default ToggleColumns;

@ -6,7 +6,7 @@ import cancleIcon from "./zarbedar-icon.svg";
const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
return ( return (
<div className="my-10 w-11/12 mx-auto"> <div className="my-10 w-11/12 mx-auto">
{/* breadCrumb */} {/* breadCrumb */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
{breadCrumbs.map((breadCrumb, index) => ( {breadCrumbs.map((breadCrumb, index) => (
@ -54,42 +54,7 @@ export function Tabbar({}) {
const ref = useRef(null); const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref); // const { onMouseDown } = useDraggableScroll(ref);
const tabs = [ const tabs = ["فروشگاه دانوین", "مهدی عندلیب"];
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
];
return ( return (
<ul <ul
className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch" className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
@ -120,11 +85,11 @@ export function Tabbar({}) {
if (window.isDown) return e.preventDefault(); if (window.isDown) return e.preventDefault();
}} }}
aria-current="page" aria-current="page"
className="flex flex-row items-center text-sm text-center active px-2 py-1 rounded-sm mx-1" className="flex flex-row items-center text-sm text-center active px-4 py-4 rounded-sm mx-1"
style={{ backgroundColor: "#F1F6FF" }} style={{ backgroundColor: "#F1F6FF" }}
> >
<span className="">{el}</span> <span className="">{el}</span>
<img src={cancleIcon} className="w-2 h-2 mx-2" /> <img src={cancleIcon} className="w-2 h-2 mr-2" />
</li> </li>
))} ))}
</ul> </ul>

Loading…
Cancel
Save