React Table每行操作按钮不显示仅出现空白列问题求助

核心问题（直接导致按钮不显示） #

你当前操作列的dataField配置为空字符串，你使用的react-bootstrap-table2系列组件要求所有列的dataField必须为唯一非空的字符串值，即便该列不需要绑定数据源字段，也需要设置一个唯一标识，比如action。

次要待修复问题（不影响按钮显示，但会引发后续运行错误） #

• Aktivasi按钮的onClick事件写法错误：当前onClick={this.aktivasiUser(row)}会在组件渲染阶段直接执行方法，而非点击时触发，需要用箭头函数包裹传参。
• 操作列配置的p-1类内边距过小，可能会挤压按钮导致显示异常，可根据需要调整内边距。

修正后代码示例 #

修正后的columns配置 #

columns = [
    {
        dataField: "nama_user",
        text: "Nama",
        sort: true,
        style: { overflowWrap: "break-word" }, 
        headerStyle: { backgroundColor: '#2196F3' , color: 'white'}
    },
    {
        dataField: "email",
        text: "Email",
        sort: true,
        headerStyle: { backgroundColor: '#2196F3' , color: 'white'}
    },
    {
        // 替换为空的dataField为唯一非空值
        dataField: "action",
        text: "Action",
        formatter: this.GetUserAction,
        headerStyle: { backgroundColor: '#2196F3' , color: 'white'},
        classes: "p-1"
    }
];

修正后的格式化函数 #

GetUserAction = (cell, row, rowIndex, formatExtraData) => {
        return (
            <div>
                <button className="update" onClick={this.handleClickOpen}>
                    Edit
                </button>
                {/* 用箭头函数包裹避免渲染时直接执行 */}
                <button className="update" onClick={() => this.aktivasiUser(row)}>
                   Aktivasi
                </button>
            </div>
        );
    }

内容的提问来源于stack exchange，提问作者Ananda Pramono