Develop Reference

I am trying to save the values form the DataGridPro MUI, a TreeData ... How can i save Values of the Cells after i edit them

I am novice at this. I am trying to save the values form the DataGridPro MUI, I am using a TreeData. How can i save Values of the Cells after i edit them. I watched a video online in by which i was able to understand how it will work on a Single DataTable, But for the Parent one, i dont know how i will be able to save it. I have looked up but i found no method which could be helpful. I am getting the values from the GridColumn and GridRowsProp.
Basically i want to save the values of the children. how can i save them?
Thanks.
import * as React from "react";
import { DataGridPro, GridColumns, GridRowsProp, DataGridProProps } from "#mui/x-data-grid-
pro";
import {
GridCellEditCommitParams,
GridCellEditStopParams,
GridCellEditStopReasons,
GridRowModel,
MuiEvent,
} from "#mui/x-data-grid";
import { applyInitialState } from "#mui/x-data-grid/hooks/features/columns/gridColumnsUtils";
const rows: GridRowsProp = [
{
hierarchy: ["Documents"],
rubrics: "Head of Human Resources",
totalMarks: "",
id: 0,
},
{
hierarchy: ["Scope"],
rubrics: "Head of Sales",
totalMarks: "15",
id: 1,
},
{
hierarchy: ["Scope", "Rubric item 1"],
rubrics: "Sales Person",
totalMarks: "2",
id: 2,
},
{
hierarchy: ["Scope", "Rubric item 2"],
rubrics: "Sales Person",
totalMarks: "5",
id: 3,
},
{
hierarchy: ["Scope", "Rubric item 3"],
rubrics: "Sales Person",
totalMarks: "8",
id: 4,
},
];
const columns: GridColumns = [
{ field: "rubrics", headerName: "Rubric Type", width: 200, editable: true },
{
field: "totalMarks",
headerName: "Total Marks",
width: 150,
editable: true,
},
];
const getTreeDataPath: DataGridProProps["getTreeDataPath"] = (row) => row.hierarchy;
export default function TreeDataSimple() {
const [state, setState] = React.useState<GridRowModel[]>(applyInitialState); //i was seeing online for this how can i add the array here but no luck.
const handleCommit = (e: GridCellEditCommitParams) => {
const array = state.map((r) => {
if (r.id === e.id) {
return { ...r, [e.field]: e.value };
} else {
return { ...r };
}
});
setState(array);
};
return (
<div style={{ height: 400, width: "100%" }}>
<DataGridPro
treeData
rows={rows}
columns={columns}
getTreeDataPath={getTreeDataPath}
onCellEditCommit={handleCommit}
experimentalFeatures={{ newEditingApi: true }}
onCellEditStop={(params: GridCellEditStopParams, event: MuiEvent) => {
if (params.reason === GridCellEditStopReasons.cellFocusOut) {
event.defaultMuiPrevented = true;
}
}}
/>
</div>
);
}}

How to integrate React-Beautiful-DND and Ant Design table?

I am trying to integrate React-Beautiful-DND and Ant Design table, but I am facing an issue with rows as I drag them. Their style is changing and the whole table jumps. Anyone tried this before? How do I keep the style of dragged row as it was when it was not dragged?
Any ideas will be much appreciated.
Here is a link to full sandbox.
You can see that if you drag any row, the table will jump.
An here is a full code from the link:
import React, { useState } from "react";
import { Table, Row, Col, Card, Empty } from "antd";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { mutliDragAwareReorder } from "./utils";
import "./style.css";
const entitiesMock = {
tasks: [
{ id: "0", title: "Very long task title" },
{ id: "1", title: "Task 1" },
{ id: "2", title: "Task 2" },
{ id: "3", title: "Task 3" },
{ id: "4", title: "Task 4" },
{ id: "5", title: "Task 5" },
{ id: "6", title: "Task 6" },
{ id: "7", title: "Task 7" },
{ id: "8", title: "Task 8" },
{ id: "9", title: "Task 9" },
{ id: "10", title: "Task 10" },
{ id: "11", title: "Task 11" },
{ id: "12", title: "Task 12" },
{ id: "13", title: "Task 13" },
{ id: "14", title: "Task 14" },
{ id: "15", title: "Task 15" },
{ id: "16", title: "Task 16" },
{ id: "17", title: "Task 17" },
{ id: "18", title: "Task 18" },
{ id: "19", title: "Task 19" }
],
columnIds: ["todo"],
columns: {
todo: {
id: "todo",
title: "To do",
taskIds: [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19"
]
},
done: {
id: "done",
title: "Done",
taskIds: []
}
}
};
const COLUMN_ID_DONE = "done";
export const MultiTableDrag = () => {
const [entities, setEntities] = useState(entitiesMock);
const [selectedTaskIds, setSelectedTaskIds] = useState([]);
const [draggingTaskId, setDraggingTaskId] = useState(null);
const tableColumns = [
{
title: "ID",
dataIndex: "id"
},
{
title: "Title",
dataIndex: "title"
}
];
/**
* Droppable table body
*/
const DroppableTableBody = ({ columnId, tasks, ...props }) => {
return (
<Droppable droppableId={columnId}>
{(provided, snapshot) => (
<tbody
ref={provided.innerRef}
{...props}
{...provided.droppableProps}
className={`${props.className} ${
snapshot.isDraggingOver && columnId === COLUMN_ID_DONE
? "is-dragging-over"
: ""
}`}
>
{props.children}
{provided.placeholder}
</tbody>
)}
</Droppable>
);
};
/**
* Draggable table row
*/
const DraggableTableRow = ({ index, record, columnId, tasks, ...props }) => {
if (!tasks.length) {
return (
<tr className="ant-table-placeholder row-item" {...props}>
<td colSpan={tableColumns.length} className="ant-table-cell">
<div className="ant-empty ant-empty-normal">
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</div>
</td>
</tr>
);
}
const isSelected = selectedTaskIds.some(
(selectedTaskId) => selectedTaskId === record.id
);
const isGhosting =
isSelected && Boolean(draggingTaskId) && draggingTaskId !== record.id;
return (
<Draggable
key={props["data-row-key"]}
draggableId={props["data-row-key"].toString()}
index={index}
>
{(provided, snapshot) => {
return (
<tr
ref={provided.innerRef}
{...props}
{...provided.draggableProps}
{...provided.dragHandleProps}
className={`row-item ${isSelected ? "row-selected" : ""} ${
isGhosting ? "row-ghosting" : ""
} ${snapshot.isDragging ? "row-dragging" : ""}`}
>
{props.children}
</tr>
);
}}
</Draggable>
);
};
/**
* Get tasks
*/
const getTasks = (entities, id) => {
return entities.columns[id].taskIds.map((taskId) =>
entities.tasks.find((item) => item.id === taskId)
);
};
/**
* On before capture
*/
const onBeforeCapture = (start) => {
const draggableId = start.draggableId;
const selected = selectedTaskIds.find((taskId) => taskId === draggableId);
// if dragging an item that is not selected - unselect all items
if (!selected) {
setSelectedTaskIds([]);
}
setDraggingTaskId(draggableId);
};
/**
* On drag end
*/
const onDragEnd = (result) => {
const destination = result.destination;
const source = result.source;
// nothing to do
if (!destination || result.reason === "CANCEL") {
setDraggingTaskId(null);
return;
}
const processed = mutliDragAwareReorder({
entities,
selectedTaskIds,
source,
destination
});
setEntities(processed.entities);
setDraggingTaskId(null);
};
return (
<>
<Card
className={`c-multi-drag-table ${draggingTaskId ? "is-dragging" : ""}`}
>
<div>
selectedTaskIds: {JSON.stringify(selectedTaskIds)}
<br />
draggingTaskId: {JSON.stringify(draggingTaskId)}
</div>
<br />
<DragDropContext
onBeforeCapture={onBeforeCapture}
onDragEnd={onDragEnd}
>
<Row gutter={40}>
{entities.columnIds.map((id) => (
<Col key={id} xs={12}>
<div className="inner-col">
<Row justify="space-between" align="middle">
<h2>{id}</h2>
<span>
{draggingTaskId && selectedTaskIds.length > 0
? selectedTaskIds.length +
" record(s) are being dragged"
: draggingTaskId && selectedTaskIds.length <= 0
? "1 record(s) are being dragged"
: ""}
</span>
</Row>
<Table
dataSource={getTasks(entities, id)}
columns={tableColumns}
rowKey="id"
components={{
body: {
// Custom tbody
wrapper: (val) =>
DroppableTableBody({
columnId: entities.columns[id].id,
tasks: getTasks(entities, id),
...val
}),
// Custom td
row: (val) =>
DraggableTableRow({
tasks: getTasks(entities, id),
...val
})
}
}}
// Set props on per row (td)
onRow={(record, index) => ({
index,
record
})}
/>
</div>
</Col>
))}
</Row>
<br />
</DragDropContext>
</Card>
</>
);
};

array filtering and map dynamically in js

i have a json like this:
[
{
"part": "LM",
"section": "021",
"column": "001",
"description": "Descrizione attività/passività",
"type": "NUM"
},
{
"part": "LM",
"section": "021",
"column": "002",
"description": "Assenza cause Ostative Applicazione Regime",
"type": "CB"
},
{
"part": "LM",
"section": "042",
"column": "001",
"description": "Differenza su reddito",
"type": "NUM"
},
{
"part": "LM",
"section": "050",
"column": "006",
"description": "Perdite non compensate - Eccedenza 2018",
"type": "NUM"
}
]
and i wanna map items splitted for section prop.
Aspect output is:
<div>section 021
<p>column 001</p>
<p>column 002</p>
</div>
<div>section 042
<p>column 001</p>
</div>
<div>section 050
<p>column 006</p>
</div>
How can dynamically pass the section prop as filter parameter?
I have tried something like:
obj.filter((item) => item.section == "021").map((item) => ... and works but i want the "021" is dynamic for every value in the object.
Thank you very much guys

export default function App() {
const data = [
{
part: 'LM',
section: '021',
column: '001',
description: 'Descrizione attività/passività',
type: 'NUM'
},
{
part: 'LM',
section: '021',
column: '002',
description: 'Assenza cause Ostative Applicazione Regime',
type: 'CB'
},
{
part: 'LM',
section: '042',
column: '001',
description: 'Differenza su reddito',
type: 'NUM'
},
{
part: 'LM',
section: '050',
column: '006',
description: 'Perdite non compensate - Eccedenza 2018',
type: 'NUM'
}
];
const output = Object.values(
data.reduce((b, a) => {
if (b.hasOwnProperty(a.section)) b[a.section].columns.push(a.column);
else {
a.columns = [a.column];
b[a.section] = a;
}
return b;
}, {})
);
// console.log(output);
return (
<div>
{output.map(obj => (
<div>
{obj.section}
<ul>
{obj.columns.map(col => (
<li> {col} </li>
))}
</ul>
</div>
))}
</div>
);
}
View here: https://stackblitz.com/edit/react-txmy72?file=src/App.js

React checkbox tree expand and check button not responding

I have this code :
render() {
let state = {
checked: [
'catc'
],
expanded: [
'cata',
'catb'
],
};
<CheckboxTree
nodes={this.props.chosenCategory.children}
checked={state.checked}
expanded={state.expanded}
onCheck={checked => this.setState({ checked })}
onExpand={expanded => this.setState({ expanded })}
/>
So I have the result like this :
But when I click on check or expand the list doesn't respond. Can anybody help me please? Thanks in advance.
After putting state outside of render() :
this.props.chosenCategory.children :
"id": 26578,
"label": "CatA",
"value": "cata",
"children": [
{
"id": 26579,
"label": "CatB",
"value": "catb",
"children": [
{
"id": 26580,
"label": "CatC",
"value": "catc",
"children": []
}
]
}
]

You need to define state outside of render method :
state = {
checked: [
'catc'
],
expanded: [
'cata',
'catb'
],
};
render() {
return (
<CheckboxTree
nodes={this.props.chosenCategory.children}
checked={this.state.checked}
expanded={this.state.expanded}
onCheck={checked => this.setState({ checked })}
onExpand={expanded => this.setState({ expanded })}
/>
);
}

How to handle dropouts in React JS

here i am pasting my code at below, please guide me how i can click on the link from dropouts..
let showWomenCategoryMenuDropout = false;
class WomenCategoryMenu extends React.Component {
constructor(props) {
super(props);
this.state = {
showWomenCategoryMenuDropout: false
};
this.openWomenCategoryMenuDropout = this.openWomenCategoryMenuDropout.bind(
this
);
this.closeWomenCategoryMenuDropout = this.closeWomenCategoryMenuDropout.bind(
this
);
}
openWomenCategoryMenuDropout() {
this.setState({
showWomenCategoryMenuDropout: true
});
}
closeWomenCategoryMenuDropout() {
this.setState({
showWomenCategoryMenuDropout: false
});
}
render() {
return (
<div>
<div
className={classnames(style.header_category_menu_container)}
onMouseOut={this.closeWomenCategoryMenuDropout}
onMouseEnter={this.openWomenCategoryMenuDropout}>
<span>Women</span>
</div>
<div>
<SignIn
type="dropout"
open={this.state.showWomenCategoryMenuDropout}
onMouseOut={this.closeWomenCategoryMenuDropout}
onMouseEnter={this.openWomenCategoryMenuDropout}>
<div className={classnames(style.cartegory_wrapper)}>
<CategoryGrid>
{data.map((ele, index) => (
<div
className={classnames(style.cartegory_menu)}
key={"Key-" + index}>
<h3 className={classnames(style.cartegory_menu_title)}>
{ele.categorytitle}
</h3>
<ul>
{Array.isArray(ele.category) &&
ele.category.map((d, i) => (
<li key={"Key-" + i}>{d[`Category${i + 1}`]}</li>
))}
{ele.imagePath && <img src={ele.imagePath} />}
</ul>
</div>
))}
</CategoryGrid>
</div>
</SignIn>
</div>
</div>
);
}
}
also please find the JASON data at below...
var data = [
{
categorytitle: "Shoes",
category: [
{
Category1: "Boots"
},
{
Category2: "Sneakers"
},
{
Category3: "Flats"
},
{
Category4: "Booties"
},
{
Category5: "Mules"
},
{
Category6: "Heels/Pumps"
},
{
Category7: "Clogs"
},
{
Category8: "Slippers"
},
{
Category9: "Sandals"
},
{
Category10: "Sale"
},
{
Category11: "Shop All"
}
]
},
{
categorytitle: "Activities",
category: [
{
Category1: "Comfort Shop"
},
{
Category2: "Run Shop"
},
{
Category3: "Trend Guide"
},
{
Category4: "Athletic"
},
{
Category5: "Casual"
},
{
Category6: "Dress"
},
{
Category7: "Outdoor"
},
{
Category8: "Walking"
},
{
Category9: "Foot Health & Wellness"
},
{
Category10: "Narrow Shoes"
},
{
Category11: "Wide Shoes"
}
]
},
{
categorytitle: "Clothing & More",
category: [
{
Category1: "Handbags/Purses"
},
{
Category2: "Active & Yoga"
},
{
Category3: "Coats & Jackets"
},
{
Category4: "Athletic"
},
{
Category5: "Dresses"
},
{
Category6: "Tops"
},
{
Category7: "Sweaters"
},
{
Category8: "Socks"
},
{
Category9: "Sunglasses"
},
{
Category10: "Rain Gear"
},
{
Category11: "Wide Shoes"
}
]
},
{
categorytitle: "Top Brands",
category: [
{
Category1: "Sam Edelman"
},
{
Category2: "Clarks"
},
{
Category3: "Dr Martens"
},
{
Category4: "Lucky Brand"
},
{
Category5: "New Balance"
},
{
Category6: "Skechers"
},
{
Category7: "Sperry Top-Sider"
},
{
Category8: "Sorel"
},
{
Category9: "TOMS"
},
{
Category10: "UGG"
},
{
Category11: "Vionic"
}
]
},
{
targetUrl: "/",
imagePath:
"src/image1",
title: "WORK SHOP"
}
];
this above is my JSON data, here once mouse hover dropuout is showing correctly but once i am going to click any link from dropout the dropouts itself is closing.

This problem got solved ..here just need to replace from onMouseOut to onMouseLeave.