How to add an additional column to the table if the data comes as an object?

Question

React

I am using the material ui component

<DataGrid className={styles.table} columns={columns} rows={rows} getRowId={row => row.tradePlace_id} />

I pull the data into rows from the server, the task is to add a static column to the incoming data, that is, the data for it does not come from the server.
In addition, the column should be a button, when clicked, it will be possible to capture the entire row to which it belongs.
I initialize like this

const rows: GridRowsProp = tradePlaces.tradePlaces;

  const columns: GridColDef[] = [
        {field: 'col1', headerName: 'Изменить', width: 500}, // Здесь должна быть кнопка
        {field: 'tradePlace_id', headerName: '№', width: 300},
        {field: 'name', headerName: 'Название', width: 300},
        {field: 'adress', headerName: 'Адрес', width: 300},
    ];

Tell me how to implement this, I looked at the documentation for the component, but did not quite understand how to solve the task. I use TS in my project, I will be extremely grateful if there is an example with it

Answer 1

looked at the documentation for the component, but...

looked bad