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

Balaklava

did you ever get to the bottom of this? – Ichthyology

Answer 1

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

Ichthyology

Thanks for your input. Unfortunately this does not fix things for me: text cells are now not centered vertically, and the React button is still not fully displayed. – Balaklava

ah okay, have updated the answer with the vertical alignment fix that worked for my usecase. – Ichthyology

Sorry, but it's still a no go :-( I didn't spend much time on it though, I just injected that css in my code, without trying to figure out if some other css was conflicting, or something else like that. I'll try to get back to it soon when I get a bit more time. – Balaklava