Unable to migrate from useDataGrid to useTable

This works fine:

  const { dataGridProps } = useDataGrid({
    dataProviderName: 'inspections',
    pagination: {
      pageSize: 50,
    },
    resource: '/v1/companies/',
  });

  const { dataGridProps } = useDataGrid({
    dataProviderName: 'inspections',
    pagination: {
      pageSize: 50,
    },
    resource: '/v1/companies/',
  });

This doesn't

  const {
    getHeaderGroups,
    getRowModel,
    getState,
    setPageIndex,
    getCanPreviousPage,
    getPageCount,
    getCanNextPage,
    nextPage,
    previousPage,
    setPageSize,
  } = useTable<InspectionCompany>({
    columns,
    refineCoreProps: {
      dataProviderName: 'inspections',
      pagination: {
        pageSize: 50,
      },
      resource: '/v1/companies/',
    },
  });

  const {
    getHeaderGroups,
    getRowModel,
    getState,
    setPageIndex,
    getCanPreviousPage,
    getPageCount,
    getCanNextPage,
    nextPage,
    previousPage,
    setPageSize,
  } = useTable<InspectionCompany>({
    columns,
    refineCoreProps: {
      dataProviderName: 'inspections',
      pagination: {
        pageSize: 50,
      },
      resource: '/v1/companies/',
    },
  });

I get the following error

4 Replies

kapa.ai•2mo ago

Hi @boris. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you might want to check the Refine documentation on the useTable hook (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#dataprovidername) for more details on how to properly configure it. It seems like there might be a mismatch in how the resource and dataProviderName are being used between useDataGrid and useTable. Make sure that the columns are correctly defined and passed to useTable, as this is a common requirement when using table hooks in Refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

conscious-sapphireOP•2mo ago

I'm trying to work off of the basic usage example. I only changed the resource and the lib is crashing

Tables | Refine

Tables are essential in data-intensive applications, serving as the primary way for organizing and displaying data in a readable format using rows and columns. Their integration, however, is complex due to functionalities like sorting, filtering, and pagination. Refine's tables integration aims to make this process as simple as possible while pr...

conscious-sapphireOP•2mo ago

i'm using

"@refinedev/core": "^4.49.1",
"@refinedev/mui": "^5.15.1",
"@refinedev/react-router-v6": "^4.5.8",
"@refinedev/react-table": "^5.6.13",
"@refinedev/simple-rest": "^5.0.5",
"@tanstack/react-table": "^8.20.5",

"@refinedev/core": "^4.49.1",
"@refinedev/mui": "^5.15.1",
"@refinedev/react-router-v6": "^4.5.8",
"@refinedev/react-table": "^5.6.13",
"@refinedev/simple-rest": "^5.0.5",
"@tanstack/react-table": "^8.20.5",

No request are made if I use useTable from '@refinedev/react-table' (I checked the network tab in dev tools) if I use useTable from '@refinedev/core

 like so I get data without issues

```
  const { tableQueryResult } = useTable<InspectionCompany>({
    dataProviderName: 'inspections',
    pagination: {
      pageSize: 50,
    },
    resource: '/v1/companies/',
  });
```

If I use

useList

 like so I get data without issues

```
  const { data } = useList({
    dataProviderName: 'inspections',
    pagination: {
      pageSize: 50,
    },
    resource: '/v1/companies/',
  });
```

How can I get

@refinedev/react-table` working? It has much more useful features than the alternatives. After deleting node_modules, the lock file and re-installing again the package started working