CODEWITHSUNDEEP
reactjsmaterial-table
dhruv champaneri
dhruv champaneri

Reputation: 102

How to make a certain column editable in material-table?

I am trying to make a certain column editable( name column ) in material table but it doesn't seem to work. the documentation aren't also that helpful. this is what I tried:

My columns array:

const headers=[
  {
    title:"id",
    field:"id",
  },
  {
    title:"name",
    field:"name",
    editable:'always',  //as per documentation its 'always' by default but still..
    editComponent:props=>(   //trying to create custom edit component
      <input
       type="text"
       value={props.value}
       onChange={e => props.onChange(e.target.value)}/>
   )
  },
  {
    title:"email",field:"email"
  }
]

my material table component:

<MaterialTable 
                columns={headers} 
                data={rows} 
                icons={tableIcons}
                editable={{}}
                options={{
                    search:false,
                    //padding:"dense",
                    paging:false,
                   // addRowPosition:"first",
                   // actionsColumnIndex:-1,
                    sorting:false,
                    exportButton:false,
                    rowStyle:{
                        fontSize:"10px",
                        padding:0,
                        textAlign:"center"
                    }  
                }}
                />

my output:

enter image description here

any help is appreciated.

Upvotes: 3

Views: 2940

Answers (1)

DeGul
DeGul

Reputation: 71

You need to set the rest of the columns as "uneditable"

{
title:"id",
field:"id",
editable:'never'
}

Don't forget to add cellEditable to your material table tag

cellEditable={{
    onCellEditApproved: onCellUpdate,
    isCellEditable: () => true,
  }}

If you have many columns and you only want a single editable column you can also use the column's field name for specifying which column is editable :

cellEditable={{
    onCellEditApproved: onCellUpdate,
    isCellEditable: (rowData, columnDef) =>
      columnDef.field === "name",
  }}

Upvotes: 2

Related Questions