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

Question

我试图在一个表格中显示一个 material-ui react 组件。除了行的高度，其他都能正常显示。我怀疑在第一次渲染后需要重新渲染，这样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'}
...

有了这个，我的行是~23的Fab组件的高度.

我看到formatter的原型是formatter:function(cell, formatterParams, onRendered).我是否应该以某种方式使用onRendered，在那里我将强迫表格考虑到单元格的高度？如果是的话，我该怎么做呢？谢谢。

---

编辑。

进一步看，看起来tabulator忽略了它在自己的 "tabulator-cell "div中添加的padding（它添加了一个11px的padding，这让我的按钮被推了那么多），在第一次渲染时。

当重新排序其他列时，迫使重新渲染，高度就会变得正确。

在我的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;
    }
}

如果这能解决您的问题