UG priority asked 1 year ago


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?


Mateusz Lazaru staff answered 1 year 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 });
}}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: Mac
  • Browser: Chrome
  • OS: ios
  • Provided sample code: No
  • Provided link: Yes