absent-sapphire•2mo ago

Displaying data with a mix of Form and EditableaTable

Hello everyone ! I've been using Refine since a couple of weeks and it has been a really amazing discovery! The documentation is great but I can't find a way to include both an EditeableTable and a Form within the same component (which is plugged to a Strapi datasource). I have an object that includes a few classic attributes and a repeatable component (which is an Array of objects). I'm able to display all the first level attributes in my page within the form and also to display all the objects of the array in the EditeableTable, but I can't manage to edit or add lines to the Table. I see that the GET/PUT requests are made against my Table line IDs instead of my main object ID. What am I missing in order to pass the right ID to the the EditableTable and ensure that even when editing one line of the Table I update the whole object ? Here's my object structure

interface LeasingScale {
  id: number;
  wp_id: number;
  name: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  rates: Rate[];
}

interface Rate {
  id: number;
  lenght: number;
}

4 Replies

kapa.ai•2mo ago

Hi @alan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

absent-sapphire•2mo ago

Here's how I retrieve my data

const {
    tableProps,
    formProps,
    isEditing,
    setId: setEditId,
    saveButtonProps,
    cancelButtonProps,
    editButtonProps,
    tableQueryResult,
  } = useEditableTable<Rate>({
    redirect: false,
    meta: {
      populate: ["rates"],
    },
  });

And then basically I build my components like this

<Form {...formProps}>
  <FormItemEditableText
    formItemProps={{
      name: "name",
      rules: [{ required: true }],
    }}
  />
  ....
  <Table
    {...tableProps}
    rowKey="id"
    dataSource={tableProps.dataSource?.[0]?.rates}
    onRow={(record) => ({
      onClick: (event: any) => {
        setEditId && setEditId(record.id);
      },
    })}
  >
    <Table.Column<Rate> dataIndex="id" key="id" title="ID" />
    <Table.Column<Rate>
      dataIndex="lenght"
      key="lenght"
      title="Durée"
      render={(value, record) => {
        if (isEditing(record.id)) {
          return (
            <Form.Item
              name={["rates", record.id, "lenght"]}
              style={{ margin: 0 }}
            ><Input />
            </Form.Item>
          );
        }
        return <TextField value={value} />;
      }}
    />
    ....
    <Table.Column<Rate>
      title="Actions"
      dataIndex="actions"
      key="actions"
      render={(_, record) => {
        if (isEditing(record.id)) {
          return (
            <Space>
              <SaveButton {...saveButtonProps} hideText size="small" />
              <Button {...cancelButtonProps} size="small">Annule</Button>
            </Space>
          );
        }
        return (
          <EditButton {...editButtonProps(record.id)} hideText size="small" />
        );
      }}
    />
  </Table>
</Form>;

kapa.ai•2mo ago

---------------------- Hello! It's great to hear that you've been enjoying using Refine. Based on your question, it seems like you want to integrate both a Form and an EditableTable within the same component, and ensure that the correct IDs are used for the requests. To achieve this, you can use the useEditableTable hook from Refine, which allows you to manage both the form and table properties. Below is an example of how you can structure your component to include both a Form and an EditableTable:

import { List, useEditableTable, TextField } from "@refinedev/antd";  
import { Table, Form } from "antd";  

export const LeasingScaleComponent: React.FC = () => {  
  const { tableProps, formProps } = useEditableTable<Rate>();  

  return (  
    <List>  
      <Form {...formProps}>  
        <TextField source="wp_id" label="WP ID" />
        <TextField source="name" label="Name" />
        <TextField source="createdAt" label="Created At" />
        <TextField source="updatedAt" label="Updated At" />
        <TextField source="publishedAt" label="Published At" />
        
        <Table {...tableProps} rowKey="id">  
          <Table.Column dataIndex="id" title="ID" />  
          <Table.Column dataIndex="lenght" title="Length" />  
        </Table>  
      </Form>  
    </List>  
  );  
};  

interface LeasingScale {
  id: number;
  wp_id: number;
  name: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  rates: Rate[];
}

interface Rate {
  id: number;
  lenght: number;
}

import { List, useEditableTable, TextField } from "@refinedev/antd";  
import { Table, Form } from "antd";  

export const LeasingScaleComponent: React.FC = () => {  
  const { tableProps, formProps } = useEditableTable<Rate>();  

  return (  
    <List>  
      <Form {...formProps}>  
        <TextField source="wp_id" label="WP ID" />
        <TextField source="name" label="Name" />
        <TextField source="createdAt" label="Created At" />
        <TextField source="updatedAt" label="Updated At" />
        <TextField source="publishedAt" label="Published At" />
        
        <Table {...tableProps} rowKey="id">  
          <Table.Column dataIndex="id" title="ID" />  
          <Table.Column dataIndex="lenght" title="Length" />  
        </Table>  
      </Form>  
    </List>  
  );  
};  

interface LeasingScale {
  id: number;
  wp_id: number;
  name: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  rates: Rate[];
}

interface Rate {
  id: number;
  lenght: number;
}

In this example, the useEditableTable hook is used to manage the table properties, and the formProps are passed to the Form component. This ensures that both the form and the table are correctly integrated and can handle the necessary actions. For more detailed information, you can refer to the Refine useEditableTable hook documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-editable-table/) and the example provided in the documentation (https://refine.dev/docs/examples/table/antd/useEditableTable/). If you encounter any issues with the IDs being used in the requests, make sure that the rowKey in the Table component is set correctly and that the formProps and tableProps are properly configured to handle the data structure of your main object. Feel free to reach out if you have any more questions or need further assistance! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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