select row added

master
mahdi 3 years ago
parent 4dc6f2f540
commit 0d664a559d
  1. 396
      src/components/ReactTable3/BasicTable.js
  2. 16
      src/components/ReactTable3/Checkbox.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'; import { Checkbox } from "./Checkbox";
const BasicTable = () => {
import MOCK_DATA from "./MOCK_DATA.json";
const columns = React.useMemo(() => COLUMNS, []) const BasicTable = () => {
const data = useMemo(() => MOCK_DATA,[]) const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []);
const {
getTableProps, const {
getTableBodyProps, getTableProps,
headerGroups, getTableBodyProps,
footerGroups, headerGroups,
rows, footerGroups,
page, rows,
nextPage, page,
previousPage, nextPage,
canNextPage, previousPage,
canPreviousPage, canNextPage,
pageOptions, canPreviousPage,
gotoPage, pageOptions,
pageCount, gotoPage,
setPageSize, pageCount,
prepareRow, setPageSize,
state, prepareRow,
setGlobalFilter, selectedFlatRows,
} = useTable({ state,
columns, setGlobalFilter,
data, } = useTable(
// initialState: { pageIndex: 2 } {
columns,
data,
// initialState: { pageIndex: 2 }
}, },
useFilters, useFilters,
useGlobalFilter, useGlobalFilter,
useSortBy, useSortBy,
usePagination, usePagination,
) useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => {
const { globalFilter, pageIndex, pageSize } = state return [
{
return ( id: "selection",
Header: ({ getToggleAllRowsSelectedProps }) => (
<> <Checkbox {...getToggleAllRowsSelectedProps()} />
),
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> Cell: ({ row }) => (
<Checkbox {...row.getToggleRowSelectedProps()} />
<table {...getTableProps()} className="min-w-full divide-y divide-gray-200"> ),
},
<thead className="bg-gray-300"> ...columns,
{headerGroups.map((headerGroup) => ( ];
<tr {...headerGroup.getHeaderGroupProps()}> });
{headerGroup.headers.map((column) => ( }
<th {...column.getHeaderProps(column.getSortByToggleProps())} scope="col" className="cursor-pointer px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}> );
{column.render('Header')}
<span> const { globalFilter, pageIndex, pageSize } = state;
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''} const firstPageRows = rows.slice(0, 10);
</span>
{/* <div> return (
<>
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-300">
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps(column.getSortByToggleProps())}
scope="col"
className="cursor-pointer px-4 py-2 text-right text-xs"
style={{ color: "#3287B9" }}
>
{column.render("Header")}
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
{/* <div>
{column.canFilter ? column.render('Filter') : null } {column.canFilter ? column.render('Filter') : null }
</div> */} </div> */}
</th> </th>
))} ))}
</tr> </tr>
))} ))}
</thead> </thead>
<tbody {...getTableBodyProps()} className="bg-white divide-y divide-gray-200"> <tbody
{/* {rows.map((row) => { {...getTableBodyProps()}
className="bg-white divide-y divide-gray-200"
>
{/* {rows.map((row) => {
prepareRow(row) prepareRow(row)
return( return(
<tr {...row.getRowProps()}> <tr {...row.getRowProps()}>
@ -85,97 +124,140 @@ const BasicTable = () => {
</tr> </tr>
) )
})} */} })} */}
{page.map((row) => { {page.map((row) => {
prepareRow(row) prepareRow(row);
return( return (
<tr {...row.getRowProps()}> <tr {...row.getRowProps()}>
{row.cells.map((cell) => { {row.cells.map((cell) => {
return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}> return (
{cell.render('Cell')} <td
</td> {...cell.getCellProps()}
})} className="px-4 py-4 whitespace-nowrap text-sm"
</tr> role="cell"
) style={{ color: "#00253A" }}
})} >
</tbody> {cell.render("Cell")}
</td>
<tfoot className={`bg-gray-300 ${rows.length > 10 ? 'w-full' : 'hidden'}`} > );
{ })}
footerGroups.map(footerGroup => ( </tr>
<tr {...footerGroup.getFooterGroupProps()}> );
{ })}
footerGroup.headers.map(column => (
<td {...column.getFooterProps} className="px-4 py-2 text-right text-xs" style={{color: '#3287B9'}}> {/* {firstPageRows.map((row) => {
{ prepareRow(row);
column.render('Footer') return (
} <tr {...row.getRowProps()}>
</td> {row.cells.map((cell) => {
)) return (
} <td
</tr> {...cell.getCellProps()}
)) className="px-4 py-4 whitespace-nowrap text-sm"
} role="cell"
</tfoot> style={{ color: "#00253A" }}
>
</table> {cell.render("Cell")}
</td>
<div> );
})}
<span> </tr>
);
Page{' '} })} */}
</tbody>
<strong>
{pageIndex + 1} of {pageOptions.length} <tfoot
</strong>{''} className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`}
>
</span> {footerGroups.map((footerGroup) => (
<tr {...footerGroup.getFooterGroupProps()}>
<span> {footerGroup.headers.map((column) => (
<td
| Go to Page: {' '} {...column.getFooterProps}
className="px-4 py-2 text-right text-xs"
<input type='number' style={{ color: "#3287B9" }}
defaultValue={ pageIndex + 1 }
onChange={ (e) => {
const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0
gotoPage(pageNumber)
} }
style={{ width: '50px' }}
/>
</span>
<select
value={pageSize}
onChange={ (e) => setPageSize(Number(e.target.value)) }
> >
{column.render("Footer")}
{ </td>
[7, 10, 25, 50].map(pageSize => ( ))}
</tr>
<option key={ pageSize } value={ pageSize }> ))}
Show { pageSize } </tfoot>
</option> </table>
)) <pre>
} <code>
{JSON.stringify(
</select> {
selectedFlatRows: selectedFlatRows.map((row) => row.original),
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}> { '<<' } </button> },
null,
<button className="bg-blue-400 m-2 rounded text-white p-2" onClick={() => previousPage() } disabled={!canPreviousPage} >Previous</button> 2
<button className="bg-blue-400 m-2 rounded text-white p-2" onClick={() => nextPage() } disabled={!canNextPage}>Next</button> )}
</code>
<button onClick={() => gotoPage( pageCount - 1 )} disabled={!canNextPage}> { '>>' } </button> </pre>
</div> <div>
<span>
</> Page{" "}
<strong>
) {pageIndex + 1} of {pageOptions.length}
</strong>
{""}
</span>
<span>
| Go to Page:{" "}
<input
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>
</span>
<select
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
{[7, 10, 25, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
{" "}
{"<<"}{" "}
</button>
<button
className="bg-blue-400 m-2 rounded text-white p-2"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="bg-blue-400 m-2 rounded text-white p-2"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
{" "}
{">>"}{" "}
</button>
</div>
</>
);
}; };
export default BasicTable; export default BasicTable;

@ -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 (
<>
<input type="checkbox" ref={resolvedRef} {...rest} />
</>
);
});
Loading…
Cancel
Save