ant-design / ant-design/pro-components
🧐[问题] Not fill data edit when use tableRender
- 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 (
>
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 (
<>
);
}}
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'),
},
];`
### 🚑 其他信息


Contributor 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