master
mahdi andalib 3 years ago
parent a7f92e1447
commit f6c6b9c3c8
  1. BIN
      build.zip
  2. 106
      src/App.js
  3. 187
      src/components/ReactTable5/BasicTable.js
  4. 4
      src/components/ReactTable5/COLUMNS.js
  5. 22
      src/components/ReactTable5/MOCK_DATA2.json

Binary file not shown.

@ -66,66 +66,66 @@ function App() {
return (
<Provider store={store}>
<div className="App">
{/* <ProductDesign />
<VodProductDesign />
<VodProduct />
<VodProductNew />
<BookDesign />
<ButtonDesign />
<ProductTags />
<CounterDesign />
<BlogDesign1 />
<BlogDesign2 />
<BlogDesign3 />
<BlogDesign4 />
<BlogDesign5 />
<BlogDesign6 />
<ContactInfoSection /> */}
<Testttt />
<Design2D />
<Features />
<Feedback />
<Alert />
<Toast />
<ProductSuggestion />
<ProductImage />
<ProductTab />
<ProductStatusCard />
<AdvertisementDesign1 />
<AdvertisementDesign2 />
<AdvertisementDesign3 />
<CourseChapter />
<SidebarMenu />
<SimpleBarChart />
<SpecifiedDomainRadarChart />
<Design1 />
<Design2 />
<TableDesign1 />
<ReactTable2 />
<ReactTable3 />
<ReactTable4 />
{/* <ProductDesign /> */}
{/* <VodProductDesign /> */}
{/* <VodProduct /> */}
{/* <VodProductNew /> */}
{/* <BookDesign /> */}
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}
{/* <CounterDesign /> */}
{/* <BlogDesign1 /> */}
{/* <BlogDesign2 /> */}
{/* <BlogDesign3 /> */}
{/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
{/* <ContactInfoSection /> */}
{/* <Testttt /> */}
{/* <Design2D /> */}
{/* <Features /> */}
{/* <Feedback /> */}
{/* <Alert /> */}
{/* <Toast /> */}
{/* <ProductSuggestion /> */}
{/* <ProductImage /> */}
{/* <ProductTab /> */}
{/* <ProductStatusCard /> */}
{/* <AdvertisementDesign1 /> */}
{/* <AdvertisementDesign2 /> */}
{/* <AdvertisementDesign3 /> */}
{/* <CourseChapter /> */}
{/* <SidebarMenu /> */}
{/* <SimpleBarChart /> */}
{/* <SpecifiedDomainRadarChart /> */}
{/* <Design1 /> */}
{/* <Design2 /> */}
{/* <TableDesign1 /> */}
{/* <ReactTable2 /> */}
{/* <ReactTable3 /> */}
{/* <ReactTable4 /> */}
<ReactTable5 />
<Digikala />
<HeaderDesign1 />
<div className="flex">
{/* <Digikala /> */}
{/* <HeaderDesign1 /> */}
{/* <div className="flex">
<SidebarDesign2 className="w-1/5" />
<span className="w-4/5 ">
<ReactTable4 />
<FooterDesign1 />
</span>
</div>
<BreadCrumb />
<SearchBox />
<FileManager />
<Playlist />
<Folderlists />
<Blogs />
<CardHolder />
<UploadFile />
<BarChartApex />
<SemiDonut />
</div> */}
{/* <BreadCrumb /> */}
{/* <SearchBox /> */}
{/* <FileManager /> */}
{/* <Playlist /> */}
{/* <Folderlists /> */}
{/* <Blogs /> */}
{/* <CardHolder /> */}
{/* <UploadFile /> */}
{/* <BarChartApex /> */}
{/* <SemiDonut /> */}
{/* <FolderTree /> */}
<GridListTable />
{/* <GridListTable /> */}
{/* <SidebarDesign2 className="w-1/5" /> */}
</div>

@ -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 = {};

@ -17,8 +17,8 @@ export const COLUMNS = ({ toggelChekedItems, refChekedItems }) => [
Header: "ایکن فایل",
accessor: "filePic",
disableSortBy: true,
className: "bg-blue-500 w-10",
Cell: ({ value }) => <img alt="" src={value} className="w-10" />,
className: "w-16",
Cell: ({ value }) => <img alt="" src={value} className="" />,
},
{
Header: "نام فایل",

@ -1,7 +1,7 @@
[
{
"id": 1,
"filePic": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png",
"filePic": "https://img.icons8.com/external-xnimrodx-lineal-color-xnimrodx/2x/external-jpg-graphic-design-xnimrodx-lineal-color-xnimrodx.png",
"fileName": "تهران شهری برای آیندگان",
"fileType": 1,
"fileSize": "23.5KB",
@ -9,7 +9,7 @@
},
{
"id": 2,
"filePic": "picture",
"filePic": "https://img.icons8.com/stickers/2x/png.png",
"fileName": "عکس سال 99 نوروز",
"fileType": 2,
"fileSize": "69.5KB",
@ -17,7 +17,7 @@
},
{
"id": 3,
"filePic": "picture",
"filePic": "https://img.icons8.com/color/452/folder-invoices--v1.png",
"fileName": "دری به سوی بی نهایت",
"fileType": 3,
"fileSize": "1.5MB",
@ -25,7 +25,7 @@
},
{
"id": 4,
"filePic": "picture",
"filePic": "https://img.icons8.com/external-xnimrodx-lineal-color-xnimrodx/2x/external-jpg-graphic-design-xnimrodx-lineal-color-xnimrodx.png",
"fileName": "فایل اکسل دانش آموزان",
"fileType": 4,
"fileSize": "20MB",
@ -33,7 +33,7 @@
},
{
"id": 5,
"filePic": "picture",
"filePic": "https://img.icons8.com/external-xnimrodx-blue-xnimrodx/2x/external-video-advertising-xnimrodx-blue-xnimrodx-3.png",
"fileName": "صحرای بدون شن",
"fileType": 5,
"fileSize": "150MB",
@ -41,7 +41,7 @@
},
{
"id": 6,
"filePic": "picture",
"filePic": "https://img.icons8.com/color/2x/mp3.png",
"fileName": "فایل ایلاستریتور موارد اصلاحی طرح",
"fileType": 6,
"fileSize": "150MB",
@ -49,7 +49,7 @@
},
{
"id": 7,
"filePic": "picture",
"filePic": "https://img.icons8.com/external-xnimrodx-blue-xnimrodx/2x/external-video-advertising-xnimrodx-blue-xnimrodx-3.png",
"fileName": "تهران شهری برای آیندگان",
"fileType": 1,
"fileSize": "23.5KB",
@ -57,7 +57,7 @@
},
{
"id": 8,
"filePic": "picture",
"filePic": "https://img.icons8.com/external-xnimrodx-lineal-color-xnimrodx/2x/external-jpg-graphic-design-xnimrodx-lineal-color-xnimrodx.png",
"fileName": "عکس سال 99 نوروز",
"fileType": 2,
"fileSize": "69.5KB",
@ -65,7 +65,7 @@
},
{
"id": 9,
"filePic": "picture",
"filePic": "https://img.icons8.com/color/452/folder-invoices--v1.png",
"fileName": "دری به سوی بی نهایت",
"fileType": 3,
"fileSize": "1.5MB",
@ -73,10 +73,10 @@
},
{
"id": 10,
"filePic": "picture",
"filePic": "https://img.icons8.com/stickers/2x/png.png",
"fileName": "فایل اکسل دانش آموزان",
"fileType": 4,
"fileSize": "20MB",
"fileDate": "1397/04/20"
}
]
]

Loading…
Cancel
Save