fair-rose•8mo ago

ways to define datagrid with rows pre-defined

for now I get my rows data from: const { data: testJobData, isLoading } = useCustom<PostUniqueCheckResponse>({ url: ${apiUrl}/jobs, method: "get", }); and I defined my datagrid component in this way: <DataGrid rows={testJobData?.data} columns={columns} autoHeight style={{ marginTop: '16px' }} /> but there is a problem that: 'PostUniqueCheckResponse | undefined' is not assignable to type 'readonly any[]'. Type 'undefined' is not assignable to type 'readonly any[]'. Is there something wrong with my usage of datagrid? how can I fix this problem, or could you give me an example of using useCustom to fetch the row data and then apply the row data in a datagrid component initialization

2 Replies

kapa.ai•8mo ago

Hi @zion_48046. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering is due to TypeScript's strict null checks. The useCustom hook returns undefined when the data is still loading or if there's an error. The DataGrid component, however, expects an array for its rows prop. To fix this, you can provide a default value for rows when testJobData?.data is undefined. Here's how you can do it:

<DataGrid rows={testJobData?.data || []} columns={columns} autoHeight style={{ marginTop: '16px' }}  />

<DataGrid rows={testJobData?.data || []} columns={columns} autoHeight style={{ marginTop: '16px' }}  />

In this case, if testJobData?.data is undefined, an empty array [] will be used as a fallback. Here's an example of how to use useCustom to fetch data and use it in a DataGrid component:

import React from 'react';  
import { useCustom, useApiUrl } from "@refinedev/core";  
import { DataGrid, GridColumns } from "@refinedev/mui";  

interface FetchedData {
  // Define the shape of your fetched data here
}

const Table: React.FC = () => {  
  const apiUrl = useApiUrl();  
  const { data, isLoading } = useCustom<FetchedData>({  
    url: `${apiUrl}/your-custom-endpoint`,  
    method: "get",  
  });

  const columns: GridColumns = [  
    {  
      field: "id",  
      headerName: "ID",  
    },  
    {   
      field: "name",  
      headerName: "Name"   
    },  
    {   
      field: "Age",  
      headerName: "Age"   
    },  
  ];  

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (  
    <DataGrid  
      rows={data || []} // Pass the fetched data as rows
      columns={columns}   
      autoHeight   
    />  
  )  
}

export default Table;

import React from 'react';  
import { useCustom, useApiUrl } from "@refinedev/core";  
import { DataGrid, GridColumns } from "@refinedev/mui";  

interface FetchedData {
  // Define the shape of your fetched data here
}

const Table: React.FC = () => {  
  const apiUrl = useApiUrl();  
  const { data, isLoading } = useCustom<FetchedData>({  
    url: `${apiUrl}/your-custom-endpoint`,  
    method: "get",  
  });

  const columns: GridColumns = [  
    {  
      field: "id",  
      headerName: "ID",  
    },  
    {   
      field: "name",  
      headerName: "Name"   
    },  
    {   
      field: "Age",  
      headerName: "Age"   
    },  
  ];  

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (  
    <DataGrid  
      rows={data || []} // Pass the fetched data as rows
      columns={columns}   
      autoHeight   
    />  
  )  
}

export default Table;

In this example, useCustom is used to fetch data from a custom endpoint. The fetched data is then passed directly to the DataGrid component as the rows prop. Please replace FetchedData and /your-custom-endpoint with the actual shape of your data and your actual endpoint. Please note that this approach bypasses some of the features provided by useDataGrid, such as automatic pagination and sorting. If you need these features, you may need to implement them manually. Sources: - Discord support thread: Seeking guidance on utilizing custom data source with Refine's useDataGrid hook (https://discord.com/channels/837692625737613362/1129857735282921603) - Refine Documentation: useCustom (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/#basic-usage) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@1156621086176321576> kapa.ai is still learning and improving, please let us know how it did by reacting below