compatible-crimson•2mo ago

CRUD response data come inside a `data` wrapper, how can I access it?

The response of useTable() content is an array of elements inside a data wrapper, how can I access it using useTable() and <Table> of antd package?

3 Replies

kapa.ai•2mo ago

Hi @currycode. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When you use Refine's useTable() hook, the response from your data provider is wrapped inside a data property. Specifically, the structure returned by the data provider for a list operation is typically:

{
  data: [ /* array of records */ ],
  total: number
}

{
  data: [ /* array of records */ ],
  total: number
}

To access the array of elements, you need to reference the .data property of the response. When using useTable(), you get an object (commonly called tableQuery or tableQueryResult) that contains the response from the data provider. For example:

const { tableQuery } = useTable();
const records = tableQuery?.data?.data ?? [];

const { tableQuery } = useTable();
const records = tableQuery?.data?.data ?? [];

Here, tableQuery.data.data gives you the array of records you want to display. However, when using Refine's Ant Design integration, you usually don't need to access this manually. The useTable() hook from @refinedev/antd provides a tableProps object, which is already configured to pass the correct data to Ant Design's <Table /> component. You simply spread tableProps into your <Table />, and it will handle the data source for you:

import { List, useTable } from "@refinedev/antd";
import { Table } from "antd";

export default function UserList() {
  const { tableProps } = useTable();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        {/* Table columns here */}
      </Table>
    </List>
  );
}

import { List, useTable } from "@refinedev/antd";
import { Table } from "antd";

export default function UserList() {
  const { tableProps } = useTable();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        {/* Table columns here */}
      </Table>
    </List>
  );
}

If you need to manipulate the data before passing it to the table, you can access it via tableQueryResult.data.data and provide it to the dataSource prop of <Table /> directly:

const { tableQueryResult, tableProps } = useTable();
const newData = tableQueryResult.data?.data ?? [];
<Table {...tableProps} dataSource={newData} />

const { tableQueryResult, tableProps } = useTable();
const newData = tableQueryResult.data?.data ?? [];
<Table {...tableProps} dataSource={newData} />

This approach is confirmed in both the documentation and community discussions, showing that the array of elements is always inside the data property of the response object, and you can access it as shown above if you need to work with it directly How to Create Dynamic Forms in React CRUD app with Ant Design FEAT Returned data structure from useTable. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@761707070445584404> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

compatible-crimsonOP•2mo ago

Github thing do the trick 🚀

CRUD response data come inside a `data` wrapper, how can I access it?

Did you find this page helpful?