DataGrid 显示到屏幕后延迟加载 MUI DataGrid 列

Question

MUI DataGrid 是否可以在屏幕上显示 MUI DataGrid 表格后加载一列数据？ 这些额外的数据列需要时间从数据库中获取，因此我想在表完全加载到屏幕后使这些数据可用。

对于这些额外的数据列，我想进行另一个 API 调用（使用 React-query），当数据准备好后，我想在列中显示它。直到我可以在该栏中显示加载程序。

我尝试在 DataGrid 的

renderCell

方法中进行 API 调用，但它影响了 DataGrid Table 的加载时间。

{
  field: "location",
  headerName: "Location",
  flex: 1,
  minWidth: 300,
  renderCell: (params) => (
    // API Call Here
  ),
}

提前致谢。

Answer 1

Mui v5 dataGrid 中的

hello Abasaheb Gaware 有

loading

属性，您可以将反应查询变量

.isloading

传递到

loading

属性以显示加载，直到获取数据 这是一个简单的例子：

<DataGrid
    components={{
      LoadingOverlay: LinearProgress,
    }}
    loading = {yourReactQueryVariable.isloading}
    {...data}
  />

Answer 2

所以在这种情况下你会受到一点影响：D你必须使用渲染单元并在该渲染单元中写入if条件，直到我们没有任何数据你必须显示加载你可以使用材质UI循环进度

<CircularProgress color={'inherit'}/>

但要了解更多信息，您必须编写函数组件并将数据传递给该函数组件

Answer 3

使用 renderCell 而不是 valueGetter。这是我的用例的一个例子：

      renderCell: (params) => {
    // Access the uuid property from params.row
    const uuid = params.row.uuid;

    // Use a loading indicator while fetching market price
    if (isMarketPriceLoading) {
      return (
        <>
          <CircularProgress />
        </>
      );
    }

    // Use an error indicator if fetching market price failed
    if (isMarketPriceError) {
      return "Error";
    }

    // Access marketPriceData using the uuid
    const marketPrice = marketPriceData.find((item) => item.uuid === uuid);
    const sourceCurrency = "IDR";
    const targetCurrency = defaultCurrency;
    const convertedAmount = convertCurrency(
      currencyData,
      sourceCurrency,
      targetCurrency,
      marketPrice.marketValue
    );
    // Return the market price or 'N/A' if not found
    return `${convertedAmount} ${defaultCurrency}`;
  },