|
|
|
|
@ -1,23 +1,15 @@ |
|
|
|
|
import React, { useMemo, useState, useRef } from "react"; |
|
|
|
|
|
|
|
|
|
import "./index.scss"; |
|
|
|
|
import Tabbar from "./Tabbar"; |
|
|
|
|
|
|
|
|
|
import MOCK_DATA2 from "./MOCK_DATA2.json"; |
|
|
|
|
|
|
|
|
|
import { GlobalFilter } from "./GlobalFilter"; |
|
|
|
|
|
|
|
|
|
import { COLUMNS } from "./COLUMNS"; |
|
|
|
|
import { Pagination } from "./Pagination"; |
|
|
|
|
import { GoToPage } from "./GoToPage"; |
|
|
|
|
import ShowMoreRows from "./ShowMoreRows"; |
|
|
|
|
import { Settings } from "./Settings"; |
|
|
|
|
// import { Checkbox } from "./Checkbox";
|
|
|
|
|
// import { FilterFileType } from "./FilterFileType";
|
|
|
|
|
|
|
|
|
|
import grid from "./grid.svg"; |
|
|
|
|
import list from "./list.svg"; |
|
|
|
|
// import image1 from "./images/image1.svg";
|
|
|
|
|
|
|
|
|
|
import RenderRowSubComponent from "./RenderRowSubComponent"; |
|
|
|
|
import EditRow from "./EditRow"; |
|
|
|
|
@ -91,18 +83,7 @@ export const SelectColumnFilter = ({ |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const BasicTable = ({ |
|
|
|
|
settingsIcon, |
|
|
|
|
thead, |
|
|
|
|
goToPage, |
|
|
|
|
showMore, |
|
|
|
|
filterBarDefault, |
|
|
|
|
addTab, |
|
|
|
|
tabs, |
|
|
|
|
delTab, |
|
|
|
|
setActivateTab, |
|
|
|
|
activeTab, |
|
|
|
|
}) => { |
|
|
|
|
const BasicTable = ({ addTab, activeTab }) => { |
|
|
|
|
const data = useMemo(() => MOCK_DATA2, []); |
|
|
|
|
// console.log(data);
|
|
|
|
|
|
|
|
|
|
@ -118,14 +99,12 @@ const BasicTable = ({ |
|
|
|
|
: [...refChekedItems.current, id] |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
|
|
|
|
|
|
const columns = React.useMemo( |
|
|
|
|
() => COLUMNS({ toggelChekedItems, refChekedItems }), |
|
|
|
|
[] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
// console.log(columns[0]);
|
|
|
|
|
|
|
|
|
|
const defaultColumn = useMemo(() => { |
|
|
|
|
return {}; |
|
|
|
|
}, []); |
|
|
|
|
@ -137,25 +116,11 @@ const BasicTable = ({ |
|
|
|
|
getTableProps, |
|
|
|
|
getTableBodyProps, |
|
|
|
|
headerGroups, |
|
|
|
|
// footerGroups,
|
|
|
|
|
rows, |
|
|
|
|
page, |
|
|
|
|
nextPage, |
|
|
|
|
previousPage, |
|
|
|
|
canNextPage, |
|
|
|
|
canPreviousPage, |
|
|
|
|
pageOptions, |
|
|
|
|
gotoPage, |
|
|
|
|
pageCount, |
|
|
|
|
setPageSize, |
|
|
|
|
prepareRow, |
|
|
|
|
allColumns, |
|
|
|
|
getToggleHideAllColumnsProps, |
|
|
|
|
// setColumnOrder,
|
|
|
|
|
// selectedFlatRows,
|
|
|
|
|
state, |
|
|
|
|
setGlobalFilter, |
|
|
|
|
// resetResizing,
|
|
|
|
|
} = useTable( |
|
|
|
|
{ |
|
|
|
|
columns, |
|
|
|
|
@ -171,24 +136,12 @@ const BasicTable = ({ |
|
|
|
|
useRowSelect |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const { globalFilter, pageIndex, pageSize } = state; |
|
|
|
|
const { globalFilter } = state; |
|
|
|
|
|
|
|
|
|
const [activeList, setActiveList] = useState(false); |
|
|
|
|
|
|
|
|
|
// console.log(filtering);
|
|
|
|
|
return ( |
|
|
|
|
<div className="bg-white p-4"> |
|
|
|
|
{/* {filtering && <section>mahdi</section>} */} |
|
|
|
|
{/* <div className="flex flex-row items-center"> |
|
|
|
|
{listView.map((list, i) => ( |
|
|
|
|
<img |
|
|
|
|
keep={i} |
|
|
|
|
src={list.icon} |
|
|
|
|
className="cursor-pointer mx-2" |
|
|
|
|
onClick={() => setActiveList(false)} |
|
|
|
|
/> |
|
|
|
|
))} |
|
|
|
|
</div>{" "} */} |
|
|
|
|
<div className="mb-7 flex flex-row items-center justify-between"> |
|
|
|
|
{/* select View list */} |
|
|
|
|
<div className="flex flex-row items-center gap-x-5"> |
|
|
|
|
@ -237,111 +190,16 @@ const BasicTable = ({ |
|
|
|
|
<div className="w-4/12 "> |
|
|
|
|
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* <FilterFileType /> */} |
|
|
|
|
</div> |
|
|
|
|
{filterBarDefault && ( |
|
|
|
|
<div className="flex flex-row items-center justify-between"> |
|
|
|
|
{/* right box */} |
|
|
|
|
<di className=""> |
|
|
|
|
<Tabbar |
|
|
|
|
tabs={tabs} |
|
|
|
|
delTab={delTab} |
|
|
|
|
setActivateTab={setActivateTab} |
|
|
|
|
activeTab={activeTab} |
|
|
|
|
/> |
|
|
|
|
</di> |
|
|
|
|
{/* <div className=""> |
|
|
|
|
<Tabbar |
|
|
|
|
tabs={tabs} |
|
|
|
|
delTab={delTab} |
|
|
|
|
setActivateTab={setActivateTab} |
|
|
|
|
activeTab={activeTab} |
|
|
|
|
/> |
|
|
|
|
</div> */} |
|
|
|
|
{/* left box */} |
|
|
|
|
{activeTab === 0 ? ( |
|
|
|
|
<div |
|
|
|
|
className="flex flex-row items-center p-2 rounded-tl rounded-tr" |
|
|
|
|
style={{ backgroundColor: "#F1F6FF" }} |
|
|
|
|
> |
|
|
|
|
{/* search box */} |
|
|
|
|
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> |
|
|
|
|
{/* pagination */} |
|
|
|
|
<div |
|
|
|
|
className="flex flex-row items-center p-1 rounded" |
|
|
|
|
style={{ backgroundColor: "#F9FBFF" }} |
|
|
|
|
> |
|
|
|
|
{/* go to page */} |
|
|
|
|
<GoToPage |
|
|
|
|
pageIndex={pageIndex} |
|
|
|
|
gotoPage={gotoPage} |
|
|
|
|
pageOptions={pageOptions} |
|
|
|
|
/> |
|
|
|
|
{/* vertical line */} |
|
|
|
|
<div |
|
|
|
|
className={`w-0.5 h-4 mr-2`} |
|
|
|
|
style={{ backgroundColor: "#65A9FF" }} |
|
|
|
|
></div> |
|
|
|
|
{/* arrows */} |
|
|
|
|
<Pagination |
|
|
|
|
gotoPage={gotoPage} |
|
|
|
|
canPreviousPage={canPreviousPage} |
|
|
|
|
previousPage={previousPage} |
|
|
|
|
canNextPage={canNextPage} |
|
|
|
|
pageCount={pageCount} |
|
|
|
|
nextPage={nextPage} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
{/* settings icon */} |
|
|
|
|
{settingsIcon && ( |
|
|
|
|
<Settings |
|
|
|
|
allColumns={allColumns} |
|
|
|
|
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
) : null} |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{/* {activeList === true ? <div>listView</div> : <div>gridView</div>} */} |
|
|
|
|
|
|
|
|
|
{/* table LIST */} |
|
|
|
|
{activeTab === 0 ? ( |
|
|
|
|
<> |
|
|
|
|
{activeList === true && ( |
|
|
|
|
{activeList === false && ( |
|
|
|
|
// table
|
|
|
|
|
<table |
|
|
|
|
{...getTableProps()} |
|
|
|
|
className="min-w-full divide-y divide-gray-200 mb-5" |
|
|
|
|
> |
|
|
|
|
{thead && ( |
|
|
|
|
<thead className="" style={{ backgroundColor: "#F3F8FF" }}> |
|
|
|
|
{headerGroups.map((headerGroup, index) => ( |
|
|
|
|
<tr key={index} {...headerGroup.getHeaderGroupProps()}> |
|
|
|
|
{headerGroup.headers.map((column) => ( |
|
|
|
|
<th |
|
|
|
|
{...column.getHeaderProps( |
|
|
|
|
column.getSortByToggleProps() |
|
|
|
|
)} |
|
|
|
|
scope="col" |
|
|
|
|
className="cursor-pointer py-2 px-4 text-right text-xs 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 "} |
|
|
|
|
@ -369,17 +227,14 @@ const BasicTable = ({ |
|
|
|
|
{...cell.getCellProps({ |
|
|
|
|
className: cell.column.className, |
|
|
|
|
})} |
|
|
|
|
// className="p-4 whitespace-nowrap text-xs text-right"
|
|
|
|
|
style={{ |
|
|
|
|
padding: "12px", |
|
|
|
|
fontSize: "13px", |
|
|
|
|
textAlign: "right", |
|
|
|
|
whiteSpace: "nowrap", |
|
|
|
|
// backgroundColor: row.cells[0] ? "red" : "blue",
|
|
|
|
|
}} |
|
|
|
|
key={index} |
|
|
|
|
{...cell.getCellProps()} |
|
|
|
|
// className="p-4 whitespace-nowrap text-xs text-right "
|
|
|
|
|
role="cell" |
|
|
|
|
> |
|
|
|
|
{cell.render("Cell")} |
|
|
|
|
@ -390,12 +245,6 @@ const BasicTable = ({ |
|
|
|
|
{row.isExpanded ? ( |
|
|
|
|
<tr> |
|
|
|
|
<td colSpan={headerGroups[0].headers.length}> |
|
|
|
|
{/* {RenderRowSubComponent({ |
|
|
|
|
row: row.original, |
|
|
|
|
columns, |
|
|
|
|
addTab, |
|
|
|
|
})} */} |
|
|
|
|
{/* {RenderRowSubComponent({ row: row.values })} */} |
|
|
|
|
<RenderRowSubComponent |
|
|
|
|
columns={columns} |
|
|
|
|
addTab={addTab} |
|
|
|
|
@ -412,7 +261,7 @@ const BasicTable = ({ |
|
|
|
|
</table> |
|
|
|
|
)} |
|
|
|
|
{/* GRID LIST */} |
|
|
|
|
{activeList === false && ( |
|
|
|
|
{activeList === true && ( |
|
|
|
|
<div |
|
|
|
|
{...getTableBodyProps()} |
|
|
|
|
className="flex flex-row flex-wrap gap-4 items-center justify-center" |
|
|
|
|
@ -426,7 +275,6 @@ const BasicTable = ({ |
|
|
|
|
key={index} |
|
|
|
|
style={{ backgroundColor: "#F3F3F3" }} |
|
|
|
|
> |
|
|
|
|
{/* {console.log(row.values)} */} |
|
|
|
|
<input type="checkbox" /> |
|
|
|
|
<div className="bg-red-500"> {row.original.Checkbox}</div> |
|
|
|
|
<img |
|
|
|
|
@ -443,17 +291,6 @@ const BasicTable = ({ |
|
|
|
|
})} |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{/* bottom table */} |
|
|
|
|
{goToPage && ( |
|
|
|
|
<GoToPage |
|
|
|
|
pageIndex={pageIndex} |
|
|
|
|
gotoPage={gotoPage} |
|
|
|
|
pageOptions={pageOptions} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
{showMore && ( |
|
|
|
|
<ShowMoreRows pageSize={pageSize} setPageSize={setPageSize} /> |
|
|
|
|
)} |
|
|
|
|
</> |
|
|
|
|
) : ( |
|
|
|
|
<EditRow |
|
|
|
|
@ -470,16 +307,4 @@ const BasicTable = ({ |
|
|
|
|
|
|
|
|
|
export default BasicTable; |
|
|
|
|
|
|
|
|
|
BasicTable.defaultProps = { |
|
|
|
|
settingsIcon: true, |
|
|
|
|
|
|
|
|
|
thead: false, |
|
|
|
|
goToPage: false, |
|
|
|
|
showMore: false, |
|
|
|
|
filterBarDefault: false, |
|
|
|
|
|
|
|
|
|
// listView: [
|
|
|
|
|
// { icon: grid, click: () => setActiveList(false) },
|
|
|
|
|
// { icon: list, click: () => setActiveList(true) },
|
|
|
|
|
// ],
|
|
|
|
|
}; |
|
|
|
|
BasicTable.defaultProps = {}; |
|
|
|
|
|
