Topic: MDBTableEditor
package.json "mdb-react-table-editor": "git+https://oauth2:APhv53qixhSFuUaEh4Bs@git.mdbootstrap.com/mdb/react/mdb5/plugins/prd/table-editor#6.1.0", "mdb-react-ui-kit": "git+https://oauth2:APhv53qixhSFuUaEh4Bs@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-advanced#5.1.0",
Component
import React, { useState } from 'react';import { MDBTableEditor } from 'mdb-react-table-editor';
const StudentDocument = () => {
const onSelect = (value, index) => { // Implement your desired functionality here. console.log("I am here"); };
const basicColumns = \[ { label: "Code", field: "feeId"}, { label: "Description", field: "feesDescription"}, { label: "Amount", field: "amount" }, { label: "Status", field: "status", inputType: "select", options: \["Pending", "Paid", "Waived"\], defaultSelected:"Pending", }, \]; const \[basicData, setBasicData\] = useState({ columns: basicColumns, rows: \[\] });
return ( );};
export default StudentDocument;
Basically I want column "Code" to be readOnly. For the Column of type select, I want to capture the onChange event.
Cam I do this? If Yes, can you please tell me how?
mlazaru staff answered 2 years ago
Currently, there is no option to mark only one column as a non-editable. You can add extra styles to make it look like it's disabled.
.edited-row > td:nth-child(1) > div > input {
background-color: #e9ecef;
pointer-events: none;
}
It's also good to make an extra validation in component itself:
onModify={(modifiedData, _, e) => {
basicData.rows.forEach((row, i) => {
if (row.name !== modifiedData[i].name) {
console.log('first column has changed');
e.preventDefault();
} else {
console.log('first column has not changed');
}
});
return setBasicData({ ...basicData, rows: modifiedData });
}}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 6.1.0
- Device: Mac
- Browser: Chrome
- OS: ios
- Provided sample code: No
- Provided link: Yes