extended-salmon•16mo ago

Request for Assistance with useDataGrid

Hello, I hope this message finds you well. I am reaching out because I am currently facing an issue with the useDataGridhook with DataGridPro in conjunction with other hooks, and I am in need of some guidance and assistance. To provide some context, I have implemented pagination on the server side, and in order to obtain the total row count, I have been sending a response from the resource that includes an object structured as follows:

{
  data: [all the rows],
  total: totalRowCount
}

{
  data: [all the rows],
  total: totalRowCount
}

Upon receiving this response, I have been destructuring the 'total' and 'data' properties separately, using the following code:

const { data: traceLineData, total: totalTraceLines } = dataGridProps.rows as unknown as RowsData;

const { data: traceLineData, total: totalTraceLines } = dataGridProps.rows as unknown as RowsData;

Subsequently, in my DataGridPro component, I have utilized the extracted data in the following manner:

<DataGridPro
  {...dataGridProps}
  pagination
  rows={traceLineData || []}
  filterModel={undefined}
  rowCount={rowCountState}
  pageSizeOptions={[25, 50, 100]}
  columns={columns}
  autoHeight
/>

<DataGridPro
  {...dataGridProps}
  pagination
  rows={traceLineData || []}
  filterModel={undefined}
  rowCount={rowCountState}
  pageSizeOptions={[25, 50, 100]}
  columns={columns}
  autoHeight
/>

While this approach has served me well so far, I have encountered a limitation with other hooks. Specifically, I am trying to utilize the useExport hook to enable exporting data from the DataGridPro component. However, despite my efforts, the useExport hook does not seem to work within this setup. Therefore, I am seeking your guidance on alternative strategies to overcome this limitation while still being able to keep track of the total number of rows. One possibility I have considered is maintaining a separate state and creating a dedicated endpoint solely for retrieving the total count. However, this approach appears to be somewhat tedious. I would greatly appreciate it if you could suggest any alternative ideas or best practices that could help me resolve this issue more efficiently.

11 Replies

kapa.ai•16mo ago

Hi @darshan_sandhu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello, Based on the information extracts provided, I can't find a direct solution to your issue with the useDataGrid hook and DataGridPro component in conjunction with the useExport hook. However, I can provide some general guidance on using the useDataGrid hook with the DataGridPro component. The useDataGrid hook is compatible with both the DataGrid and DataGridPro components source (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid). It simplifies operations such as pagination, sorting, and filtering on the DataGrid component through a flexible API source (https://refine.dev/blog/mui-datagrid-refine). To handle pagination, you can set the paginationMode, page, onPageChange, pageSize, and onPageSizeChange props that are compatible with the DataGrid component source (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid#pagination). The hook also syncs the pagination state with the URL if you enable the syncWithLocation source (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid#syncwithlocation). For the total number of data, the useDataGrid hook returns a rowCount value fetched with the useList hook source (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid#rowcount). Unfortunately, I don't have enough information about the useExport hook to provide a confident solution to your specific issue. I recommend referring to the refine documentation and examples for more information on how to use the hooks together. If you still face issues, consider reaching out to the refine community or support channels for more assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

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

rival-black•16mo ago

hi, what is the limitation you encounter?

extended-salmon•16mo ago

@alicanerdurmaz Hello, I am experiencing an issue with the useExport hook while using the modified data structure I received from my resource. When I press the export button, nothing appears to happen. Additionally, I am unsure how the useExport hook can correctly parse the information with this modified data structure. Thank you for your help! If I switch to the standard data structure that's expected from the resource, the useExport hook works as intended

rival-black•16mo ago

what do you mean by modified data structure? where are you modifying ?

extended-salmon•16mo ago

I have a resource called let's say "orders", and the useDataGrid would be using "/orders". The standard data structure would be to just send a list of all the orders, but I'm sending

{
data: [all the orders],
total: total orders
}

{
data: [all the orders],
total: total orders
}

and then I grab these separately by desctrucuring and implement them with DataGridPro as explained earlier. I did it this way because I'm handling pagination server side, and without this the rowCount would just be the total number of rows being sent from the server, which would be the first 25 (if 25 page size was selected), from the _start and _end from the req.query. so useExport is trying to parse

{
  data: [all the orders],
  total: total orders
}

{
  data: [all the orders],
  total: total orders
}

? And if I refactor my server to just send a list of all the rows, useExport works correctly. So should I just track the total rows separately and keep the resource response as a list of all the rows?

rival-black•16mo ago

you need to give same filters to useExport too 🤔 https://refine.dev/docs/api-reference/core/hooks/import-export/useExport/#pagesize sorry if i could'nt understand. if you provide reproducible example i will happy to debug actually useDataGrid and useExport uses getList method. they have only diffrence one is using export to csv, other uses datagrid features. data fetching features are same

extended-salmon•16mo ago

The main issue is this modified data (getList is sending an object with data, total properties) I'm sending is not playing nicely with useExport. useExport expects getList to retrieve a list of items? I'm not sending a list of items due to how I did a workaround for useDataGrid. Do you have any recommendations on how server side pagination should be handled in general when using useDataGrid, maybe a different approach compared to how I'm handling the total rows? Because if I don't do it this way, every time my useDataGrid fetches rows, the rowCount is just the amount of rows that are sent from the server. So if the page size is 25, the rowCount will always be 25. Sorry if it's not entirely clear, but I was mainly looking for some advice or a different approach. The problem can be solved if i just send a list of items instead of this {data, total} object, and just track the total with some separate request. Thank you for your help!

rival-black•16mo ago

I believe i understand 🥹 you can send meta with useExport after that you can check in your dataProvider if meta object has isExport field. if has, you can modify your data to array

useExport({
    meta: {
        isExport: true,
    },
})

useExport({
    meta: {
        isExport: true,
    },
})

if I understand correctly. it's a problem we have mapData function but thats not enough. https://refine.dev/docs/api-reference/core/hooks/import-export/useExport/#handling-relational-data I believe useExport needs transformResponse function to manipluate data without touching the

dataProvider


useExport taking

data` field from dataProvider.getList function https://github.com/refinedev/refine/blob/next/packages/core/src/hooks/export/index.ts#L158

extended-salmon•16mo ago

Ah I see, thank you very much for your patience and your response. As of right now, I have not created a custom dataProvider, but it's good to know that I can use a meta object this way Very cool @alicanerdurmaz Instead of that modified data structure({data: [all items], total: totalRows} and then destructuring the dataGridProps and adding a bunch of stuff to DataGrid separately, I found that I can just add proper headers from my server when sending a response, to get the total when using server side pagination

app.get(
  '/items',
  async (req: Request<any, any, MyQueryParams, any>, res: Response) => {

    const query = makeQuery(req.query)

    const totalRows = await prisma.myTable.count({
      where: query.where,
    })

    const items= await prisma.myTable.findMany(query)

    res.header('x-total-count', String(totalRows))
    res.header('Access-Control-Expose-Headers', 'x-total-count')

    res.send(traceLinesWithId)
  }
)

app.get(
  '/items',
  async (req: Request<any, any, MyQueryParams, any>, res: Response) => {

    const query = makeQuery(req.query)

    const totalRows = await prisma.myTable.count({
      where: query.where,
    })

    const items= await prisma.myTable.findMany(query)

    res.header('x-total-count', String(totalRows))
    res.header('Access-Control-Expose-Headers', 'x-total-count')

    res.send(traceLinesWithId)
  }
)

for anyone wondering, you can set your total rows using

  res.header('x-total-count', String(totalRows))
  res.header('Access-Control-Expose-Headers', 'x-total-count')

  res.header('x-total-count', String(totalRows))
  res.header('Access-Control-Expose-Headers', 'x-total-count')

!! With this approach I don't have to do a workaround to get the proper rowCount! Thank you again @alicanerdurmaz

other-emerald•13mo ago

Thanks! Access-Control-Expose-Headers solved the issue, chrome network tool seems to have x-total-count exposed but doesnt