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?

Add comment

Mateusz Lazaru staff answered 10 months ago

0 0 Best answer

Please insert min. 20 characters.

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 });
}}

Add comment

Write

Create snippet

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

UG

0Support score
2Questions 0Answers 0Snippets