Shopify Polaris - Stop DataTable from resizing

Question

In my React project I am using a Shopify Polaris DataTable. It looks like this:

When I am clicking the pencil button of one row, the Badge changes and it looks like this:

The problem here is, when changing that Badge, all the columns and their elements resize a little bit, and that short animation is not beautiful.

I would prefer if the columns dont change, but since this is not a normal html table, I dont know how to do so.

The relevant code is this:

<Card>
    <Card.Section>
        <DataTable
            columnContentTypes={[
                'text',
                'text',
                'text'
            ]}
            headings={[
                'Category',
                'Enabled',
                'Actions'
            ]}
            rows={categories}
            verticalAlign="middle"
       />
    </Card.Section>
</Card>

To create the data for the rows, I am using this:

for (let category of allCategories.data) {
    let tempArray = [
        category.name, 
        enabledOrDisabledTag(category.visibility),
        <ButtonGroup spacing="extraTight"><Button onClick={() => editCategory(category)} icon={<Icon source={EditMajor} color="base" />}></Button><Button onClick={() => deleteCategory(category.uuid)} destructive icon={<Icon source={DeleteMajor} color="base" />}></Button></ButtonGroup>      
    ];

    convertedData.push(tempArray);
 }

 setCategories(convertedData);

Does anyone know how I can stop the tables from resizing? Or stop the row elements from changing position?

I appreciate every help!