gregnb / gregnb/mui-datatables
When options.display == null, the Grid fails to render
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
First of all, thanks so much for this component, it's (almost) exactly what I needed for displaying search data with React and Material UI.
## Expected Behavior
In MuiDataTable, you can set different options per column. When I don't want to display a column, I set `options.display` to `false`. I have an ASP.NET Core backend, which passes the column configurations to my client. In the backend, there simply is (at the moment) a .JSON file which gets deserialized into a .NET-Object (a Model) which then gets serialized and passed to the client. The model also defines a `SearchOption` property which has a `Display `property.
The Model in the backend looks like this:
```
public class SearchAttribute
{
public string Name
{
get;
set;
}
public string Label
{
get;
set;
}
public SearchOption Options
{
get;
set;
}
}
public class SearchOption
{
public bool Filter
{
get;
set;
}
public bool Sort
{
get;
set;
}
public string SortDirection
{
get;
set;
}
public string Display
{
get;
set;
}
}
}
```
The config in JSON on the backend site looks like this:
```
"Attributes": [
{
"name": "Id",
"label": "",
"options": {
"filter": false,
"sort": false,
"sortDirection": null,
"display": "false"
}
},
{
"name": "PhotoUrl",
"label": " ",
"options": {
"filter": false,
"sort": false,
"sortDirection": null,
}
},
....
```
Notice that the display option isn't set on `PhotoUrl`, since I want standard behaviour here. I only want the `Id ` not to display on the grid.
Now my when my JSON Serializer deserializes the JSON input to the .NET Object, it interprets the missing `display` property on `PhotoUrl`'s options as `nul `- which is fine, since this is standard behaviour. When this gets serialized again to JSON (with `options.display: null` on `PhotoUrl`) and passed to the client, I expect the grid to render with standard behaviour on this property (which should be `display: true`).
## Current Behavior
The problem is that setting a display property to `null` doesn't bring up the standard behaviour, it crashes the app. The problem here is that MuiDataTable only checks if `display` is `undefined` but not `null`. It then goes on trying to call the `toString()` method on `display`, which of course fails because it's `null`.
## Change needed
It's actually pretty simple: The error happens on `Line 457` of `MUIDataTable.js`. Currently, it looks like this:
```
if (options) {
if (options.display !== undefined) {
options.display = options.display.toString();
}
...
}
```
`if (options.display !== undefined)` should be changed to either `if (options.display)` or if it needs to be specific to `if (options.display !== undefined || options.display !== null)` and this should solve the problem. However, I only noticed this problem and I am not that deep into the code of MUIDataTable, so I thought I would bring this up as an issue here instead of generating a pull request.
Optional current workaround for the problem:
* specifically set every options.display on every column
* in ASP.NET, user JSON Serializer settings to tell the Serializer to use another default than `null` when the `option.display` is not defined
## Steps to Reproduce (for bugs)
Simple codesandbox example where I set the display option of the first column to `null`. Set it to any other valid value or leave it to `undefined` to make the example work again:
https://codesandbox.io/s/morning-shadow-t0m13?file=/src/App.js
Thanks for looking at this!
## Your Environment
| Tech | Version |
|--------------|---------|
| Material-UI | 4.9.11 |
| MUI-datatables | 2.14.0 |
| React | 16.13.1 |
| browser | Any |
Contributor guide
No contributing guide indexed for this repository
Research direction
Start at line 457 of MUIDataTable.js and reproduce the failure using the linked CodeSandbox with the first column's display option set to null. Verify that null follows the standard display behavior and that the grid renders without crashing, while preserving the existing handling for false and undefined.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100