在 MUIDatatable 中的分页或筛选期间未显示加载程序

Question

我在使用 redux 的 React 项目中使用 MUIDatatable。我在 api 调用期间展示了一个加载器，它在 MUIDatatable 获取数据时首次正常工作。但是当我使用过滤器或从分页工具栏更改页面时，我的加载器没有显示。我使用 redux 设置，其中我的减速器 returns 状态 loading: true 并且在 api 之后调用它 returns 状态 loading: false 这完全没问题，但仍然没有显示加载器。我在使用 loader 组件的地方使用了以下选项：

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',
        },
    }
};

然后我将该选项用于我的 MUIDatatable，例如：

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

Answer 1

我找到了我的解决方案。我们需要使用加载道具和三元运算符，如下所示：

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

Answer 2

带有状态的选项应该直接在组件属性中指定：

<MUIDataTable
    title={"Service Request List"}
    data={requests}
    columns={columns}
    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',
        },
    }
}}
/>

这行得通。当在变量中指定具有自定义状态的选项时，它不起作用。

至于你的解决方案，它完成了工作，但“一个不太理想的解决方案，因为它导致整个 table 在加载新数据时消失，例如异步分页，搜索，这会导致大量页面卡顿，因为table 每次加载新数据时都会消失并重新出现

在 MUIDatatable 中的分页或筛选期间未显示加载程序

Loader is not showing during paging or filtering in MUIDatatable

reactjs

redux

mui-datatable