gregnb / gregnb/mui-datatables
MUIDataTable onRowSelectionChange does not work with setState
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
Im trying to update the state of an object with my selected rows, but it does not work with MUIDataTable. The object is updated and set, but the rows are not marked as selected.
```
import React, {useState, useEffect, useCallback} from 'react';
import { useSelector } from "react-redux";
import { MuiThemeProvider } from '@material-ui/core/styles';
import MUIDataTable from "mui-datatables";
import NumberFormat from 'react-number-format';
import moment from 'moment';
import { Button } from 'reactstrap';
import NotificationManager from 'react-notifications/lib/NotificationManager';
import Modal from 'react-modal';
import { FormControlLabel, Checkbox } from '@material-ui/core';
import Main from '../Main';
import RctCollapsibleCard from '../Helpers/RctCollapsibleCard/RctCollapsibleCard';
import LinearProgress from '../Util/LinearProgress';
import * as Constants from '../Util/constants';
import * as unitsAPI from '../../Api/units';
const modalStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-8%',
transform: 'translate(-50%, -50%)',
height: 'au'
},
};
const tdStyle = {
maxWidth: '100%',
}
const PostVacancies = () => {
const login = useSelector((state) => state.login);
const propertyID = login.selectedPropertyID;
const [loading, setLoading] = useState(false);
const [units, setUnits] = useState([]);
const [onlyVacant, setOnlyVacant] = useState(true);
const [unitsToPost, setUnitsToPost] = useState([]);
const [openModal, setOpenModal] = useState(false);
useEffect(() => {
async function fetchData() {
setLoading(true);
// get units from the database
const units = await unitsAPI.getPostVacanciesUnits(propertyID);
setUnits(units);
setLoading(false);
}
fetchData();
}, [propertyID])
const showUnits = useCallback(() => {
const arr = [];
const occupied = onlyVacant ? 0 : 1;
for(const u of units) {
if(occupied === parseInt(u.Occupied)) {
const today = moment.utc();
const vacant = moment.utc(u.VacantDate);
const daysOnMarket = today.diff(vacant, 'days');
const loss = parseFloat(u.UnitCharge) * (daysOnMarket * 12 / 365);
arr.push({
unit: u.UnitName,
unitType: u.UnitType,
moveOutDate: moment.utc(u.VacantDate).format("MM/DD/YYYY"),
daysOnMarket,
marketRent: parseFloat(u.UnitCharge).toFixed(2),
lossToVacancy: parseFloat(loss).toFixed(2),
unitID: u.UnitID,
});
}
}
return arr;
}, [units, onlyVacant])
const columns = [
{ name: 'unit', label: 'Unit', },
{ name: 'unitType', label: 'Unit Type', },
{ name: 'moveOutDate', label: 'Move Out Date', },
{ name: 'daysOnMarket', label: 'Days on Market', },
{ name: 'marketRent', label: 'Market Rent',
options: {
customBodyRender: (value) => {
return
}
},
},
{ name: 'lossToVacancy', label: 'Loss to Vacancy',
options: {
customBodyRender: (value) => {
return
}
},
},
];
const options = {
filterType: 'dropdown',
pagination: false,
onRowSelectionChange: (_, allSelected) => {
setUnitsToPost([...allSelected]);
},
}
const handlePostVacancies = () => {
if(unitsToPost.length === 0) {
NotificationManager.warning("Please, select at least one unit", "Error")
return;
}
setOpenModal(true);
}
const renderTitle = () => {
return (
<>
setOnlyVacant(!onlyVacant)}>
{onlyVacant ? 'Show all untis' : 'Show only vacant untis'}
{' '}
Post
)
}
const postUnits = async () => {
setLoading(true);
const res = await unitsAPI.postVacancies({
propertyID,
autoPostVacancies: automaticPostVacant ? 1 : 0,
autoRemoveNonVacancies: automaticRemoveNonVacant ? 1 : 0,
unitsUpdated: unitsToPost.length,
unitsToPost,
});
setLoading(false);
if(res !== 0) {
NotificationManager.errors(Constants.DEFAULT_ERROR, "Error");
return;
}
NotificationManager.success("Your units have been submitted to the various websites. Actual posting times are dependent upon the individual sites.", "Success");
}
const renderModalContent = () => {
return (
This is a test
)
}
if(loading) {
return (
);
}
return (
<>
setOpenModal(false)}
contentLabel="Units selected"
style={modalStyles}
>
{renderModalContent()}
Post Vacancies
)
}
export default PostVacancies;
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.