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

Question

我正在尝试在制表符表中显示 material-ui 反应组件。除行高外，其他内容显示正确。我怀疑在第一次渲染后需要重新渲染，所以 tabulator 知道 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。

我看到格式化程序原型是 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;
    }
}

如果可以解决您的问题