Material-table: Make Paper Container Optional

[ghost]

Could we make the table wrapper optional? I prefer my table style without a Paper container.

[mbrn]

Why not. I will add a Container property to components.

[mbrn]

I am working on this.

[mbrn]

This is done. This will be in next release(1.9.0) in a few days.

How to use:
If you dont want nothing to cover component you can use React.Fragment. Or div like in example below.

<MaterialTable
 components={{
  Container: props => <div style={{background: '#AAA'}}>{props.children}</div>,
    //Container: React.Fragment
  }}
  columns={[
    { title: 'Adı', field: 'name', filtering: false, render: () => <div>merhaba</div> },
    { title: 'Soyadı', field: 'surname', filtering: false },
    { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
    { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' }, filtering: false }
  ]}
  data={[
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
  ]}
  title="Demo Title"
/> 

[eluchsinger]

Can we add an example for this? It was hard to find any documentation on this. If you can't do it, maybe I find time for it this week.

[mbrn]

Hi @eluchsinger

Try this:

<MaterialTable
                ....
                components={{
                  Container: props => props.children
                }}
              />

[eluchsinger]

@mbrn yes, thanks. I could solve it already. I was just giving feedback so you could add an official example as it wasn't easy to find the example hidden in this issue.

[Monteyne]

@mbrn Hello,
is there any other way to change container style ? i just want to change paper elevation to 0.
this method works; but seems like higher components can't access to DOM elements that rendered from props.children. Material-ui popover menu doesn't work on props.children elements

[mbrn]

@Monteyne

Try this:

....
components={{
Container: props =>
}}
/>

[Monteyne]

@mbrn having same result, no difference.

https://ibb.co/7260rf6 this is the screenshot of working version (without components)
https://ibb.co/2hHMbWG this is the screenshot of NOT working version (with components)

any idea ?

[mbrn]

@mbrn having same result, no difference.

https://ibb.co/7260rf6 this is the screenshot of working version (without components)
https://ibb.co/2hHMbWG this is the screenshot of NOT working version (with components)

any idea ?

link are broken. Can you fix them?

[Monteyne]

@mbrn sure, updated

https://ibb.co/7260rf6 this is the screenshot of working version (without components)
https://ibb.co/2hHMbWG this is the screenshot of NOT working version (with components)

[Monteyne]

@mbrn any luck ?

[mbrn]

@Monteyne

I still can not access to screenshots. Can you create a codesandbox please?

[Monteyne]

@mbrn sure
https://codesandbox.io/s/p9my8o9on7

when you click on vertical menu icon, you will see the bug

if we remove components property from table component, it will work as expected

[mbrn]

It is related with using a functional component when overriding Container.

Look at this: https://codesandbox.io/embed/1301mq3knj

[stbn694]

@mbrn This just solved a similar problem for me. Care to explain the reason? Just curious

[difagume]

Hello @mbrn, I used:

components={{ Container: props => <Paper {...props} elevation={0}/> }}

to hide the Paper of the table because in my project the page that presents the table is contained by a Dashboard.js as a parent page and this dashboard includes a Paper, but I would like help indicating how I can hide the line that is placed under the pagination, I have an example here: https://codesandbox.io/s/gracious-sea-l7sgc

thank you very much