Develop Reference

How to use group table material ui in reactjs?

I use table material UI and
useEffect(() => {
if (props.grouping){
const { groupProperty, rows } = props;
const groups = props.rows.reduce((acc, row) => {
acc[row[groupProperty]] = acc[row[groupProperty]] || [];
acc[row[groupProperty]].push(row);\
return acc;
}, {});
setGroups(groups)
const keys = Object.keys(groups);
setDataGroup(keys)
}
}, [props.rows,props.schema]);
<TableBody>
<>
{props.grouping && (
dataGroup.map(key => (
<TableRow className={clsx(classes.row, props.rowClassName)}>
<TableCell colspan="5">
<CardActions disableActionSpacing>
<b>
{key}
</b>
<IconButton
className={expanded[key] ? classes.expandOpen : classes.expand}
onClick={() => handleExpandClick(key)}
aria-expanded={expanded[key]}
aria-label="Show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={expanded[key]} timeout="auto" unmountOnExit>
<MuiTable {...other}>
<TableBody>
{groups[key].map(row => (
<TableRow >
<TableCell >{row.wageTitle}</TableCell>
<TableCell numeric>{row.buy}</TableCell>
<TableCell numeric>{row.sell}</TableCell>
<TableCell numeric>{row.buyMaximum}</TableCell>
<TableCell numeric>{row.sellMaximum}</TableCell>
</TableRow>
)
)}
</TableBody>
</MuiTable>
</Collapse>
</TableCell>
</TableRow>
))
)}
.....
<Table grouping={true} rows={tableData} className={classes.table} schema={schema} groupProperty="deductionTypeTitle" ></Table>
I use this link How to group table in reactjs?
..But I want this grouping to be based on two data like this: https://codesandbox.io/s/l9ijbc?file=/demo.js
Someone can help me

React function is always called with same parameter in a loop

I have a data array and display its elements in table rows. The last table cell includes a menu item which calls a function with parameter.
The problem is that function handleOpenApproveDialog is always fired with same data element, the last element of myData array.
CodeSandbox link
const handleOpenApproveDialog = (ev, item) => {
setAnchorEl(null);
dispatch(openApproveDialog(item));
//* problem: incoming item parameter is always same. The last element of myData array.
};
<TableBody>
{myData.map((n, i) => {
return (
<TableRow
tabIndex={-1}
key={i}
onClick={(event) => handleRowClick(event, n)}
>
<TableCell className="p-4 md:p-16" component="th" scope="row">
{n.company}
</TableCell>
<TableCell
className="p-4 md:p-16"
component="th"
scope="row"
align="right"
>
<IconButton
aria-label="actions"
id="actions-button"
aria-controls={isMenuOpen ? "actions-menu" : undefined}
aria-expanded={isMenuOpen ? "true" : undefined}
aria-haspopup="true"
onClick={(ev) => {
handleMenuClick(ev);
ev.stopPropagation();
}}
>
<MoreVertIcon />
</IconButton>
<Menu
id="actions-menu"
anchorEl={anchorEl}
open={isMenuOpen}
onClose={handleMenuClose}
>
<MenuItem
onClick={(ev) => {
handleOpenApproveDialog(ev, n);
ev.stopPropagation();
}}
>
Approve
</MenuItem>
</Menu>
</TableCell>
</TableRow>
);
})}
</TableBody>

How do I iterate though an array of objects with keys and values in react and render them in the JSX( Both keys and Values)

The below code gives me the grouped data as shown in the image.
When I iterate through it and log the result to the console, I get the data but get blank html table when iterating the same way as I did to log the data in the console.
Here's how I'm grouping the data:
const finalGroup = sortedOrderItems && _.groupBy(sortedOrderItems, "deliveryDate");
let result = _.map(_.values(finalGroup), arr => _.groupBy(arr, 'deliveryDate'))
console.log("final grouping:",result)
let tableData =
result && result.map(res=>{
Object.keys(res).map((key, index) => {
<TableRow style={{backgroundColor:'#E6E6FA', textAlign:'center'}}>
<TableCell colSpan={9} style={{backgroundColor:'#E6E6FA'}}>{key}</TableCell>
</TableRow>
res && res[key].map((object) => {
return <TableRow style={{backgroundColor:'#FAFAFA', textAlign:'center'}}>
<TableCell style={{fontSize:'17px'}}> <img src={object.product.productImage} style={{border:'1px solid #DEDBDB',height:'50px',marginTop:'1px', marginLeft:'2px', width:'50px'}} alt={object.name} /></TableCell>
<TableCell ><div style={{ wordWrap:'break-all'}}>{MOMENT(object.deliveryDate).tz(timeZone).format('YYYY-MM-DD, h:mm A')}</div></TableCell>
<TableCell ><div style={{width:'200px', wordWrap:'break-all'}}>{object.name}</div></TableCell>
<TableCell><span style={{marginLeft:'-40px'}}>{object.unitName}</span></TableCell>
<TableCell><span style={object.status == 'BACK_ORDER' || object.status == 'UNAVAILABLE' || object.status == 'OUT_OF_STOCK' ? {color:'red',marginLeft:'-35px'} : {color:'green', marginLeft:'-35px'} }>{object.status}</span></TableCell>
<TableCell><span style={{textAlign:'center'}}>{regionID && regionID == 1050 ? <span>$</span> : regionID && regionID == 1000 ? <span>₹</span>: ''}{object.unitPrice}</span></TableCell>
<TableCell><span style={{textAlign:'center'}}>{regionID && regionID == 1050 ? <span>$</span> : regionID && regionID == 1000 ? <span>₹</span>: ''}{object.totalPrice}</span></TableCell>
<TableCell><span style={{}}>{object.quantity}</span></TableCell>
<TableCell>
<div style={{float:'right', marginLeft:'-65px'}}>
<FormControl variant="outlined" style={{width:'202px', float:'right'}}>
<InputLabel id="status">Update Item Status</InputLabel>
<Select
style={{height:'44px',textAlign:'center', margin:'7px'}}
native
id= 'status'
value={OrderItemStatus.status}
onChange={(event, id)=>{handleStatusChange(event, object.id)}}
label="Update Order Status"
>
<option aria-label="None" value="" />
{statuses.map((stat, index)=>{
return(<option id={index} key={index} value={stat}>{stat}</option>
)
})}
</Select>
</FormControl>
</div>
</TableCell>
</TableRow>
});
})
})
Any help would be greatly appreciated. Thank you!

It seems you have an array of objects where each object is a collection of key-value pairs where the values are the nested arrays you want to map. Don't forget to return the JSX you are mapping.
const tableData = result && result.map(res=> {
return Object.entries(res).map(([key, value], index) => {
return (
<Fragment key={key}>
<TableRow style={{backgroundColor:'#E6E6FA', textAlign:'center'}}>
<TableCell colSpan={9} style={{backgroundColor:'#E6E6FA'}}>{key}</TableCell>
</TableRow>
{value.map((object) => {
return (
<TableRow style={{backgroundColor:'#FAFAFA', textAlign:'center'}}>
...
</TableRow>
);
})}
</Fragment>
);
})
})

Selection Checkbox in React using Hooks

I have a problem selecting a single checkbox or multiple checkbox in a table in React. I'm using Material-UI. Please see my codesandbox here
CLICK HERE
I wanted to achieve something like this in the picture below:
<TableContainer className={classes.tableContainer}>
<Table>
<TableHead className={classes.tableHead}>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
checked={false}
inputProps={{ "aria-label": "select all desserts" }}
/>
</TableCell>
{head.map((el) => (
<TableCell key={el} align="left">
{el}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{body?.excluded_persons?.map((row, index) => (
<TableRow key={row.id}>
<TableCell padding="checkbox">
<Checkbox checked={true} />
</TableCell>
<TableCell align="left">{row.id}</TableCell>
<TableCell align="left">{row.name}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>

Seems you are just missing local component state to track the checked status of each checkbox, including the checkbox in the table header.
Here is the implementation for the AddedPersons component since it's more interesting because it has more than one row of data.
Create state to hold the selected persons state. Only add the additional local state, no need to duplicate the passed body prop data (this is anti-pattern anyway) nor add any derived state, i.e. is indeterminate or is all selected (also anti-pattern).
const [allSelected, setAllSelected] = React.useState(false);
const [selected, setSelected] = React.useState({});
Create handlers to toggle the states.
const toggleAllSelected = () => setAllSelected((t) => !t);
const toggleSelected = (id) => () => {
setSelected((selected) => ({
...selected,
[id]: !selected[id]
}));
};
Use a useEffect hook to toggle all the selected users when the allSelected state is updated.
React.useEffect(() => {
body.persons?.added_persons &&
setSelected(
body.persons.added_persons.reduce(
(selected, { id }) => ({
...selected,
[id]: allSelected
}),
{}
)
);
}, [allSelected, body]);
Compute the selected person count to determine if all users are selected manually or if it is "indeterminate".
const selectedCount = Object.values(selected).filter(Boolean).length;
const isAllSelected = selectedCount === body?.persons?.added_persons?.length;
const isIndeterminate =
selectedCount && selectedCount !== body?.persons?.added_persons?.length;
Attach all the state and callback handlers.
return (
<>
<TableContainer className={classes.tableContainer}>
<Table>
<TableHead className={classes.tableHead}>
<TableRow>
<TableCell colSpan={4}>{selectedCount} selected</TableCell>
</TableRow>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
checked={allSelected || isAllSelected} // <-- all selected
onChange={toggleAllSelected} // <-- toggle state
indeterminate={isIndeterminate} // <-- some selected
inputProps={{ "aria-label": "select all desserts" }}
/>
</TableCell>
...
</TableRow>
</TableHead>
<TableBody>
{body?.persons?.added_persons?.map((row, index) => (
<TableRow key={row.id}>
<TableCell padding="checkbox">
<Checkbox
checked={selected[row.id] || allSelected} // <-- is selected
onChange={toggleSelected(row.id)} // <-- toggle state
/>
</TableCell>
<TableCell align="left">{row.id}</TableCell>
<TableCell align="left">{row.name}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
);
Update
Seems there was a bug in my first implementation that disallowed manually deselecting people while the select all checkbox was checked. The fix is to move the logic in the useEffect into the toggleAllSelected handler and use the onChange event to toggle all the correct states. Also to add a check to toggleSelected to deselect "select all" when any person checkboxes have been deselected.
const [allSelected, setAllSelected] = React.useState(false);
const [selected, setSelected] = React.useState({});
const toggleAllSelected = (e) => {
const { checked } = e.target;
setAllSelected(checked);
body?.persons?.added_persons &&
setSelected(
body.persons.added_persons.reduce(
(selected, { id }) => ({
...selected,
[id]: checked
}),
{}
)
);
};
const toggleSelected = (id) => (e) => {
if (!e.target.checked) {
setAllSelected(false);
}
setSelected((selected) => ({
...selected,
[id]: !selected[id]
}));
};
Note: Since both AddedPersons and ExcludedPersons components are basically the same component, i.e. it's a table with same headers and row rendering and selected state, you should refactor these into a single table component and just pass in the row data that is different. This would make your code more DRY.

I have updated your added person table as below,
please note that I am using the component state to update the table state,
const AddedPersons = ({ classes, head, body }) => {
const [addedPersons, setAddedPersons] = useState(
body?.persons?.added_persons.map((person) => ({
...person,
checked: false
}))
);
const [isAllSelected, setAllSelected] = useState(false);
const [isIndeterminate, setIndeterminate] = useState(false);
const onSelectAll = (event) => {
setAllSelected(event.target.checked);
setIndeterminate(false);
setAddedPersons(
addedPersons.map((person) => ({
...person,
checked: event.target.checked
}))
);
};
const onSelect = (event) => {
const index = addedPersons.findIndex(
(person) => person.id === event.target.name
);
// shallow clone
const updatedArray = [...addedPersons];
updatedArray[index].checked = event.target.checked;
setAddedPersons(updatedArray);
// change all select checkbox
if (updatedArray.every((person) => person.checked)) {
setAllSelected(true);
setIndeterminate(false);
} else if (updatedArray.every((person) => !person.checked)) {
setAllSelected(false);
setIndeterminate(false);
} else {
setIndeterminate(true);
}
};
const numSelected = addedPersons.reduce((acc, curr) => {
if (curr.checked) return acc + 1;
return acc;
}, 0);
return (
<>
<Toolbar>
{numSelected > 0 ? (
<Typography color="inherit" variant="subtitle1" component="div">
{numSelected} selected
</Typography>
) : (
<Typography variant="h6" id="tableTitle" component="div">
Added Persons
</Typography>
)}
</Toolbar>
<TableContainer className={classes.tableContainer}>
<Table>
<TableHead className={classes.tableHead}>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
checked={isAllSelected}
inputProps={{ "aria-label": "select all desserts" }}
onChange={onSelectAll}
indeterminate={isIndeterminate}
/>
</TableCell>
{head.map((el) => (
<TableCell key={el} align="left">
{el}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{addedPersons?.map((row, index) => (
<TableRow key={row.id}>
<TableCell padding="checkbox">
<Checkbox
checked={row.checked}
onChange={onSelect}
name={row.id}
/>
</TableCell>
<TableCell align="left">{row.id}</TableCell>
<TableCell align="left">{row.name}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
);
};
export default AddedPersons;
Please refer to this for a working example: https://codesandbox.io/s/redux-react-forked-cuy51

Each child in a list should have a unique "key" prop with switch statement

I loop an array and inside that, I loop another array within a switch statement.
<TableBody>
{(rowsPerPage > 0
? filteredItems.slice(
page * rowsPerPage,
page * rowsPerPage + rowsPerPage
)
: filteredItems
).map((row, index) => (
<TableRow key={index}>
{headers.map(({ value, idx }) => {
switch (value) {
case 'status':
return (
<TableCell key={idx}>
{row.status ? (
<Button
variant='contained'
className={classes.red}
onClick={() =>
changeStatus(row.id, row.status)
}
>
Deactivate
</Button>
) : (
<Button
variant='contained'
className={classes.green}
onClick={() =>
changeStatus(row.id, row.status)
}
>
Activate
</Button>
)}
</TableCell>
);
default:
if (value.split('.').length === 1) {
return (
<TableCell component='th' scope='row' key={idx}>
{row[value]}
</TableCell>
);
} else {
let obj = value.split('.')[0];
let nestObj = value.split('.')[1];
return (
<TableCell component='th' scope='row' key={idx}>
{row[obj] && row[obj][nestObj]}
</TableCell>
);
}
}
})}
</TableRow>
))}
</TableBody>
In both places I have added the key property. Why do I get this error?