Material-table: How to adjust the width of the Material Table and how do I make the icons show up?

[brittanywang]

Right now my icons are now showing up as shown in screenshot below:

would the code simply be:

<MaterialTable
     icons={
                { Search, NextPage }
                }
     columns={[....]}
 />

I tried doing so, but I got this error:

In addition, is there a way to adjust the size of Material Table itself? I don't see a width/height prop.

Thank you so much in advance!

[brittanywang]

Is there also a way to disable displaying:

[vinceliu21]

I also have a similar question. Is there a way to adjust the width of both the table itself and respective columns of the table?

[JWLangford]

@brittanywang for your question about displaying the Rows per page:
<MaterialTable options={{ paging: false }} />
That did it for me.

[brittanywang]

@JWLangford thank you!

[mbrn]

To set width of columns use both cellStyle and headerStyle:

{ title: 'Name', field: 'name',
     cellStyle: {
       width: 20,
       maxWidth: 20
     },
     headerStyle: {
       width:20,
       maxWidth: 20
     }
    },

[mbrn]

for table width you can cover table with a div that has its own width

[brittanywang]

@mbrn thank you for your comments! I am still unable to display the icons. Do you have any suggestions? Do I have to import MaterialUI? Currently I'm using:

<MaterialTable
     icons={
                { Search, NextPage }
                }
     columns={[....]}
 />

Thank you for your time!

[mbrn]

@brittanywang How did you import icons Search and NextPage

[brittanywang]

@mbrn forgot to close this, resolved in (#93). Many thanks again!

[indraneelpradhan]

when i set data table in container, it exceeds than container, how i fix this issue

[juliosilvacwb]

I had the same problem, but I solved as

cellStyle: {
width: 300,
minWidth: 300
},
headerStyle: {
width: 300,
minWidth: 300
},
...

If you want to down size use maxWidth, but if you want to up size use minWidth

[royliu007]

Is there also a way to disable displaying:

in the options you can disable the pagination by using paging: false
```
options = {{
paging: false
}}

[jaggaer-npasic]

but if you want to up size use minWidth

it's not working...

[Henao]

but if you want to up size use minWidth

it's not working...

It's true, it doesn't work, but this does: Put width: 120 (or whatever value you need) as an attribute of the column, just like you do with title: "my title", width: 50, ... etc
https://material-table.com/#/docs/features/fixed-columns

[Strauteka]

This works for me.

With Gson in backend as json.

JsonDataKeys: simple enum to store names.

public static JsonObject getKeyCell() {
        JsonObject key = new JsonObject();
        key.addProperty(JsonDataKeys.title.name(), "Key");
        key.addProperty(JsonDataKeys.field.name(), JsonDataKeys.key.name());
        key.addProperty(JsonDataKeys.editable.name(), "never");

        JsonObject keyCellStyle = new JsonObject();
        keyCellStyle.addProperty("maxWidth", "200px");
        key.add("cellStyle", keyCellStyle);
        key.add("headerStyle", keyCellStyle);
        key.addProperty("width", "200px");
        return key;
    }

[RoosterH]

It looks like the min value is 100.
I tried
cellStyle: {
backgroundColor: '#bfbfbf',
color: '#000000',
width: 100,
maxWidth: 100
},
headerStyle: {
backgroundColor: '#bfbfbf',
color: '#000000',
width: 100,
maxWidth: 100
}
It only works for number above 100. Cannot go any lower.