import React, { useMemo } from "react"; import "./index.scss"; import { ColumnSearch } from "./ColumnSearch.js"; import { useTable, useSortBy, useGlobalFilter, useFilters, usePagination, useRowSelect, useColumnOrder, useExpanded, } from "react-table"; import { COLUMNS } from "./columns"; import { GlobalFilter } from "./GlobalFilter"; import { Pagination } from "./Pagination"; import { GoToPage } from "./GoToPage"; import { Settings } from "./Settings"; import { Checkbox } from "./Checkbox"; import MOCK_DATA from "./MOCK_DATA.json"; const BasicTable = ({ settingsIcon }) => { const columns = React.useMemo(() => COLUMNS, []); const data = useMemo(() => MOCK_DATA, []); 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 changeOrder = () => { setColumnOrder([ "name", "order-number", "user-job", "order-level", "order-status", "order-price", ]); }; const { globalFilter, pageIndex, pageSize } = state; // const firstPageRows = rows.slice(0, 10); return ( <> {/* toggle columns */} {/*
Toggle All
{allColumns.map((column) => (
))}
*/} {/* Change Column Order */} {/* */}
{/* left box */}
{/* search box */} {/* pagination */}
{/* go to page */} {/* vertical line */}
{/* arrows */}
{/* settings icon */} {settingsIcon && }
{headerGroups.map((headerGroup) => ( {headerGroup.headers.map((column) => ( ))} ))} {/* filters */} {headerGroups.map((headerGroup) => ( {headerGroup.headers.map((column) => ( ))} ))} {page.map((row, idx) => { prepareRow(row); return ( {row.cells.map((cell) => { return ( ); })} {row.isExpanded ? ( ) : null} ); })} 10 ? "w-full" : "hidden"}`} > {footerGroups.map((footerGroup) => ( {footerGroup.headers.map((column) => ( ))} ))}
{column.render("Header")} {column.isSorted ? column.isSortedDesc ? " 🔽" : " 🔼" : ""}
{column.canFilter ? column.render("Filter") : null}
{cell.render("Cell")}
{renderRowSubComponent({ rows: row.original })} {/* {renderRowSubComponent({ row: row.values })} */}
{column.render("Footer")}
        
          {JSON.stringify(
            {
              selectedFlatRows: selectedFlatRows.map((row) => row.original),
            },
            null,
            2
          )}
        
      
{/* صفحه{" "} {pageIndex + 1} از {pageOptions.length} {""} */} صفحه{" "} { const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0; gotoPage(pageNumber); }} style={{ width: "50px" }} />{" "} از {pageOptions.length} {""}
); }; function renderRowSubComponent({ rows }) { const persian = { weight: "وزن", pageNumber: "تعداد صفحات", pageType: "نوع کاغذ", bookNumber: "شماره شابک", publisher: "انتشارات", author: "نویسنده", bookType: "قطع", publishedYear: "سال انتشار", }; return (
مبلغ: {rows.history}
); } export default BasicTable; BasicTable.defaultProps = { settingsIcon: true, };