Allow specifying component for Typography in case of no matches

[Aankhen]

Expected Behavior

With irrelevant options elided, this:

<MUIDataTable
        title={title} 
        columns={columns}
        options={{
            textLabels: {
              noMatch: <CircularProgress size={24} style={{marginLeft: 15, position: 'relative', top: 4}} />,
            }
            noMatchTypographyComponent: "div",
        }}
        data={tableRows}
      />

Results in this when there are no matches:

<Typography component="div">
   <CircularProgress size={24} style={{marginLeft: 15, position: 'relative', top: 4}} />
</Typography>

Which gives us a structure like:

<div>
  <div>…</div>
</div>

Which, while a little unnecessary, is valid.

Current Behavior

With irrelevant options elided, this:

<MUIDataTable
        title={title} 
        columns={columns}
        options={{
            textLabels: {
              noMatch: <CircularProgress size={24} style={{marginLeft: 15, position: 'relative', top: 4}} />,
            }
            noMatchTypographyComponent: "div",
        }}
        data={tableRows}
      />

Results in this when there are no matches:

<Typography>
   <CircularProgress size={24} style={{marginLeft: 15, position: 'relative', top: 4}} />
</Typography>

Because Material UI’s CircularProgress wraps its contents in a div, this gives us a structure like:

<p>
  <div>…</div>
</p>

Which causes a DOM nesting validation error.

Your Environment

Tech	Version
Material-UI	4.9.12
MUI-datatables	3.0.0
React	16.13.0
browser	Chrome 83

[patorjk]

Thank you for the report. I've put a fix for this in v3.2.0, which should come out next week and is available in beta here:

npm install mui-datatables@v3.2.0-beta.0

[Aankhen]

That was so quick! Thank you very much.

[patorjk]

Fixed in version 3.2.0