mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

select row added

Browse Source
master
mahdi 3 years ago
parent 4dc6f2f540
commit 0d664a559d
2 changed files with 255 additions and 157 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 396
      src/components/ReactTable3/BasicTable.js
  2. 16
      src/components/ReactTable3/Checkbox.js

396
src/components/ReactTable3/BasicTable.js
Unescape View File

@ -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;

16
src/components/ReactTable3/Checkbox.js
Unescape View File

@ -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} />
</>
);
});
Write Preview
Loading…
Cancel
Save