How to center align tables in the Ag-Grid in React.js

Question

I am new to Ag-Grid React, I have created the table but by default, they are aligned on the left side. Can anyone tell me how to center align tables in AgGridReact ?

Answer 1

You can apply certain style on the column by declaring aCellStyle object in the column definition. If you want all columns to be centered:

<AgGridReact
  {...props}
  defaultColDef={{
    cellStyle: () => ({
      display: "flex",
      alignItems: "center",
      justifyContent: "center"
    })
  }}
/>

However if you only want to center align a specific column, put the cellStyle object in that column definition instead:

{
  headerName: "Country",
  field: "country",
  width: 120,
  cellStyle: () => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  })
},

Live Demo