Advertisement
Guest User

Table.js

a guest
Apr 7th, 2020
179
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import map from 'lodash/map';
  3. import get from 'lodash/get';
  4. import { Link } from 'react-router-dom';
  5. import Button from 'reactstrap/lib/Button';
  6. import Table from 'reactstrap/lib/Table';
  7. import ModalConfirm from './ModalConfirm';
  8. import {
  9.     Container,
  10.     Row,
  11.     Col,
  12.     Pagination,
  13.     PaginationItem,
  14.     PaginationLink
  15. } from 'reactstrap';
  16. import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
  17. import {faTrash} from '@fortawesome/free-solid-svg-icons';
  18. import times from 'lodash/times';
  19. import ceil from 'lodash/ceil';
  20. import toNumber from 'lodash/toNumber';
  21.  
  22. export default ({ data, columns, headers, onSort, limit, total, onPageClick, currentPage, linkTo,  handleModal, onDelete, modalFlag}) => (
  23.     <Container fluid>
  24.         <Row>
  25.             <Col>
  26.                 <Table bordered size="sm" hovered dark className="table table-striped table-bordered text-center">
  27.                     <thead>
  28.                         <tr>
  29.                             {map(headers, header => (
  30.                                 <th onClick={() => onSort(header)}>
  31.                                     {header.label}
  32.                                     {header.sort === 'desc' && (<i className="fas fa-angle-up float-right" />)}
  33.                                     {header.sort !== 'desc' && (<i className="fas fa-angle-down float-right" />)}
  34.                                 </th>
  35.                             ))}
  36.                         </tr>
  37.                     </thead>
  38.                     <tbody>
  39.                         {map(data, d => (
  40.                             <tr key={d.id} className={d.deleted ? "bg-danger" : ""}>
  41.                                 {map(columns, column => {
  42.                                     if (column === 'actions') {
  43.                                         return (<td >
  44.                                             <Button tag={Link} color="primary" className="badge-pill" to={`${linkTo}/edit/${d.id}`}> Edición  </Button>
  45.                                             <Button
  46.                                                     onClick={() => handleModal(true, d.id)}
  47.                                                     color="danger"
  48.                                                 >
  49.                                                     <FontAwesomeIcon icon={faTrash}/>
  50.                                             </Button>  
  51.                                             {modalFlag && (
  52.                                             <ModalConfirm
  53.                                                 title="Confirme borrado"
  54.                                                 message="Estas por borrar"
  55.                                                 onDismiss={() => handleModal(null)}
  56.                                                 onAccept={() => onDelete(d.id)}
  57.                                             >
  58.                                                 <div> Testing </div>
  59.                                             </ModalConfirm>
  60.                                         )}
  61.                                         </td>);
  62.                                     }
  63.                                     return (<td>{get(d, column)}</td>);
  64.                                 })}
  65.                             </tr>
  66.                         ))}
  67.                     </tbody>
  68.                 </Table>
  69.                 <div align="center">
  70.                     <tfoot>
  71.                         <tr>
  72.                             <td colSpan={columns.length}>
  73.                                 <Pagination aria-label="Page navigation example">
  74.                                     <PaginationItem>
  75.                                         <PaginationLink first onClick={() => onPageClick(0)} />
  76.                                     </PaginationItem>
  77.                                     <PaginationItem>
  78.                                         <PaginationLink previous onClick={() => onPageClick(currentPage - 1)} />
  79.                                     </PaginationItem>
  80.                                     {times(ceil(total / toNumber(limit)), it => (
  81.                                         <PaginationItem>
  82.                                             <PaginationLink onClick={() => onPageClick(it)}>
  83.                                                 {it + 1}
  84.                                             </PaginationLink>
  85.                                         </PaginationItem>
  86.                                     ))}
  87.                                     <PaginationItem>
  88.                                         <PaginationLink next onClick={() => onPageClick(currentPage + 1)} />
  89.                                     </PaginationItem>
  90.  
  91.                                 </Pagination>
  92.  
  93.                             </td>
  94.                         </tr>
  95.                     </tfoot>
  96.                 </div>
  97.             </Col>
  98.         </Row>
  99.     </Container>
  100. )
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement