如何在 React.js 的 Ag-Grid 中居中對齊表格

Question

我是 Ag-Grid React 的新手，我已經創建了表格，但默認情況下，它們在左側對齊。 誰能告訴我如何在AgGridReact中居中對齊表格？

Answer 1

您可以通過在列定義中聲明CellStyle object 來在列上應用特定樣式。 如果您希望所有列居中：

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

但是，如果您只想居中對齊特定列，請將cellStyle object 放在該列定義中：

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

現場演示