Ant Design useTable problem

Hello, here is my code

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

const PostsList = () => {
    const { tableProps } = useTable();

    return (
        <List>
            <Table {...tableProps} rowKey="id">
                <Table.Column dataIndex={'id'} title="ID" />
            </Table>
        </List>
    );
};

export default PostsList;

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

const PostsList = () => {
    const { tableProps } = useTable();

    return (
        <List>
            <Table {...tableProps} rowKey="id">
                <Table.Column dataIndex={'id'} title="ID" />
            </Table>
        </List>
    );
};

export default PostsList;

It throws an error: Unhandled Runtime Error Error: (0 , _refinedev_antdWEBPACK_IMPORTED_MODULE_1.useTable) is not a function

2 Replies

kapa.ai•5mo ago

Hi @Aditya Chakraborty. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're having trouble with the useTable hook from the @refinedev/antd package. The error message suggests that useTable is not being recognized as a function, which could be due to a few reasons. Firstly, ensure that you have correctly installed the @refinedev/antd package in your project. If not, you can install it using npm:

npm install @refinedev/antd

npm install @refinedev/antd

Secondly, the useTable hook requires a type parameter to specify the data structure of the items in your table. In your code, you're not providing this type parameter. Here's an example of how to use useTable with a type parameter:

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

interface IProduct {  
 id: string;  
 name: string;  
 price: number;  
 description: string;  
} 

export const ProductList = () => {  
 const { tableProps } = useTable<IProduct>();  

 return (  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="name" title="Name" />  
 <Table.Column dataIndex="price" title="Price" />  
 </Table>  
 );  
};

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

interface IProduct {  
 id: string;  
 name: string;  
 price: number;  
 description: string;  
} 

export const ProductList = () => {  
 const { tableProps } = useTable<IProduct>();  

 return (  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="name" title="Name" />  
 <Table.Column dataIndex="price" title="Price" />  
 </Table>  
 );  
};

In this example, IProduct is the type parameter passed to useTable. You should replace IProduct with the interface that matches your data structure (source (https://refine.dev/docs/ui-integrations/ant-design/introduction#usage)). If you're still having trouble, please provide more details about your setup and the exact error message you're seeing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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