expanding row with useTable Ant Design

How can I expand each row using useTable for Ant Design

2 Replies

Hi @Simon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To expand each row using useTable with Ant Design in Refine, you can utilize the expandedRowRender property of the Ant Design <Table /> component. This property allows you to define the content that will be displayed when a row is expanded. Here's an example of how you can achieve this:

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"
      expandedRowRender={(record) => <p>{record.description}</p>}
    >
      <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"
      expandedRowRender={(record) => <p>{record.description}</p>}
    >
      <Table.Column dataIndex="id" title="ID" />
      <Table.Column dataIndex="name" title="Name" />
      <Table.Column dataIndex="price" title="Price" />
    </Table>
  );
};

In this example: - useTable is used to fetch and manage the table data. - The expandedRowRender property is used to specify the content that will be displayed when a row is expanded. Here, it simply renders the description field of the record. For more details on the useTable hook and its properties, you can refer to the Refine useTable documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/). This should help you set up expandable rows in your table using Refine and Ant Design. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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