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 ; }; 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 }) => ( ), Cell: ({ row }) => ( ), }, ...columns, ]; }); } ); const { globalFilter, pageIndex, pageSize } = state; return ( <>
{/* right box */} {/*
*/} {/* left box */} {activeTab == 0 ? (
{/* search box */} {/* pagination */}
{/* go to page */} {/* vertical line */}
{/* arrows */}
{/* settings icon */} {settingsIcon && ( )}
) : null}
{/* table LIST */} {activeTab == 0 ? ( <> {thead && ( {headerGroups.map((headerGroup, index) => ( {headerGroup.headers.map((column) => ( ))} ))} )} {/* filter row */} {filtering && ( {headerGroups.map((headerGroup, index) => ( {headerGroup.headers.map((column) => ( ))} ))} )} {page.map((row, idx) => { prepareRow(row); return ( {row.cells.map((cell, index) => { console.log(row.cells); return ( ); })} {row.isExpanded ? ( ) : null} ); })}
{column.render("Header")} {column.isSorted ? column.isSortedDesc ? " 🔽" : " 🔼" : ""}
{column.canFilter ? column.render("Filter") : null}
{cell.render("Cell")}
{/* {RenderRowSubComponent({ row: row.original, columns, addTab, })} */} {/* {RenderRowSubComponent({ row: row.values })} */} {console.log(row.original)}
{/* bottom table */} ) : ( e.original && +e.original.id === activeTab) ?.original || {} } columns={defaultColumn} /> )} {/* GRID LIST */}
{data.map((item, index) => (

{item.fileName}

{item.fileSize}
))}
); }; export default BasicTable; BasicTable.defaultProps = { settingsIcon: true, thead: false, };