How to Disable Row in Antd Table

Question

so I worked on a project using react js with umi js and antd as additional dependencies,

I had a problem when I got the task to disable each row in the antd table,

I tried to read the documentation antd but got nothing,

is it possible that you can do that? or there is another possible way to doing that

Thank you for the help

here's my 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( () => {
        isMounted.current = true;
        return () => isMounted.current = false;
    }, [])
    useEffect( () => {
        if(!_.isNil(props.roles)) {
            const updateRole = _.filter(props.roles, r => !_.eq(r.id, props.role.id) );           
            setRole(updateRole); //tampil di select 
        }
    }, [props.roles]);

    const handleSubmit = async () => {
        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 => {
                let bus = [];
                if( !_.isNil(acc.business) && _.isString(acc.business) ) bus = JSON.parse(acc.business);
                const find = _.findIndex(bus, b => {
                    return _.eq(b._id, business._id) && _.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 => {
                let bus = [];
                if( !_.isNil(acc.business) && _.isString(acc.business) ) bus = JSON.parse(acc.business);
                const find = _.findIndex(bus, b => _.eq(b._id, business._id) && _.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) && _.isObject(deleteResult.data)){
             let no         = 1;
             let data       = []
             let updateRole = _.filter(props.roles, r => !_.eq(r.id, props.role.id));
             _.map(updateRole, role => {
                 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) => {
        const value = data.target.value
        setRadio(value);
    }

    const roleChange = (data) => {
        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) => renderButton(text, data) 
      },
    ];

    const handleClick = (e, data) => {
        setBtn(!btn)
        console.log('e', e);
        console.log('data', data);
    }

    const rowClassName = (record, index) => {
        console.log('record', record);
        console.log('index',index);

    }

    const renderButton = () => {
      let arrayAllow = [];
        arrayAllow.push(
          <Select
                showSearch
                key              = '1'
                size             = "small"
                placeholder      = "select"
                ref              = {roleRef}
                optionFilterProp = "children"
                style            = {{ width: 100 }}
                onChange         = {(e) => roleChange(e)} //handle change role
                filterOption     = {(input, option) => _.toLower(option.props.children).indexOf(_.toLower(input)) >= 0}
            >
                {
                    !_.isNil(role) && _.map(role, (newVal) => {
                        return (<Select.Option 
                                    key   = {newVal.id}
                                    title = {newVal.title}
                                    value = {newVal.id}>{newVal.title}
                                </Select.Option>)
                    })
                }
            </Select>
        )
        arrayAllow.push( <Button 
                            type    = {!btn ? "danger" : "primary"}
                            key     = '2'
                            icon    = {!btn ? "close" : "redo"}
                            size    = "small"
                            onClick = {(e) => handleClick(e, props.role.id)}
                         /> )
      return arrayAllow
    }

    // R E N D E R I N G
    return(
      <div>
        <Modal
            title    = {`${formatMessage({id: 'ROLE_MANAGEMENT.DELETE_CONFIRM_TITLE'})} ${props.role.title}`}
            visible  = {props.visible}
            onOk     = {() => handleSubmit()}
            onCancel = {() => props.cancel(null) }
            width    = {800}
        >
          <p>{formatMessage({id : 'ROLE_MANAGEMENT.DELETE_CONFIRM_STATEMENT', title: props.role.title})}</p>
            <div style={{marginBottom: '1rem'}}>
                <Radio.Group onChange = {(e) => onChange(e)} value={radio}>
                    <Radio value="all"   >Changed All of people  </Radio>
                    <Radio value="manual">Changed people manually</Radio>
                    <Radio value="delete">Total delete           </Radio>
                </Radio.Group>
            </div>

          { _.eq(radio, 'all') && 
            <div>
                <Select
                    showSearch
                    ref              = {roleRef}
                    size             = "large"
                    style            = {{ width: 200 }}
                    placeholder      = {formatMessage({id: 'ACCOUNT.PLCHOLDER_ROLE'})}
                    optionFilterProp = "children"
                    onChange         = {(e) => roleChange(e)} //handle change role
                    filterOption     = {(input, option) => _.toLower(option.props.children).indexOf(_.toLower(input)) >= 0}
                >
                    {
                        !_.isNil(role) && _.map(role, (newVal) => { 
                            return ( <Select.Option 
                                        key   = {newVal.id}
                                        title = {newVal.title}
                                        value = {newVal.id}
                                     >{newVal.title}
                                     </Select.Option> )
                        })
                    }
                </Select>
                <span style={spanAmount}>{`Total amount of people which have role ${props.role.title} : ${_.size(props.account)}`}</span>
            </div>
          }

          { _.eq(radio, 'manual') && <Table 
                                        dataSource   = {props.account}
                                        rowClassName = {rowClassName}
                                        columns      = {columns}
                                        pagination   = {{ pageSize: 50 }}
                                        scroll       = {{ y: 250 }}
                                    /> 
          }

          { _.eq(radio, 'delete') && <Alert
              message     = "Attention!"
              description = {formatMessage({id: 'ROLE_MANAGEMENT.DELETE_CONFIRM_DELETE'})}
              type        = "warning"
              showIcon
            />
          } 
        </Modal>
      </div>
    )
}

export default DeleteConfirm;

*the picture that I intend to disable when clicked on the danger button

Answer 1

In Antd there is no simple way to disable a row, so you can do it as workaround like below

So basically when you click on close button you can have state whether its been enabled or disabled as a boolean value

so each record will have that key. so based on that you can add a className and style it as disabled.

Here is a sample code snippet

App.js

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table } from "antd";

import "./styles.css";

function App() {
  const dataSource = [
    {
      key: "1",
      name: "Mike",
      age: 32,
      address: "10 Downing Street",
      enabled: true
    },
    {
      key: "2",
      name: "John",
      age: 42,
      address: "10 Downing Street",
      enabled: false
    }
  ];

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age"
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address"
    }
  ];
  return (
    <>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowClassName={record => !record.enabled && "disabled-row"}
      />
      ;
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

style.css

.disabled-row {
  background-color: #dcdcdc;
  pointer-events: none;
}

I hope this way you will have better understanding of solving the problem

Working codesandbox