Mui-datatables: TypeScript - Show all rows on the current page of the table without a vertical scroll bar when using 'responsive="scroll"' option.

[HyungNLee]

I was wondering if it is possible to add the ability to show all current rows on the page of the table without a vertical scroll bar when using the responsive="scroll" option using Typescript. Currently the height of the table is set at a fixed value.

I'm using Typescript and since Mui ThemeOptions.overrides does not contain a definition for Mui Datatables it won't let me override the height.

I'm avoiding use the stacked option because it causes an issue with the paper component from material ui when horizontally scrolling, causing it to end where the scrolling begins and showing what looks like an x axis overflow.

Thank you!

[gabrielliwerant]

Personally, I'm not a Typescript guy, so I'm of limited help here, but I'm pretty sure the material-ui guys have thought about this from a typescript perspective, so you might find help there. Maybe this will be of some help? https://material-ui.com/guides/typescript/

[ideoclickVanessa]

Could the max-height default simply be set to 100% by default and perhaps those that want to not have the 100% default could set a custom property? Thus, avoiding the whole need to override the MUI Theme Options.

[petrbela]

This really isn't a TypeScript-specific question (can someone remove TypeScript from the title?)

First of all, this should really be fixed in the library.

A temporary workaround for this issue is to override the responsiveScroll style. You can then use this DataTable component instead of MUIDataTable.

import React from 'react'
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
import MUIDataTable from 'mui-datatables'

export default function DataTable(props: any) {
  const theme = createMuiTheme({
    overrides: {
      MUIDataTable: {
        responsiveScroll: {
          overflowX: 'none',
          height: 'auto',
          maxHeight: 'auto',
        },
      },
    },
  })

  return (
    <MuiThemeProvider theme={theme}>
      <MUIDataTable {...props} />
    </MuiThemeProvider>
  )
}

Alternatively, to apply this change globally, you can wrap your entire component tree (somewhere in App or index) with the MuiThemeProvider, and continue using MUIDataTable.

[gabrielliwerant]

@petrbela This question has come up many times before, but it's different with Typescript. It's not as simple to override styles, as this question points out.

It's not clear, to me at any rate, which default setting would be better. Both full height and maxHeight have their merits, so no matter what the default setting is, there will be people that need to override the style setting. Perhaps there should be additional responsive options like, scrollMaxHeight and scrollFullHeight instead of just scroll.

In the mean time, I think it's worth keeping this question phrased as is in case anyone has specific experience with performing this kind of override in a Typescript setting.

[petrbela]

Ah, you're right, sorry I just skimmed the text and didn't notice it. (One can still use this solution in TypeScript, just needs to @ts-ignore it.)

It almost feels like the issue is in material-ui itself but unfortunately, TypeScript only supports extension through generics (which would work for a single case) but not through a union (which would be needed to support multiple mui-extending libraries).

As for the wording of the question, it seems to me the issue is not as much about scroll bars specifically as it is about overriding styles in general (not sure if there's an issue for that already).

[gabrielliwerant]

@petrbela No worries, thanks for chiming in! I'm certainly out of my element with ts, but if it can't be elegantly done with it, and there's continual need for specific overrides, it may be worth considering additional options for the specific use case mentioned here (though I agree the ts overrides problem will not be limited to this use case).

Haha, yes, there's always ignore! Certainly better than not being able to proceed at all.

[petrbela]

Well. I was researching some totally unrelated stuff and realized TypeScript already supports declaration merging.

So, long story short, this is the gist:

import { ComponentNameToClassKey } from '@material-ui/core/styles/overrides'

declare module '@material-ui/core/styles/overrides' {
  interface ComponentNameToClassKey {
    MuiDataTable?: {
      responsiveScroll: {
        height?: string
        maxHeight?: string
      }
    }
  }
}

If I get a bit of time later I can turn this into a PR.

Side note, MUI's documentation recommends customizing the styles on the createMuiTheme level but that would require some breaking changes. The proposed solution should work just as well.

[ideoclickVanessa]

The above type file didn't work for me. I needed to use this:

import { ComponentNameToClassKey } from '@material-ui/core/styles/overrides'

declare module '@material-ui/core/styles/overrides' {
    type MUIDataTableClassKey =
        | "responsiveScroll";

    type MUIDataTableHeadCellClassKey =
        | "root"
        | "toolButton";

    interface ComponentNameToClassKey {
        MUIDataTable: MUIDataTableClassKey;
        MUIDataTableHeadCell: MUIDataTableHeadCellClassKey;
    }
}

which then allowed me to define the overrides in the createMuiTheme like so:

const theme = createMuiTheme({
    "overrides": {
        "MUIDataTable": {
            "responsiveScroll": {
                "maxHeight": "unset",
            },
        },
        "MUIDataTableHeadCell": {
            "root": {
                "whiteSpace": "nowrap",
            },
            "toolButton": {
                "height": "unset",
            },
        },
        "MuiListItem": {
            "root": {
                "&$selected": {
                    "backgroundColor": "#2196F3",
                    "color": "#FFF",
                },
                "&$selected:focus": {
                    "backgroundColor": "#2196F3",
                    "color": "#FFF",
                },
                "&$selected:hover": {
                    "backgroundColor": "#2196F3",
                    "color": "#FFF",
                }
            }
        },
    },
    "palette": {
        "primary": {
            "contrastText": "#1E1D1B",
            "main": "#F9CB3F",
        },
        "secondary": {
            "contrastText": "#FFF",
            "main": "#2196F3",
        },
    },
    "props": {
        "MuiGrid": {
            "spacing": 1,
        }
    },
});

[JReinhold]

As of V2.10.0 it is now possible to use the prop responsive="scrollFullHeight" to make the table full height and a scroll behavior at the same time. That should fix the issue.

See https://github.com/gregnb/mui-datatables/pull/867

[jlucier]

@JReinhold
With scrollFullHeight I'm seeing the table at full height (great), but I'm not seeing horizontal scrolling for my tables. I'm concerned this is related to some kind of inherited styles similar to #732, however it still works (albeit with deprecation warnings) using the workaround from @petrbela.

I'm on 2.10.2.

[gabrielliwerant]

@jlucier Can you open up a new issue for that? It's a bug.

[gabrielliwerant]

@jlucier Nevermind, already merged!

[kenjoegolo]

@JReinhold
With scrollFullHeight I'm seeing the table at full height (great), but I'm not seeing horizontal scrolling for my tables. I'm concerned this is related to some kind of inherited styles similar to #732, however it still works (albeit with deprecation warnings) using the workaround from @petrbela.

I'm on 2.10.2.

I'm also facing this issue. I'm using version 2.11.1

[jlucier]

@kenjoegolo As far as I can tell, it's fixed in 2.12.0

[kenjoegolo]

@jlucier I'm trying to follow this scroll behavior on latest version 2.12.0

https://codesandbox.io/s/muidatatables-custom-toolbar-9u979

but what happens on my side is there is no vertical scroll on my table.

here --> https://codesandbox.io/s/hopeful-firefly-6rj2u

[jlucier]

@kenjoegolo You don't want scrollFullHeight then. From the docs

responsive: Enable/disable responsive table views. Options: 'stacked', 'scrollMaxHeight' (limits height of table), 'scrollFullHeight' (table takes on as much height as needed to display all rows set in rowsPerPage)

Seems like you want to use scrollMaxHeight.