import React, { useMemo, useState } from "react"; import "./index.scss"; import { Tabbar } from "./index"; import MOCK_DATA from "./MOCK_DATA.json"; import { ColumnSearch } from "./ColumnSearch"; import { GlobalFilter } from "./GlobalFilter"; import { ToggleColumns } from "./ToggleColumns"; import { COLUMNS } from "./columns"; import { Pagination } from "./Pagination"; import { GoToPage } from "./GoToPage"; import { Settings } from "./Settings"; import { Checkbox } from "./Checkbox"; 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, []); const [filtering, setFiltering] = useState(false); const columns = React.useMemo( () => COLUMNS({ filtering, setFiltering, addTab }), [] ); 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 ( <> {/* toggle columns */}
{/* right box */}
{/* left box */} {activeTab == 0 ? (
{/* search box */} {/* pagination */}
{/* go to page */} {/* vertical line */}
{/* arrows */}
{/* settings icon */} {settingsIcon && }
) : null}
{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} ); })} 10 ? "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, })} {/* {RenderRowSubComponent({ row: row.values })} */}
{column.render("Footer")}
صفحه{" "} { const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0; gotoPage(pageNumber); }} style={{ width: "50px" }} />{" "} از {pageOptions.length} {""}
) : ( e.original && +e.original.id === activeTab) ?.original || {} } columns={columns} /> )} {/*
        
          {JSON.stringify(
            {
              selectedFlatRows: selectedFlatRows.map((row) => row.original),
            },
            null,
            2
          )}
        
      
*/} ); }; function EditRow({ row, columns }) { console.log(row); const persian = { weight: "وزن", pageNumber: "تعداد صفحات", pageType: "نوع کاغذ", bookNumber: "شماره شابک", publisher: "انتشارات", author: "نویسنده", bookType: "قطع", publishedYear: "سال انتشار", }; return (
{/* right */}
{/* 1 */}

نام و نام خانوادگی:

{/* 2 */}

تاریخ سفارش: {row.order_date}

{/* 3 */}

مبلغ سفارش: {row.order_price}

{/* 4 */}

شماره سفارش: {row.order_number}

{/* 5 */}

شغل کاربر: {row.user_job}

{/* 6 */}

وضعیت سفارش: {columns[5].Cell({ value: row.order_status })}

{/* 7 */}

سطح اهمیت: {columns[6].Cell({ value: row.order_level })}

{/* 8 */}

محل تولد: {row.birth_place}

{/* 9 */}

تلفن محل کار: {row.office_phone}

{/* 10 */}

تحصیلات: {row.education}

{/* 11 */}

تاریخ تولد: {row.birth_day}

{/* 12 */}

شغل: {row.job}

{/* 13 */}

دانشگاه: {row.uni}

{/* 14 */}

رشته تحصیلی: {row.field_study}

{/* 15 */}

اخلاق: {row.behaviour}

{/* 16 */}

نشانی: {row.address}

{/* left */}
); } function RenderRowSubComponent({ row, columns }) { console.log(row); const persian = { weight: "وزن", pageNumber: "تعداد صفحات", pageType: "نوع کاغذ", bookNumber: "شماره شابک", publisher: "انتشارات", author: "نویسنده", bookType: "قطع", publishedYear: "سال انتشار", }; return (
{/* right */}
{/* 1 */}

نام و نام خانوادگی: {row.name}

{/* 2 */}

تاریخ سفارش: {row.order_date}

{/* 3 */}

مبلغ سفارش: {row.order_price}

{/* 4 */}

شماره سفارش: {row.order_number}

{/* 5 */}

شغل کاربر: {row.user_job}

{/* 6 */}

وضعیت سفارش: {columns[5].Cell({ value: row.order_status })}

{/* 7 */}

سطح اهمیت: {columns[6].Cell({ value: row.order_level })}

{/* 8 */}

محل تولد: {row.birth_place}

{/* 9 */}

تلفن محل کار: {row.office_phone}

{/* 10 */}

تحصیلات: {row.education}

{/* 11 */}

تاریخ تولد: {row.birth_day}

{/* 12 */}

شغل: {row.job}

{/* 13 */}

دانشگاه: {row.uni}

{/* 14 */}

رشته تحصیلی: {row.field_study}

{/* 15 */}

اخلاق: {row.behaviour}

{/* 16 */}

نشانی: {row.address}

{/* left */}
); } export default BasicTable; BasicTable.defaultProps = { settingsIcon: true, };