I am trying to find out how to get the number of selected rows from react table. Also I would like to send the number of selected rows into another sibling component, which would enable or disable based on the number of rows selected(minimum of 10). Please Help. I would also be helpful if anyone could design a modal where I can edit a value of a selected row (only if a row is selected) in the table with value showing in edit modal.
import React, { useState } from 'react'
import { useMemo } from 'react'
import table from '../assets/json/mock.json'
import { useTable,useRowSelect, useSortBy, usePagination} from 'react-table';
import {useSticky} from 'react-table-sticky'
const Table =({columns,data})=> {
const IndeterminateCheckbox = React.forwardRef(
({ indeterminate, ...rest }, ref) => {
const defaultRef = React.useRef()
const resolvedRef = ref || defaultRef
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate
}, [resolvedRef, indeterminate])
return (
<>
<input type="checkbox" ref={resolvedRef} {...rest} />
</>
)
}
)
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
state,
gotoPage,
pageCount,
setPageSize,
selectedFlatRows,
prepareRow,
}=useTable({
columns,
data,
initialState : {pageIndex : 0}
},
useSortBy,usePagination,useRowSelect,
hooks => {
hooks.visibleColumns.push(columns => [
// Let's make a column for selection
{
id: 'selection',
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ getToggleAllRowsSelectedProps }) => (
<div>
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
</div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
<div>
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
</div>
),
},
...columns,
])
}
)
const {pageIndex,pageSize,selectedRowIds}=state
return (
<>
<table className="database-table sticky" {...getTableProps()}>
<thead className='header'>
{
headerGroups.map((headerGroup)=>
(
<tr {...headerGroup.getHeaderGroupProps()}>
{
headerGroup.headers.map((column) =>
(
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render(`Header`)}
<span>
{
column.isSorted ? (column.isSortedDesc ? '▼':'▲'):''
}
</span>
</th>
))
}
</tr>
))
}
</thead>
<tbody {...getTableBodyProps()}>
{
page.map((row)=>
{
prepareRow(row)
return(
<tr {...row.getRowProps()}>
{row.cells.map((cell)=>{
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})
}
</tbody>
</table>
<div className='header-bottom'>
{
headerGroups.map((headerGroup)=>
(
<tr {...headerGroup.getHeaderGroupProps()}>
{
headerGroup.headers.map((column) =>
(
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render(`Header`)}
<span>
{
column.isSorted ? (column.isSortedDesc ? '▼':'▲'):''
}
</span>
</th>
))
}
</tr>
))
}
</div>
<div className='table-footer'>
<div className='page-no'id='modal-item'>
Viewing : {pageIndex+1} of {pageOptions.length}
</div>
<span className ='copyright'>
© 2022 Highradius.All Rights Reserved
</span>
<span className='rowno' id='modal-item'>
Rows per Page :
<select value={pageSize} onChange={e=>setPageSize(Number(e.target.value))}>
{
[10,20,30,40,50].map(pageSize=>(
<option key={pageSize} value={pageSize}>
{pageSize }
</option>
))
}
</select>
</span>
<button button onClick={()=>previousPage()} disabled={!canPreviousPage} id='pag-btn'>{' < '}</button>
<button button onClick={()=>nextPage()} disabled={!canNextPage} id='pag-btn' >{' > '}</button>
</div>
</>
)
}
export default Table<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>