From 0d664a559d590690ee8ab95059ddb92d09a77793 Mon Sep 17 00:00:00 2001 From: mahdi Date: Mon, 7 Feb 2022 08:38:52 +0330 Subject: [PATCH] select row added --- src/components/ReactTable3/BasicTable.js | 396 ++++++++++++++--------- src/components/ReactTable3/Checkbox.js | 16 + 2 files changed, 255 insertions(+), 157 deletions(-) create mode 100644 src/components/ReactTable3/Checkbox.js diff --git a/src/components/ReactTable3/BasicTable.js b/src/components/ReactTable3/BasicTable.js index 2d98395..11c5468 100644 --- a/src/components/ReactTable3/BasicTable.js +++ b/src/components/ReactTable3/BasicTable.js @@ -1,79 +1,118 @@ -import React, {useMemo} from 'react'; +import React, { useMemo } from "react"; -import {useTable, useSortBy, useGlobalFilter, useFilters, usePagination} from 'react-table'; +import { + useTable, + useSortBy, + useGlobalFilter, + useFilters, + usePagination, + useRowSelect, + useColumnOrder, +} from "react-table"; -import {COLUMNS} from './columns'; +import { COLUMNS } from "./columns"; -import {GlobalFilter} from './GlobalFilter'; +import { GlobalFilter } from "./GlobalFilter"; -import MOCK_DATA from './MOCK_DATA.json'; - -const BasicTable = () => { +import { Checkbox } from "./Checkbox"; +import MOCK_DATA from "./MOCK_DATA.json"; - const columns = React.useMemo(() => COLUMNS, []) - const data = useMemo(() => MOCK_DATA,[]) - - const { - getTableProps, - getTableBodyProps, - headerGroups, - footerGroups, - rows, - page, - nextPage, - previousPage, - canNextPage, - canPreviousPage, - pageOptions, - gotoPage, - pageCount, - setPageSize, - prepareRow, - state, - setGlobalFilter, - } = useTable({ - columns, - data, - // initialState: { pageIndex: 2 } +const BasicTable = () => { + const columns = React.useMemo(() => COLUMNS, []); + const data = useMemo(() => MOCK_DATA, []); + + const { + getTableProps, + getTableBodyProps, + headerGroups, + footerGroups, + rows, + page, + nextPage, + previousPage, + canNextPage, + canPreviousPage, + pageOptions, + gotoPage, + pageCount, + setPageSize, + prepareRow, + selectedFlatRows, + state, + setGlobalFilter, + } = useTable( + { + columns, + data, + // initialState: { pageIndex: 2 } }, - useFilters, - useGlobalFilter, - useSortBy, - usePagination, - ) - - - const { globalFilter, pageIndex, pageSize } = state - - return ( - - <> - - - - - - - {headerGroups.map((headerGroup) => ( - - {headerGroup.headers.map((column) => ( - + {row.cells.map((cell) => { + return ( + + ); + })} + + ); + })} + + {/* {firstPageRows.map((row) => { + prepareRow(row); + return ( + + {row.cells.map((cell) => { + return ( + + ); + })} + + ); + })} */} + + + 10 ? "w-full" : "hidden"}`} + > + {footerGroups.map((footerGroup) => ( + + {footerGroup.headers.map((column) => ( + + ))} + + ))} + +
- {column.render('Header')} - - {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''} - - {/*
+ useFilters, + useGlobalFilter, + useSortBy, + usePagination, + useRowSelect, + (hooks) => { + hooks.visibleColumns.push((columns) => { + return [ + { + id: "selection", + Header: ({ getToggleAllRowsSelectedProps }) => ( + + ), + Cell: ({ row }) => ( + + ), + }, + ...columns, + ]; + }); + } + ); + + const { globalFilter, pageIndex, pageSize } = state; + const firstPageRows = rows.slice(0, 10); + + return ( + <> + + + + + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column) => ( + - ))} - - ))} - - - - {/* {rows.map((row) => { + + ))} + + ))} + + + + {/* {rows.map((row) => { prepareRow(row) return( @@ -85,97 +124,140 @@ const BasicTable = () => { ) })} */} - {page.map((row) => { - prepareRow(row) - return( - - {row.cells.map((cell) => { - return - })} - - ) - })} - - - 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')} -
- { - column.render('Footer') - } -
- -
- - - - Page{' '} - - - {pageIndex + 1} of {pageOptions.length} - {''} - - - - - - | Go to Page: {' '} - - { - const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0 - gotoPage(pageNumber) - } } - style={{ width: '50px' }} - /> - - - -
+ {cell.render("Cell")} +
+ {cell.render("Cell")} +
- - { - [7, 10, 25, 50].map(pageSize => ( - - - - )) - } - - - - - - - - - - - - - - - ) - + {column.render("Footer")} +
+ +
+        
+          {JSON.stringify(
+            {
+              selectedFlatRows: selectedFlatRows.map((row) => row.original),
+            },
+            null,
+            2
+          )}
+        
+      
+ +
+ + Page{" "} + + {pageIndex + 1} of {pageOptions.length} + + {""} + + + + | Go to Page:{" "} + { + const pageNumber = e.target.value + ? Number(e.target.value) - 1 + : 0; + gotoPage(pageNumber); + }} + style={{ width: "50px" }} + /> + + + + + + + + + + +
+ + ); }; export default BasicTable; diff --git a/src/components/ReactTable3/Checkbox.js b/src/components/ReactTable3/Checkbox.js new file mode 100644 index 0000000..7a63ae4 --- /dev/null +++ b/src/components/ReactTable3/Checkbox.js @@ -0,0 +1,16 @@ +import React from "react"; + +export const Checkbox = React.forwardRef(({ indeterminate, ...rest }, ref) => { + const defaultRef = React.useRef(); + const resolvedRef = ref || defaultRef; + + React.useEffect(() => { + resolvedRef.current.indeterminate = indeterminate; + }, [resolvedRef, indeterminate]); + + return ( + <> + + + ); +});