React material-table - center table title

Question

I am using material-table with my react project.

How I can center table title ?

Here is codesandbox example:

https://codesandbox.io/s/silly-hermann-6mfg4?file=/src/App.js

I want to make title "Average Expense ratio" to be in the center:

I tried adding style prop to the MaterialTable with textAlign:"center" but it does not work. Is it even possible to do it?

Answer 1

You can override Toolbar component and provide custom title react component if required.

import "./styles.css";
import MaterialTable, { MTableToolbar } from "material-table";
import Typography from "@material-ui/core/Typography";

const MyNewTitle = ({ text, variant }) => (
  <Typography
    variant={variant}
    style={{
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis"
    }}
  >
    {text}
  </Typography>
);
export default function App() {
  const softRed = "#CC6666";

  //GREENS

  const forestgreen = "#556B2F";
  const limegreen = "#228B22";
  const lightgreen = "#3CB371";

  //ORANGES
  const softOrange = "#ffd27f";

  return (
    <div className="App">
      <MaterialTable
        style={{}}
        title={<MyNewTitle variant="h6" text="Average Expense Ratio" />}
        components={{
          Toolbar: (props) => (
            <div
              style={{
                alignItems: "center",
                justifyContent: "center",
                display: "flex"
              }}
            >
              <MTableToolbar {...props} />
            </div>
          )
        }}
        columns={[
          {
            title: "0.19 and below",
            field: "first",

            headerStyle: {
              backgroundColor: forestgreen
            }
          },
          {
            title: "0.20 to 0.48",
            field: "first",
            headerStyle: {
              backgroundColor: limegreen
            }
          },
          {
            title: "0.49 to 0.77",
            field: "first",
            headerStyle: {
              backgroundColor: lightgreen
            }
          },
          {
            title: "0.78 to 1.06",
            field: "first",
            headerStyle: {
              backgroundColor: softOrange
            }
          },
          {
            title: "1.07 and above",
            field: "first",
            headerStyle: {
              backgroundColor: softRed
            }
          }
        ]}
        data={[]}
        options={{
          headerStyle: {
            color: "#FFF",
            textAlign: "center",
            whiteSpace: "nowrap",
            fontSize: 10
          },

          paging: false,
          search: false,
          sorting: false,
          showEmptyDataSourceMessage: false
        }}
      />
    </div>
  );
}