React-table: Remove No Rows Found Box

[dahudson88]

What version of React-Table are you using?
Your bug may already be fixed in the latest release. Run yarn upgrade react-table!
Place your version here...

"react-table": "^6.7.6",

What bug are you experiencing, or what feature are you proposing?
Please include a detailed explanation here...

Is there a way to default the 'No Rows Found' Box to be transparent or off? I have removed the text, but still there is a white box there.

Is there a way to turn this on and off? Below is an image of the issue I am seeing...

Thanks,
Dwight Hudson

[lukaswelinder]

It's classname is .rt-noData, see stylesheet: https://github.com/react-tools/react-table/blob/f70d453caa81b263794b5e31329b5d1850882ba1/src/index.styl#L268

The simplest approach to setting its visibility on/off would be to use the getNoDataProps decorator to set styles based on some condition:

getNoDataProps() {
  if(/* some condition */) return { style: { display: 'none' } };
  return {};
}

[gary-menzel]

As @lukaswelinder has said - that is probably the only way (there is no flag for it). Change the background color to match your theme, set it to display: none - anything like that.

You don't necessarily have to redo the actual stylesheet - you could simply include another stylesheet after the main one with your custom styling in pure CSS (this is what I do).

As this is an implementation question, I will close this issue. Any further discussion is best done over on the #react-table Slack channel (badge at the top of the README in the doco). Thanks.

[Petercopter]

Another approach could be

<ReactTable NoDataComponent={() => null} />

[thedustyrover]

It would be nice if the API just allowed this to be set by a boolean flag

[nikhil-tayal]

"No Rows Found" overlapping the headings of tables. Is there any way to change the styling of .rt-nodata. I tried to override the class name and change the index.sty but both the things are not working.

[tannerlinsley]

"No Rows Found" overlapping the headings of tables. Is there any way to change the styling of .rt-nodata. I tried to override the class name and change the index.sty but both the things are not working.

I would ask this question in https://spectrum.chat/react-table with the [V6] tag. Thanks!

[Vaishali-Pathak]

"No Rows Found" overlapping the headings of tables. Is there any way to change the styling of .rt-nodata. I tried to override the class name and change the index.sty but both the things are not working.

yes there is a way ,but its a bit tricky....