Properly display React component in react-tabulator column

Question

I am trying to display a material-ui react component inside a tabulator table. Things display properly, except for the row's height. I suspect that a re-rendering is required after the first render, so tabulator knows the React component's height, but I am not quite sure of how to do that. Code looks something like this:

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
    }
];

Which are used in my table later on:

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

With this, my row is ~ 2/3 the Fab component's height.

I see that the formatter prototype is formatter:function(cell, formatterParams, onRendered). Should I somehow use onRendered, is that where I would force the table to take into account that cell's height? If so how would I do that? Thanks.

Edit:

Looking further, it looks like tabulator is ignoring the padding it is adding in its own 'tabulator-cell' div (it adds a 11px padding, which pushes my button by that much) on the first render.

When re-ordering other columns, which forces a re-render, the height becomes right.

There are a few redraw calls accessible through props.cell._cell inside my RegisterButton, I just don't see how and when to call them...

Rich Rich · Accepted Answer · 2020-05-25T17:35:34

did you ever solve this?

I have the exact same isue but with width - whereby everything is fine post a column sort.

I solved the cell padding issue with the CSS:

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

To center vertically you can edit the base styles with the below, this worked for my use case

.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;
    }
}

In case that solves your issue

Properly display React component in react-tabulator column

1 Answers