Loader is not showing during paging or filtering in MUIDatatable

Question

I am using MUIDatatable in my React project that uses redux. I am showing a loader during an api call which is working fine for the first time when MUIDatatable gets data. But when I use filter or change page from paging toolbar my loader is not showing. I use a redux setup where my reducer returns the state loading: true and after the api call it returns the state loading: false which is perfectly ok but still loader is not showing. I used the following option where I used my loader component:

const options = {
    filterType: 'dropdown',
    responsive: 'scrollFullHeight',
    serverSide: true,
    count: total,
    page: page,
    searchText: tableState.options.searchText,
    customToolbarSelect: renderCustomSelectToolbar,
    textLabels: {
        body: {
            noMatch: loading ?
                <Loader loading={loading} /> :
                'Sorry, there is no matching data to display',
        },
    }
};

Then I used that option into my MUIDatatable like:

<MUIDataTable
    title={"Service Request List"}
    data={requests}
    columns={columns}
    options={options}
/>

Answer 1

I found my solution. we need to use loading props and ternary operator as below:

{ 
   loading ?  <Loader loading={loading}/> :
   <MUIDataTable
      title={"Service Request List"}
      data={requests}
      columns={columns}
      options={options}
   />
}