import React, { useMemo, useState, useRef } from "react"; import "./index.scss"; import MOCK_DATA2 from "./MOCK_DATA2.json"; import { GlobalFilter } from "./GlobalFilter"; import { COLUMNS } from "./COLUMNS"; import grid from "./grid.svg"; import list from "./list.svg"; import graySearchIcon from "./gray-search-icon.svg"; import RenderRowSubComponent from "./RenderRowSubComponent"; import EditRow from "./EditRow"; import { useTable, useSortBy, useGlobalFilter, useFilters, usePagination, useRowSelect, useColumnOrder, useExpanded, } from "react-table"; import ButtonNewDesign from "../ButtonNewDesign"; export const SelectColumnFilter = ({ column: { filterValue, setFilter, preFilteredRows, id, render }, }) => { const options = React.useMemo(() => { const options = new Set(); preFilteredRows.forEach((row) => { options.add(row.values[id]); }); return [...options.values()]; }, [id, preFilteredRows]); return ( ); }; const BasicTable = ({ addTab, activeTab }) => { const data = useMemo(() => MOCK_DATA2, []); // console.log(data); // const [filtering, setFiltering] = useState(false); const [chekedItems, setChekedItems] = useState([]); const refChekedItems = useRef(chekedItems); refChekedItems.current = chekedItems; const toggelChekedItems = (id) => { const check = refChekedItems.current.includes(id); setChekedItems( check ? [...refChekedItems.current.filter((el) => el !== id)] : [...refChekedItems.current, id] ); }; const columns = React.useMemo( () => COLUMNS({ toggelChekedItems, refChekedItems }), [] ); const defaultColumn = useMemo(() => { return {}; }, []); // اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند const isEven = (idx) => idx % 2 === 0; const { getTableProps, getTableBodyProps, headerGroups, rows, page, prepareRow, state, setGlobalFilter, } = useTable( { columns, data, defaultColumn, }, useColumnOrder, useFilters, useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect ); const { globalFilter } = state; const [activeList, setActiveList] = useState(false); return (
setActiveList(false)} /> setActiveList(true)} />
{headerGroups.map((headerGroup) => headerGroup.headers.map((column) => column.Filter ? (
{column.render("Filter")}
) : null ) )} { setChekedItems( chekedItems.length < page.length ? page.map((e) => e.original.id) : [] ); }} />
{/* table LIST */} {activeTab === 0 ? ( <> {activeList === true && ( // table {page.map((row, idx) => { prepareRow(row); return ( toggelChekedItems(row.original.id)} className={ (isEven(idx) ? " bg-gray-100 " : " bg-white ") + (chekedItems.includes(row.original.id) ? isEven(idx) ? "bg-blue-200" : "bg-blue-100" : "") } > {row.cells.map((cell, index) => { return ( ); })} {row.isExpanded ? ( ) : null} ); })}
{cell.render("Cell")}
{console.log(row.original)}
)} {/* GRID LIST */} {activeList === false && (
{page.map((row, index) => { prepareRow(row); return (
{row.original.Checkbox}
{row.original.filePic}

{row.original.fileName}

{row.original.fileSize}
); })}
)} ) : ( e.original && +e.original.id === activeTab) ?.original || {} } columns={defaultColumn} /> )}
); }; export default BasicTable; BasicTable.defaultProps = {};