ToolkitProvider disables overlayFactory

[mathiaswillburger]

I was wondering if there is an issue of combining the ToolkitProvider with the overlay for spinners, or if I am simply missing something in my code? Once I enable the ToolkitProvider the overlay is not showing anything anymore.

I have set up a table with a spinner overlay according to the documentation, more or less like this:

<BootstrapTable
  data={store.dataSource}
  columns={columns}
  keyField={keyField}
  loading={store.loading}
  overlay={overlayFactory({
    spinner: true,
    background: 'rgba(192,192,192,0.3)'
  })}
  _...some more properties..._
/>

Up to this point everything works fine. However, as soon as I wrap the table in the ToolkitProvider (which I will need later for some other functionality) the spinner does not show anymore. This his how it looks afterwards:

<ToolkitProvider
    data={store.dataSource}
    columns={columns}
    keyField={keyField}
    loading={store.loading}
>
    {(props) => (
        <BootstrapTable
            {...props.baseProps}
            overlay={overlayFactory({
            spinner: true,
            background: 'rgba(192,192,192,0.3)'
            })}
            _...some more properties..._
        />
    )}
</ToolkitProvider>

It also makes no difference if I move the overlay property also to the ToolkitProvider and pass it on via the ...props.baseProps.

I did not change any of the functionality regarding data loading. Simply wrapping the component makes the overlay not working anymore, as if it were not present at all.

These are the versions I am using:

    "react-bootstrap-table-next": "^2.0.1",
    "react-bootstrap-table2-editor": "^1.2.2",
    "react-bootstrap-table2-filter": "^1.1.1",
    "react-bootstrap-table2-overlay": "^1.0.0",
    "react-bootstrap-table2-paginator": "^2.0.1",
    "react-bootstrap-table2-toolkit": "^1.1.2",

Am I missing something?

[AllenFang]

@mathiaswillburger sorry for lately reply, I got serious disease from last weekend.

currently, I will not encourage people to use react-bootstrap-table2-overlay due to there're few issue can not be solved immediately. this case is one of them. So far i will suggest to use noDataIndication, here is an example.

[mathiaswillburger]

No worries, hope you are better now.

Thanks for your reply and suggestion!

noDataIndication is an interesting approach. I already use a custom spinner overlay which I just place over the whole table on loading and it works fine. But it would have been nice to use the integrated overlay which would align way better with the table layout.

So for now I'll stay with my approach, but I hope to see that feature working sometime in the future.

[AllenFang]

@mathiaswillburger let me open this issue again and I will explore if there's any good solution on this, thank you 👍

[mathiaswillburger]

Great thx! Let me know if you need testing. I have a solution in place with remote data fetching, the overlay code pretty much is in place and needs only to be activated if it works as documented.

[Mouerr]

@mathiaswillburger could you please provide me your solution to solve this problem, i have the same issue.

[mathiaswillburger]

@mouerrr I basically use the loading property (in my case a store which manages it) to overlay a spinner while data is loading. Depending on your CSS you can achieve centering it on the table properly, which is why I am wrapping it again in a data-table-wrap tag. I completely removed the overlay and spinner code mentioned above. This is more or less how you can achieve the same result:

<ToolkitProvider
  _... some other props ..._
  loading={store.loading}
>
  {(props) => (
    <div className="data-table-wrap">
      {store.loading && <Spinner className="data-table-spinner" />}
      <BootstrapTable
        {...props.baseProps}
        noDataIndication={intl.formatMessage({ id: 'no.content.key.example' })}
        _... some other props ..._
      />
    </div>
  )}
</ToolkitProvider>

I hope this helps until this issue is fixed.