Mui-datatables: 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 [email protected]

[Aankhen]

That was so quick! Thank you very much.

[patorjk]

Fixed in version 3.2.0