ant-design / ant-design/pro-components

🧐[问题] Not fill data edit when use tableRender

Open
#8,573 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🧐 问题描述
- Sorry if this post not correct format!!!
- version: ant-design/pro-components - 2.6.48.
- I use tableRender to custom render table. Inside it, I return div **toolBar** and **Tabs component**. But when I click edit it not fill data to field input.

### 💻 示例代码
This is code table:
` {
return record.status === "LOCKED" ? "row-locked" : "row-unlocked";
}}
columns={[
...columns,
{
title: "",
render: (dom, record: ProductImport, index, action) => {
return (


  • action?.startEditable(record.id)}
    >
    Fix

  • {
    handleDelete(record);
    }}
    >
    Delete


  • );
    },
    hideInSearch: true,
    hideInForm: true,
    editable: false,
    width: 100,
    },
    ]}
    tableRender={(
    props,
    dom,
    domList: {
    toolbar: JSX.Element | undefined;
    alert: JSX.Element | undefined;
    table: JSX.Element | undefined;
    }
    ) => {
    return (
    <>
    {domList.toolbar}


    );
    }}
    rowSelection={{
    onChange: (_, selectedRows) => {
    setSelectedRows(selectedRows);
    },
    }}
    pagination={{
    total: data?.data.total,
    current: data?.data.current_page,
    pageSize: data?.data.per_page,
    onChange: (page, pageSize) => {
    setSearchQuery((prev) => {
    return {
    ...prev,
    pagination: {
    current_page: page,
    per_page: pageSize,
    },
    };
    });
    },
    }}
    />`

    And this is columns
    `const columns: ProColumns[] = [
    {
    title: (

    ),
    dataIndex: 'key',
    hideInSearch: true,
    width: 50,
    editable: false,
    },
    {
    title: ,
    dataIndex: 'date_import',
    hideInSearch: true,
    width: 200,
    render: (text: any) => moment(text).format('YYYY-MM-DD'),
    },
    {
    title: ,
    dataIndex: 'product.code',
    },
    {
    title: ,
    dataIndex: 'product.name',
    },
    {
    title: (

    ),
    dataIndex: 'product.specification',
    },
    {
    title: ,
    dataIndex: 'product.unit',
    render: renderCenterCell,
    },
    {
    dataIndex: 'product.quantity',
    title: ,
    render: renderNumberCell,
    },
    {
    title: ,
    dataIndex: 'product.price',
    },
    {
    title: ,
    dataIndex: 'money',
    hideInSearch: true,
    render: (text, record: any) => {
    const quantity = record?.product?.quantity;
    const price = record?.product?.price;
    const total = quantity * price;
    return total.toLocaleString();
    },
    },
    {
    title: ,
    dataIndex: 'note',
    hideInSearch: true,
    },
    {
    title: ,
    dataIndex: 'stock',
    hideInSearch: true,
    },
    {
    title: (

    ),
    dataIndex: 'user_create_id',
    hideInSearch: true,
    },
    {
    title: ,
    dataIndex: 'create_time',
    hideInSearch: true,
    filters: [
    {
    text: 'xxx',
    value: 'das',
    },
    ],
    render: (text: any) => moment(text).format('YYYY-MM-DD'),
    },
    ];`

    ### 🚑 其他信息
    ![image](https://github.com/user-attachments/assets/4ae3af56-bcd9-4233-a2f5-07b4fe6c7479)
    ![image](https://github.com/user-attachments/assets/8e332fa9-744b-424b-8064-635986540a26)

    Contributor guide

    Open the contributing guide

    Research direction

    No repository file or test is identified. Start by reproducing the provided Table example with tableRender, Tabs, and action.startEditable(record.id), then compare editing with and without the custom rendering. Done means clicking Fix opens the editable row with its existing values populated in the fields.

    Written by the indexing model from the issue text.

    Assessment

    Tech stack
    react, typescript
    Domain
    frontend
    Issue type
    Bug
    Difficulty
    4/5
    Estimated time
    3-5 days
    Activity status
    Stale
    Clarity
    Mostly clear
    Newbie friendliness
    35/100

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.