Responsive MDB DATA TABLES IN REACT

senteu

Hi,
I want to make the table rendered, to be mobile responsive. When I was building the app, I built it as a web app but I have seen it important to build it to fit mobile screen view. Kindly assist.

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Row, Col, Button, Card } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { MDBDataTableV5 } from 'mdbreact';
import Loader from '../Loader';
import Message from '../Message';
import { LinkContainer } from 'react-router-bootstrap';
import { deleteMeeting, getAllMeetings } from '../actions/meetingAction';
import './cards.css';
import DataTable from 'react-data-table-component';

//import Meetingdetails from './mobilecards/Meetingdetails';

const Meetings = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(getAllMeetings());
}, []);
const meetingList = useSelector((state) => state.meetingList);

const { meetings, error, loading } = meetingList;
const handleDelete = (id) => {
if (window.confirm('Are you sure you want to delete this record?')) {
dispatch(deleteMeeting(id));
}
};
const data = {
columns: [
{
label: 'Name',
field: 'name',
selector: rows => rows.name,
responsive: true,
sortable:true

  },

  {
    label: 'Venue',
    field: 'venue',
    selector: rows => rows.venue,
    responsive: true,
    sortable: true,

  },

  {
    label: 'Purpose',
    field: 'purpose',
    selector: rows => rows.purpose,
    responsive: true,
    sortable: true
  },
  {
    label: 'Date',
    field: 'date',
    selector: rows => rows.date,
    responsive: true,
    sortable: true
  },

  {
    label: 'Action',
    field: 'update',
    selector: rows => rows.update,
    responsive: true,
    sortable: true
  }
],
rows:
  meetings &&
  meetings.length &&
  meetings.map((meeting) => {
    return {

      name: meeting.name,
      venue: meeting.venue,
      purpose: meeting.purpose,
      date: new Date(meeting.date).toLocaleDateString(),
      update: (
        <>

          <LinkContainer to={`/meeting/${meeting.id}`}>
            <Button variant='success' className='btn-sm mr-2'>
              <i className='fas fa-angle-double-right'></i>
            </Button>
          </LinkContainer>{' '}
          {'  '}
          <Button
            variant='danger'
            className='btn-sm mr-2'
            onClick={() => {
              handleDelete(meeting.id);
            }}
          >
            <i className='fas fa-trash'></i>
          </Button>
        </>
      )
    };
  })

};
return (

<div>
  <>
    <Row className='dflex justify-content-center'>
      <Col className='mt-5 col-lg-8'>
        <h3 className='text-primary text-left'>
          ALL MEETINGS
        </h3>
        <span style={{ float: 'center' }}>
          <Link to='/registermeeting'>
            <Button className='btn btn-sm'> New Meeting</Button>
          </Link>
        </span>
        <hr />
      </Col>
    </Row>

    {/* {meetings?.length > 0 &&
    meetings.map((meeting) => <Meetingdetails student={meeting}></Meetingdetails>)} */}


    {/* <Row className='dflex justify-content-center'>

    <Col className='col-lg-8 col-md-10d '> */}


      {loading ? (
        <Loader />
      ) : error ? (
        <Message variant='danger' children={error} />
      ) : (

        <MDBDataTableV5
          exportToCSV
          Pagination
          responsive
          //columns={columns}
          data={data}

        />



      )}



    {/* </Col>
  </Row>  */}

  </>

</div>

);
};

export default Meetings;

kthorngren

It looks like you are on the wrong forum. This is for a library called Datatables but is not the react-data-table-component you are importing. You will want to refer to their docs and use their support tools to help with your questions.

Kevin