[RFC] Deprecated Table columns.render return cell props and use onCell instead

[zombieJ]

📋 RFC

Summary

Use onCell instead of render return cell.props.

Basic example

    const columns = [{
      dataIndex: 'name',
--    render: (val) => ({
--      props: { colSpan: 2 },
--      children: val,
--    });
++    onCell: (record) => ({ colSpan: 2 });
    }];

Motivation

As #32979 mentioned. Table column mix props & node in one render function which cost additional perf calculation. And this will also makes row hover calculation no way to optimize. Since we already have onCell function and this is same logic as render.props, it's reasonable to de-duplicate.

Detailed

To make this RFC done:

1. We need patch warning info in rc-table and suggest user move to onCell. Also keep origin span logic do not modified.
2. Move hover logic to onCell base which will speed up render perf

Drawbacks

No break of current usage. But get warning.

Adoption strategy

When finished dev will replace all demo to new usage.

[afc163]

Does it simpler if we add columns={[{ colSpan: 2 }]} or columns={[{ colSpan: () => 2 }]}?

[afc163]

or

    const columns = [{
      dataIndex: 'name',
--    render: (val) => ({
--      props: { colSpan: 2 },
--      children: val,
--    });
++    span: (val, index) => ({
++      col: 2,
++      row: 0,
++    }),
    }];

[zombieJ]

Consider mix usage:

span: (record, index) => ({
  col: index === 0 ? 2 : 1,
  row: 0,
}),
onCell: (record, index) => ({
  className: index === 0 ? 'my-class-name' : null,
}),

vs

onCell: (record, index) => ({
  className: index === 0 ? 'my-class-name' : null,
  colSpan: index === 0 ? 2 : 1,
  rowSpan: 0,
}),

The line count of span is same as onCell, but if need additional props, it will much complex than RFC. In addition, I still think colSpan & rowSpan is part of td.attr. Additional api need more memory of it.

[sagarsoni7]

New to Ant, need some help. How do I handle the children?


I tried writing

render: (_, record) => {
  return {
    children: <span>Some JSX</span>,
    colSpan: 2,
  };
};

as

onCell: (record) => {
  return {
    children: <span>Some JSX</span>,
    colSpan: 2,
  };
};

but it didn’t work.
@zombieJ any idea?

[HeiShuXianSheng]

New to Ant, need some help. How do I handle the children? I tried writing

render: (_, record) => {
  return {
    children: <span>Some JSX</span>,
    colSpan: 2,
  };
};

as

onCell: (record) => {
  return {
    children: <span>Some JSX</span>,
    colSpan: 2,
  };
};

but it didn’t work. @zombieJ any idea?

I have same issue，Have you solved it?

[sagarsoni7]

New to Ant, need some help. How do I handle the children? I tried writing

render: (_, record) => {
  return {
    children: <span>Some JSX</span>,
    colSpan: 2,
  };
};

as

onCell: (record) => {
  return {
    children: <span>Some JSX</span>,
    colSpan: 2,
  };
};

but it didn’t work. @zombieJ any idea?

I have same issue，Have you solved it?

Yeah, try this:

onCell: (record) =>{
return {
colSpan: 2
}
},

render: (_, record) => {
return (
Some JSX
)
};

[HeiShuXianSheng]

Yeah, try this:

onCell: (record) =>{ return { colSpan: 2 } },

render: (_, record) => { return ( Some JSX ) };

howerve, i need some JSX in onCell，how can i do it

[chillyistkult]

How to get value as parameter of onCell? As I understand only record is passed in onCell, for what would we need dataIndex then?

Seems like deprecating render while not fully support an alternative is not the best approach.

I am asking this because table performance is still horrible, because of the hover issue.

[SpookyJelly]

New to Ant, need some help. How do I handle the children? I tried writing

render: (_, record) => {
  return {
    children: <span>Some JSX</span>,
    colSpan: 2,
  };
};

as

onCell: (record) => {
  return {
    children: <span>Some JSX</span>,
    colSpan: 2,
  };
};

but it didn’t work. @zombieJ any idea?

I have same issue，Have you solved it?

Yeah, try this:

onCell: (record) =>{ return { colSpan: 2 } },

render: (_, record) => { return ( Some JSX ) };

works like magic, thanks

however I also thinks is it really necessary divide use onCell just because of props?? In my case, I have to different colSpan and JSX according to record type. But in a new way, I have to write the same code twice. (categorize record types)...

[VahanBeck]

How to get value as parameter of onCell? As I understand only record is passed in onCell, for what would we need dataIndex then?

Seems like deprecating render while not fully support an alternative is not the best approach.

I am asking this because table performance is still horrible, because of the hover issue.

Exactly! The value property is very useful, so i don't think we will migrate to onCell until you have a suitable substitute to render

[YazRae]

if you are looking to use different styles for each column consider this

` const columns = [
 {
    title: "name",
    dataIndex: "name",
    key: "name",
    onCell: (record, rowIndex) => {
      return {
        style: { color: "red" },
        colSpan: 2,
      };
    },
    render: (text, record, index) => {
      return <span>Some JSX</span>;
    },
  },
];
  <Table
    columns={columns}
    dataSource={items}
  />`

[citmusa]

How would it work for rowSelection? I'm already using antd 4 (latest) and renderCell logs a warning