Search code examples
reactjsmaterial-uimaterial-table

Center align the search input of material-table

I'm simply trying to figure out how to center align the search input of Material-table.

<MaterialTable
  columns={[
    { title: "Type", field: "type" },
    { title: "Name", field: "name" },
    { title: "Status", field: "status" }
  ]}
  data={[
    { type: "user", name: "John Doe", status: "active" },
    { type: "user", name: "Lorem Ipsum", status: "active" }
  ]}
  options={{
    searchFieldAlignment: "right"
  }}
/>

I have looked through the documentation (https://material-table.com/#/docs/features/search) and I know you can set "searchFieldAlignment", but it's only for "left" or "right". I also tried to change "options.searchFieldStyle" by setting its position to 'absolute', but it seems like it's wrapped in a relative element. So didn't get that to work either.

Probably have to do some component overriding, but not sure how it would look like.

Example code here: https://codesandbox.io/s/material-table-forked-lqs7z?file=/src/AppTable.js:120-513

Solution

  • MaterialTable has a prop components which allows you to override components docs. here is an example:

     components={{
        Toolbar: (props) => (
          <div
            style={{
              display: "flex",
              justifyContent: "center"
            }}
          >
            <MTableToolbar {...props} />
          </div>
        )
      }}