title: How to Disable Row in Antd Table
body: <p>so I worked on a project using react js with umi js and antd as additional dependencies,</p>
  
  <p>I had a problem when I got the task to disable each row in the antd table,</p>
  
  <p>I tried to read the documentation antd but got nothing,</p>
  
  <p>is it possible that you can do that? or there is another possible way to doing that</p>
  
  <p>Thank you for the help</p>
  
  <p>here's my code : </p>
  
  <pre><code>/* eslint-disable */
  import React, { useState, useEffect, useRef } from 'react';
  import { Modal, Button, Select, message, Radio, Table, Alert } from 'antd';
  import _       from 'lodash';
  import axios   from 'axios';
  import cookies from 'js-cookie';
  import {_getCurrentBusiness} from '../../../utils/utils_business';
  import {formatMessage }     from 'umi-plugin-locale';
  
  function DeleteConfirm (props) {
  
      const user_auth           = cookies.getJSON('ckmsbp');
      const business            = _getCurrentBusiness();
      const [radio, setRadio]   = useState('all');
      const [role, setRole]     = useState(null);
      const [chRole, setChrole] = useState(null); //changerole
      const [btn, setBtn]       = useState(false);
      const isMounted           = useRef(null);
      const roleRef             = useRef(null);
      const spanAmount          = {fontSize: '1rem', fontWeight: 500,marginLeft: '1rem'}
  
      useEffect( () =&gt; {
          isMounted.current = true;
          return () =&gt; isMounted.current = false;
      }, [])
      useEffect( () =&gt; {
          if(!_.isNil(props.roles)) {
              const updateRole = _.filter(props.roles, r =&gt; !_.eq(r.id, props.role.id) );           
              setRole(updateRole); //tampil di select 
          }
      }, [props.roles]);
  
      const handleSubmit = async () =&gt; {
          let   accountMeta = {}
          const body        = {status: 'deleted'}
          const params      = { _id: props.role.id}
          console.log('radio', radio);
          if(_.eq(radio, 'all')){
  
              if(_.isNil(chRole)) {
                  message.error('data can not empty')
                  props.chVisible(null); //close modal
              }
  
              _.forEach(props.account, async acc =&gt; {
                  let bus = [];
                  if( !_.isNil(acc.business) &amp;&amp; _.isString(acc.business) ) bus = JSON.parse(acc.business);
                  const find = _.findIndex(bus, b =&gt; {
                      return _.eq(b._id, business._id) &amp;&amp; _.eq(b.role_capability, props.role.id)
                  })
                  bus[find].role_capability = chRole;
                  acc.business = JSON.stringify(bus)
                  accountMeta = {
                      value     : acc.business,
                      key       : 'business',
                      account_id: acc._id
                  }
                  await axios.put(`${API}/account-meta`, accountMeta, { headers: { Authorization: user_auth.token}});
              })
  
          } else if( _.eq(radio, 'manual')){
              console.log('asd');
  
          } else if (_.eq(radio, 'delete')){
              _.forEach(props.account, async acc =&gt; {
                  let bus = [];
                  if( !_.isNil(acc.business) &amp;&amp; _.isString(acc.business) ) bus = JSON.parse(acc.business);
                  const find = _.findIndex(bus, b =&gt; _.eq(b._id, business._id) &amp;&amp; _.eq(b.role_capability, props.role.id) )
                  if(_.gt(find, -1)){
                      acc.business = JSON.stringify([])
                      accountMeta = {
                          value     : acc.business,
                          key       : 'business',
                          account_id: acc._id
                      }
                      await axios.put(`${API}/account-meta`, accountMeta, { headers: { Authorization: user_auth.token}});
                  }                
              })
          }
           const deleteResult = await axios.put(`${API}/master`, body, { params, headers: { Authorization: user_auth.token}});
           if(!_.isNil(deleteResult) &amp;&amp; _.isObject(deleteResult.data)){
               let no         = 1;
               let data       = []
               let updateRole = _.filter(props.roles, r =&gt; !_.eq(r.id, props.role.id));
               _.map(updateRole, role =&gt; {
                   role.no = no;
                   data.push(role)
                   no++
               });
               props.data(data); //tampil di select 
               message.success('data updated!')
               props.chVisible(null); //close modal
           }
      }
  
      const onChange  = (data) =&gt; {
          const value = data.target.value
          setRadio(value);
      }
  
      const roleChange = (data) =&gt; {
          setChrole(data)
      }
  
      //props column diambil dari datasource
      const columns = [
        {
          title    : 'No',
          dataIndex: 'no',
          key      : 'no',
        },
        {
          title    : 'Account\'s Name',
          dataIndex: 'name',
          key      : 'name',
        },
        {
          title    : 'Change Role',
          dataIndex: 'id',
          key      : 'action',
          render : (text, data) =&gt; renderButton(text, data) 
        },
      ];
  
      const handleClick = (e, data) =&gt; {
          setBtn(!btn)
          console.log('e', e);
          console.log('data', data);
      }
  
      const rowClassName = (record, index) =&gt; {
          console.log('record', record);
          console.log('index',index);
  
      }
  
      const renderButton = () =&gt; {
        let arrayAllow = [];
          arrayAllow.push(
            &lt;Select
                  showSearch
                  key              = '1'
                  size             = "small"
                  placeholder      = "select"
                  ref              = {roleRef}
                  optionFilterProp = "children"
                  style            = {{ width: 100 }}
                  onChange         = {(e) =&gt; roleChange(e)} //handle change role
                  filterOption     = {(input, option) =&gt; _.toLower(option.props.children).indexOf(_.toLower(input)) &gt;= 0}
              &gt;
                  {
                      !_.isNil(role) &amp;&amp; _.map(role, (newVal) =&gt; {
                          return (&lt;Select.Option 
                                      key   = {newVal.id}
                                      title = {newVal.title}
                                      value = {newVal.id}&gt;{newVal.title}
                                  &lt;/Select.Option&gt;)
                      })
                  }
              &lt;/Select&gt;
          )
          arrayAllow.push( &lt;Button 
                              type    = {!btn ? "danger" : "primary"}
                              key     = '2'
                              icon    = {!btn ? "close" : "redo"}
                              size    = "small"
                              onClick = {(e) =&gt; handleClick(e, props.role.id)}
                           /&gt; )
        return arrayAllow
      }
  
      // R E N D E R I N G
      return(
        &lt;div&gt;
          &lt;Modal
              title    = {`${formatMessage({id: 'ROLE_MANAGEMENT.DELETE_CONFIRM_TITLE'})} ${props.role.title}`}
              visible  = {props.visible}
              onOk     = {() =&gt; handleSubmit()}
              onCancel = {() =&gt; props.cancel(null) }
              width    = {800}
          &gt;
            &lt;p&gt;{formatMessage({id : 'ROLE_MANAGEMENT.DELETE_CONFIRM_STATEMENT', title: props.role.title})}&lt;/p&gt;
              &lt;div style={{marginBottom: '1rem'}}&gt;
                  &lt;Radio.Group onChange = {(e) =&gt; onChange(e)} value={radio}&gt;
                      &lt;Radio value="all"   &gt;Changed All of people  &lt;/Radio&gt;
                      &lt;Radio value="manual"&gt;Changed people manually&lt;/Radio&gt;
                      &lt;Radio value="delete"&gt;Total delete           &lt;/Radio&gt;
                  &lt;/Radio.Group&gt;
              &lt;/div&gt;
  
            { _.eq(radio, 'all') &amp;&amp; 
              &lt;div&gt;
                  &lt;Select
                      showSearch
                      ref              = {roleRef}
                      size             = "large"
                      style            = {{ width: 200 }}
                      placeholder      = {formatMessage({id: 'ACCOUNT.PLCHOLDER_ROLE'})}
                      optionFilterProp = "children"
                      onChange         = {(e) =&gt; roleChange(e)} //handle change role
                      filterOption     = {(input, option) =&gt; _.toLower(option.props.children).indexOf(_.toLower(input)) &gt;= 0}
                  &gt;
                      {
                          !_.isNil(role) &amp;&amp; _.map(role, (newVal) =&gt; { 
                              return ( &lt;Select.Option 
                                          key   = {newVal.id}
                                          title = {newVal.title}
                                          value = {newVal.id}
                                       &gt;{newVal.title}
                                       &lt;/Select.Option&gt; )
                          })
                      }
                  &lt;/Select&gt;
                  &lt;span style={spanAmount}&gt;{`Total amount of people which have role ${props.role.title} : ${_.size(props.account)}`}&lt;/span&gt;
              &lt;/div&gt;
            }
  
            { _.eq(radio, 'manual') &amp;&amp; &lt;Table 
                                          dataSource   = {props.account}
                                          rowClassName = {rowClassName}
                                          columns      = {columns}
                                          pagination   = {{ pageSize: 50 }}
                                          scroll       = {{ y: 250 }}
                                      /&gt; 
            }
  
            { _.eq(radio, 'delete') &amp;&amp; &lt;Alert
                message     = "Attention!"
                description = {formatMessage({id: 'ROLE_MANAGEMENT.DELETE_CONFIRM_DELETE'})}
                type        = "warning"
                showIcon
              /&gt;
            } 
          &lt;/Modal&gt;
        &lt;/div&gt;
      )
  }
  
  export default DeleteConfirm;
  </code></pre>
  
  <p>*the picture that I intend to disable when clicked on the danger button
  <a href="https://i.stack.imgur.com/G2910.png" rel="noreferrer"><img src="https://i.stack.imgur.com/G2910.png" alt="enter image description here"></a></p>