import React, { useMemo, useState } from "react"; import TabBar from "../ReactTable3/TabBar"; import Tabbar from "./Tabbar"; import MOCK_DATA from "./MOCK_DATA.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 RenderRowSubComponent from "./RenderRowSubComponent"; import EditRow from "./EditRow"; import { useTable, useSortBy, useGlobalFilter, useFilters, usePagination, useRowSelect, useColumnOrder, useExpanded, } from "react-table"; const BasicTable = ({ settingsIcon, addTab, tabs, delTab, setActivateTab, activeTab, }) => { const data = useMemo(() => MOCK_DATA, []); // console.log(data); 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", 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 */} {activeTab == 0 ? ( <> {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) => { return ( ); })} {row.isExpanded ? ( ) : null} ); })} 5 ? "w-full" : "hidden"}`} > {footerGroups.map((footerGroup, index) => ( {footerGroup.headers.map((column, index) => ( ))} ))}
{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)}
{column.render("Footer")}
{/* bottom table */} ) : ( e.original && +e.original.id === activeTab) ?.original || {} } columns={defaultColumn} /> )} {/*
        
          {JSON.stringify(
            {
              selectedFlatRows: selectedFlatRows.map((row) => row.original),
            },
            null,
            2
          )}
        
      
*/} ); }; export default BasicTable; BasicTable.defaultProps = { settingsIcon: true, };