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 { ColumnSearch } from "./ColumnSearch.js";
import { ToggleColumns } from "./ToggleColumns.js";
import { Tabbar } from "./index";
import {
@ -29,9 +30,6 @@ const BasicTable = ({ settingsIcon }) => {
const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []);
//selected row
// const [selectedFilterRow, setSelectedFilterRow] = useState(null);
const defaultColumn = useMemo(() => {
return {
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;
return (
<>
{/* <button
className="bg-orange-600"
onClick={() => setSelectedFilterRow(!selectedFilterRow)}
>
click me
</button> */}
{/* 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> */}
<ToggleColumns
allColumns={allColumns}
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
/>
<div className="flex flex-row items-center justify-between">
{/* right box */}
<div className="" style={{ width: "70%" }}>
@ -280,13 +250,6 @@ const BasicTable = ({ settingsIcon }) => {
</code>
</pre>
<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">
صفحه{" "}
<strong className="text-indigo-500">
@ -306,7 +269,6 @@ const BasicTable = ({ settingsIcon }) => {
</strong>
{""}
</span>
<select
className="text-white text-sm rounded cursor-pointer"
style={{
@ -603,6 +565,7 @@ function renderRowSubComponent({ row }) {
</div>
);
}
export default BasicTable;
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 }) => {
return (
<div className="my-10 w-11/12 mx-auto">
<div className="my-10 w-11/12 mx-auto">
{/* breadCrumb */}
<div className="flex flex-row items-center">
{breadCrumbs.map((breadCrumb, index) => (
@ -54,42 +54,7 @@ export function Tabbar({}) {
const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref);
const tabs = [
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
];
const tabs = ["فروشگاه دانوین", "مهدی عندلیب"];
return (
<ul
className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
@ -120,11 +85,11 @@ export function Tabbar({}) {
if (window.isDown) return e.preventDefault();
}}
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" }}
>
<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>
))}
</ul>

Loading…
Cancel
Save