Mui-datatables: Custom height of table

[pawelkrystkiewicz]

How do I set table height?
I seems that none of the style application methods work on this table.

[rem4ik4ever]

@pawelkrystkiewicz
I think you can just wrap table element with div and set height you want. Might also want to add sticky header option to it if height is too small.

[gabrielliwerant]

If you use responsive scroll, you can use:

const myTheme = createMuiTheme({
  overrides: {
    MUIDataTable: {
      responsiveScroll: {
        maxHeight: '580px'
      }
    }
});

<MuiThemeProvider theme={myTheme}>
  <MUIDataTable ... />
</MuiThemeProvider>

If you use responsive stacked option, then as @rem4ik4ever says, you have to wrap the whole table in a div and then you can set max-height and overflow: scroll on it. I believe you will need both.

[devdeer-alex]

@gabrielliwerant I need this too but I'm using TypeScript. If I now use this like:

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme({`        
    overrides: {
        MuiDataTable: { }
    }
});

it will not see an override property for MuiDataTable (I switch to lower cases on "ui" because this seems to be the standard in typescript interfaces). IntelliSense will provide me list of overrides like MuiTable and MuiTableBody but not for MuiDataTable. Am I missing an import or how can I solve this else?

[gabrielliwerant]

@devdeer-alex Javascript and CSS naming is case-sensitive, so I don't think you have any way around using the MUIDataTable name exactly as it is. If I change it to MuiDataTable, it no longer works.

[ideoclickVanessa]

If I attempt the override in TypeScript like so:

const myTheme = createMuiTheme({
  overrides: {
    MUIDataTable: {
      responsiveScroll: {
        maxHeight: '580px'
      }
    }
});

I get the following type error as the Overrides class in material-ui does not know about the possible overrides in mui-datatables:

Argument of type '{ "overrides": { MUIDataTable: { responsiveScroll: { maxHeight: string; }; }; "MuiListItem": { "root": { "&$selected": { "backgroundColor": string; "color": string; }; "&$selected:focus": { "backgroundColor": string; "color": string; }; "&$selected:hover": { ...; }; }; }; }; "palette": { ...; }; "props": { ...; }; "...' is not assignable to parameter of type 'ThemeOptions'.
  Types of property 'overrides' are incompatible.
    Type '{ MUIDataTable: { responsiveScroll: { maxHeight: string; }; }; "MuiListItem": { "root": { "&$selected": { "backgroundColor": string; "color": string; }; "&$selected:focus": { "backgroundColor": string; "color": string; }; "&$selected:hover": { ...; }; }; }; }' is not assignable to type 'Overrides'.
      Object literal may only specify known properties, and 'MUIDataTable' does not exist in type 'Overrides'.

Is there any guidance on how to get this to work in TypeScript?

[alfrejivi]

is there any update on this?

[gabrielliwerant]

There is a related thread here that may be of some use: https://github.com/gregnb/mui-datatables/issues/580.

[gabrielliwerant]

The only issue remaining here is the typescript issue, so closing this thread in favor of #580 linked here.

[opandey007]

If I attempt the override in TypeScript like so:

const myTheme = createMuiTheme({
  overrides: {
    MUIDataTable: {
      responsiveScroll: {
        maxHeight: '580px'
      }
    }
});

I get the following type error as the Overrides class in material-ui does not know about the possible overrides in mui-datatables:

Argument of type '{ "overrides": { MUIDataTable: { responsiveScroll: { maxHeight: string; }; }; "MuiListItem": { "root": { "&$selected": { "backgroundColor": string; "color": string; }; "&$selected:focus": { "backgroundColor": string; "color": string; }; "&$selected:hover": { ...; }; }; }; }; "palette": { ...; }; "props": { ...; }; "...' is not assignable to parameter of type 'ThemeOptions'.
  Types of property 'overrides' are incompatible.
    Type '{ MUIDataTable: { responsiveScroll: { maxHeight: string; }; }; "MuiListItem": { "root": { "&$selected": { "backgroundColor": string; "color": string; }; "&$selected:focus": { "backgroundColor": string; "color": string; }; "&$selected:hover": { ...; }; }; }; }' is not assignable to type 'Overrides'.
      Object literal may only specify known properties, and 'MUIDataTable' does not exist in type 'Overrides'.

Is there any guidance on how to get this to work in TypeScript?

i also face same issue.....i solved this issue by upgrading "@material-ui/core": "^4.1.1", "mui-datatables": "^3.1.3-beta.0",