v7.0.0-alpha-10 - selectableRowsComponent ts issue and content overflow issue

[izaacdb]

I'm trying out your alpha 10 (thanks for updating everything, it is working much better for me in terms of TS errors) and found a few problems so far.

selectableRowsComponent ts issue

With import {Checkbox} from '@material-ui/core

If I put selectableRowsComponent={Checkbox} there is a TS error:

TS2322: Type '(props: CheckboxProps) => Element' is not assignable to type '"input" | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | undefined'.
Type '(props: CheckboxProps) => Element' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>': type, props, key

If I put selectableRowsComponent={<Checkbox />}
There is a runtime error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

content overflow

I have a 100vh container using display:flex and flex-direction:column. This leads to un-scrollable content with 20+ rows. I think this is because of the div being set to display:table which stops the max-height:100% from working.

I use this to fix it:

.rdt_TableHeader+div>div{
    display: block;
    height: 100%;
}

[jbetancur]

There is def something wrong with the typing. I'll investigate. As for the content overflow a working example on codesandbox would be helpful

[jbetancur]

#809 is merged with fixes and will roll out in alpha 11

[jbetancur]

Going to close this for now as fixing #809, but for the content overflow please open a separate issue with a working example.