import React, { useMemo } from "react";
import {
useTable,
useSortBy,
useGlobalFilter,
useFilters,
usePagination,
useRowSelect,
useColumnOrder,
useResizeColumns
} from "react-table";
import { COLUMNS } from "./columns";
import { GlobalFilter } from "./GlobalFilter";
import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json";
const BasicTable = () => {
const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []);
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
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,
// initialState: { pageIndex: 2 }
},
useColumnOrder,
useFilters,
useGlobalFilter,
useSortBy,
usePagination,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => {
return [
{
id: "selection",
Header: ({ getToggleAllRowsSelectedProps }) => (
{column.render("Header")} {column.isSorted ? column.isSortedDesc ? " 🔽" : " 🔼" : ""} | ))}
---|
{cell.render("Cell")} | ); })}
{column.render("Footer")} | ))}
{JSON.stringify(
{
selectedFlatRows: selectedFlatRows.map((row) => row.original),
},
null,
2
)}
*/}