reactjs - 在 react-tabulator 列中正确显示 React 组件

Question

我正在尝试在制表符表中显示 Material UI react 组件。除了行的高度外，其他东西都可以正常显示。我怀疑在第一次渲染后需要重新渲染，所以制表符知道 React 组件的高度，但我不太确定该怎么做。代码看起来像这样:

import { Fab, } from '@material-ui/core';
import { Lock,} from '@material-ui/icons'

const RegisterButton = (props) => {
    const cellData = props.cell._cell.row.data;
    return (
        <Fab
            size='small'
            onClick={handleTownRegisterClick(cellData.id)}
        >
            <Lock fontSize="inherit" />
        </Fab>
    )
}

const columns = [
    { title: 'Id', field: 'id', width: 45 },
    { title: "Register",
        field: "custom",
        align: "center",
        formatter: reactFormatter(<RegisterButton />),
        width: 100,
        headerSort: false
    }
];

稍后在我的表中使用:

<React15Tabulator
    columns={columns}
    layout={'fitColumns'}
...

有了这个，我的行是 Fab 组件高度的 2/3。

我看到格式化程序原型(prototype)是 formatter:function(cell, formatterParams, onRendered)。
我是否应该以某种方式使用 onRendered，我会在哪里强制表格考虑该单元格的高度？如果是这样，我会怎么做？
谢谢。

编辑:

进一步看，tabulator 似乎在第一次渲染时忽略了它在自己的“tabulator-cell”div 中添加的填充(它添加了一个 11px 的填充，它将我的按钮推了这么多)。

当重新排序其他列时，强制重新渲染，高度变为正确。

通过我的 RegisterButton 中的 props.cell._cell 可以访问一些重绘调用，我只是不知道如何以及何时调用它们......

Answer 1

你有没有解决过这个问题？

我有完全相同的问题，但有宽度 - 在列排序后一切都很好。

我用 CSS 解决了单元格填充问题:

.tabulator-row .tabulator-cell {
    padding: 0;
}

要垂直居中，您可以使用以下内容编辑基本样式，这适用于我的用例

.tabulator-row {
    flex-direction: row;
    align-items: center;
}
.tabulator-row .tabulator-cell {
    padding: 0;
    height: auto;

    .formatterCell {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

如果可以解决您的问题