Material-table: Unexpected behavior with header styling

[jakeleventhal]

Describe the bug
https://mbrn.github.io/material-table/#/docz-examples-10-example-component-overriding
When trying to apply this to the table header, the cell columns get unaligned

Screenshots
Here is my code with a screenshot:

components={{
                    Header: props => (
                      <div style={{ background: palette.primary.main }}>
                        <MTableHeader {...props} />
                      </div>
                    )
                  }}

[mbrn]

Hi @jakeleventhal ,

You can not cover MTableHeader with a div.

Can you try this instead of it:

<MaterialTable
  options={{
    headerStyle: { background: 'red' }
  }}
  columns={[
    { title: 'Adı', field: 'name' },
    { title: 'Soyadı', field: 'surname' },
    { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
    {
      title: 'Doğum Yeri',
      field: 'birthCity',
      lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
    },
  ]}
  data={[
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
  ]}
  title="Demo Title"
/>

[jakeleventhal]

That works, the docs made it a little hard to infer that this was the correct solution though.

Thanks!

[jakeleventhal]

This change breaks when upgrading from 1.24->1.25+

[mbrn]

Hi @jakeleventhal ,

It is fixed with 1.28.1.