You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

376 lines
11 KiB

import React, { useMemo, useState } from "react";
import "./index.scss";
import Tabbar from "./Tabbar";
import MOCK_DATA2 from "./MOCK_DATA2.json";
import { ColumnSearch } from "./ColumnSearch";
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 grid from "./grid.svg";
import list from "./list.svg";
import image1 from "./images/image1.svg";
import RenderRowSubComponent from "./RenderRowSubComponent";
import EditRow from "./EditRow";
import {
useTable,
useSortBy,
useGlobalFilter,
useFilters,
usePagination,
useRowSelect,
useColumnOrder,
useExpanded,
} from "react-table";
const BasicTable = ({
settingsIcon,
thead,
addTab,
tabs,
delTab,
setActivateTab,
activeTab,
}) => {
const data = useMemo(() => MOCK_DATA2, []);
// console.log(data);
// console.log(MOCK_DATA2);
const EditableCell = ({
value: initialValue,
row: { index },
column: { id },
updateMyData, // This is a custom function that we supplied to our table instance
}) => {
// We need to keep and update the state of the cell normally
const [value, setValue] = React.useState(initialValue);
const onChange = (e) => {
setValue(e.target.value);
};
// We'll only update the external data when the input is blurred
const onBlur = () => {
updateMyData(index, id, value);
};
// If the initialValue is changed external, sync it up with our state
React.useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return <input value={value} onChange={onChange} onBlur={onBlur} />;
};
const [filtering, setFiltering] = useState(false);
const columns = React.useMemo(
() => COLUMNS({ filtering, setFiltering, addTab }),
[]
);
// const defaultColumn = {
// Cell: EditableCell,
// };
// یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
const defaultColumn = useMemo(() => {
return {
Filter: ColumnSearch,
};
}, []);
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
const isEven = (idx) => idx % 2 === 0;
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
setPageSize,
prepareRow,
allColumns,
getToggleHideAllColumnsProps,
setColumnOrder,
selectedFlatRows,
state,
setGlobalFilter,
resetResizing,
} = useTable(
{
columns,
data,
defaultColumn,
},
useColumnOrder,
useFilters,
useGlobalFilter,
useSortBy,
useExpanded,
usePagination,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => {
return [
{
id: "selection",
className: "w-7",
Header: ({ getToggleAllRowsSelectedProps }) => (
<Checkbox {...getToggleAllRowsSelectedProps()} />
),
Cell: ({ row }) => (
<Checkbox {...row.getToggleRowSelectedProps()} />
),
},
...columns,
];
});
}
);
const { globalFilter, pageIndex, pageSize } = state;
return (
<>
<img src={list} className="cursor-pointer my-5" />
<img src={grid} className="cursor-pointer my-5" />
<div className="flex flex-row items-center justify-between">
{/* right box */}
<di className="bg-red-400">
<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>
{/* table LIST */}
{activeTab == 0 ? (
<>
<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>
)}
{/* filter row */}
{filtering && (
<thead style={{ backgroundColor: "#F1F5FE" }}>
{headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps()}
className="py-2 px-4 text-sm"
>
{column.canFilter ? column.render("Filter") : null}
</th>
))}
</tr>
))}
</thead>
)}
<tbody
{...getTableBodyProps()}
className="divide-y divide-gray-200"
>
{page.map((row, idx) => {
prepareRow(row);
return (
<React.Fragment key={idx}>
<tr
{...row.getRowProps()}
style={{
backgroundColor: isEven(idx) ? "#F9F9F9" : "#fff",
}}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
//
>
{row.cells.map((cell, index) => {
console.log(row.cells);
return (
<td
{...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")}
</td>
);
})}
</tr>
{row.isExpanded ? (
<tr>
<td colSpan={headerGroups[0].headers.length}>
{/* {RenderRowSubComponent({
row: row.original,
columns,
addTab,
})} */}
{/* {RenderRowSubComponent({ row: row.values })} */}
<RenderRowSubComponent
columns={columns}
addTab={addTab}
row={row.original}
/>
{console.log(row.original)}
</td>
</tr>
) : null}
</React.Fragment>
);
})}
</tbody>
</table>
{/* bottom table */}
<GoToPage
pageIndex={pageIndex}
gotoPage={gotoPage}
pageOptions={pageOptions}
/>
<ShowMoreRows pageSize={pageSize} setPageSize={setPageSize} />
</>
) : (
<EditRow
row={
rows.find((e) => e.original && +e.original.id === activeTab)
?.original || {}
}
columns={defaultColumn}
/>
)}
{/* GRID LIST */}
<div className="flex flex-row gap-4">
{data.map((item, index) => (
<div
className="flex flex-col px-4 py-5 rounded-md"
key={index}
style={{ backgroundColor: "#fff" }}
>
<img src={image1} className="w-52" />
<p className="text-sm my-3">{item.fileName}</p>
<span className="text-xs text-left text-gray-500">
{item.fileSize}
</span>
</div>
))}
</div>
</>
);
};
export default BasicTable;
BasicTable.defaultProps = {
settingsIcon: true,
thead: false,
};