drop down component added and working

master
mahdi andalib 3 years ago
parent 61405cb4ed
commit ec4db56170
  1. 4
      src/App.js
  2. 8
      src/components/ReactTable4/Buttons.js
  3. 45
      src/components/ReactTable4/DropDown.js
  4. 70
      src/components/ReactTable4/EditButtons.js
  5. 57
      src/components/ReactTable4/MOCK_DATA.json
  6. 302
      src/components/ReactTable4/NOTUSINGBasicTableDefaultCode.js
  7. 8
      src/components/ReactTable4/index.js

@ -93,8 +93,8 @@ function App() {
{/* <TableDesign1 /> */}
{/* <ReactTable2 /> */}
{/* <ReactTable3 /> */}
{/* <ReactTable4 /> */}
<Digikala />
<ReactTable4 />
{/* <Digikala /> */}
{/* <DigikalaShop /> */}
</div>
</Provider>

@ -8,11 +8,11 @@ export function Buttons({ row }) {
const [activeDetails, setActiveDetails] = useState(null);
return (
<div
className="flex flex-row items-center justify-end mx-1"
className="flex flex-row items-center justify-end "
{...row.getToggleRowExpandedProps()}
>
<button
className="flex flex-row items-center justify-around p-2 rounded border border-gray-300 mx-1"
className="flex flex-row items-center justify-around p-2 rounded border border-gray-300 "
onClick={() => setActiveDetails(!activeDetails)}
>
جزیات
@ -24,10 +24,10 @@ export function Buttons({ row }) {
}`}
/>
</button>
<div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
<div className="p-2 rounded border border-gray-300 cursor-pointer ">
<img src={edit} alt="" className="w-4" />
</div>
<img src={more} alt="" className="w-5 cursor-pointer mx-1" />
<img src={more} alt="" className="w-5 cursor-pointer " />
</div>
);
}

@ -1,66 +1,45 @@
import React from "react";
import more from "./more2.svg";
export const DropDown = ({}) => {
return (
<div>
<button
className=""
id="dropdownButton"
data-dropdown-toggle="dropdown"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
type="button"
>
Dropdown button{" "}
<svg
className="ml-2 w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
></path>
</svg>
<img src={more} alt="" className={`cursor-pointer w-5`} />
</button>
<div
style={{ backgroundColor: "#65A9FF" }}
id="dropdown"
className="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
>
<ul className="py-1" aria-labelledby="dropdownButton">
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
className="hidden z-10 text-xs list-none rounded divide-y divide-gray-100 shadow"
>
Dashboard
</a>
</li>
<ul className="" aria-labelledby="dropdownButton">
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
>
Settings
ایتم شماره1
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
>
Earnings
ایتم شماره1
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
>
Sign out
ایتم شماره1
</a>
</li>
</ul>

@ -5,12 +5,13 @@ import plus from "./plus.svg";
import more from "./more2.svg";
import DropDown from "./DropDown";
export function EditButtons({ buttons }) {
export function EditButtons({}) {
const [activeFilter, setActiveFilter] = useState(null);
return (
<div className="flex flex-row items-center justify-end">
<button
className="mx-1 flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
className=" flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
style={{ backgroundColor: "#65A9FF" }}
>
ثبت جدید
@ -20,74 +21,15 @@ export function EditButtons({ buttons }) {
<img
src={filter}
alt=""
className={`p-2 rounded border border-blue-300 cursor-pointer mx-1 w-8 ${
className={`p-2 rounded border border-blue-300 cursor-pointer w-8 ${
activeFilter ? "border" : "border-0"
}`}
onClick={() => setActiveFilter(!activeFilter)}
/>
{/* dropDown */}
<button
className="mx-1"
id="dropdownButton"
data-dropdown-toggle="dropdown"
type="button"
>
<img src={more} alt="" className={`cursor-pointer w-5`} />
</button>
{/* dropDownItems */}
<div
style={{ backgroundColor: "#65A9FF" }}
id="dropdown"
className="hidden z-10 text-xs list-none rounded divide-y divide-gray-100 shadow"
>
<ul className="" aria-labelledby="dropdownButton">
<li>
<a
href="#"
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
>
ایتم شماره1
</a>
</li>
</ul>
</div>
<DropDown />
</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",
},
{
logo: filter,
width: "w-5",
height: "h-5",
title: null,
backgroundColor: "#F3F8FF",
border: null,
borderColor: null,
// components: "a",
},
{
logo: more,
width: "w-5",
height: "h-5",
title: null,
textColor: null,
backgroundColor: "#F3F8FF",
border: null,
borderColor: null,
// components: <DropDown />,
},
],
};
EditButtons.defaultProps = {};

@ -1,52 +1,21 @@
[
{
"name": "سامسونگ موبایل مدل 1",
"order-date": "1399/09/27",
"order-price": 25,
"name": "خسرو سهرابی",
"order-date": "1400/11/09",
"order-price": 910.325,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 1,
"order-level": 1,
"history": "مهدی"
},
{
"name": "ایفون جدید 13",
"order-date": "1305/09/27",
"order-price": 22,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 2,
"order-level": 2,
"history": "tggg"
},
{
"name": "مک بوک پرو",
"order-date": "1399/09/27",
"order-price": 75,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 3,
"order-level": 3,
"history": "aaa"
},
{
"name": "تبلت",
"order-date": "1305/09/27",
"order-price": 44,
"order-number": "09120023100",
"user-job": "مهندس ساختمان",
"order-status": 4,
"order-level": 4,
"history": "ff"
},
{
"name": "کتاب جدید",
"order-date": "1305/09/27",
"order-price": 13,
"order-number": "09120023100",
"user-job": "طناز",
"order-status": 5,
"order-level": 5,
"history": "sfda"
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
"job": "فروشنده لوازم خانگی",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"Criminal record": "4 سال حبس",
"uni": "تهران"
}
]

@ -1,302 +0,0 @@
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;

@ -2,7 +2,7 @@ import React, { useRef } from "react";
import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll";
const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
return (
<div className="my-10 w-11/12 mx-auto">
{/* breadCrumb */}
@ -42,13 +42,13 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
<h2 className="text-sm">{subTitle}</h2>
</div>
</div>
<Tabbar />
{/* <Tabbar /> */}
<BasicTable />
</div>
);
};
window.isDown = false;
export default ReactTable3;
export default ReactTable4;
function Tabbar({}) {
const ref = useRef(null);
@ -134,7 +134,7 @@ function Tabbar({}) {
);
}
ReactTable3.defaultProps = {
ReactTable4.defaultProps = {
breadCrumbs: [
{
name: "صفحه اصلی",

Loading…
Cancel
Save