Make a separate single column row in a multi column table in antd

Question

So I have a regular table in antd including 3 columns as such

<Table dataSource={data}>
  <Column title="Age" dataIndex="age" key="age" />
  <Column title="Address" dataIndex="address" key="address" />
  <Column title="Tags" dataIndex="tags" key="tags" />
</Table>

but I would like to have an advert after every 20 entry as a single row inside the table. Is there a way to achieve this with antd tables or should I revert back to data.map?

Answer 1

You need to use colSpan property of Column.

On the desired index (in the example it's 3), set all columns span to 0 and the specific entry to the table length 5

• obj.props.colSpan = 0;
• props: { colSpan: 5 }

I just adjusted the official example.

const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    props: {}
  };
  if (index === 3) {
    // On target every other column is not showing
    obj.props.colSpan = 0;
  }
  return obj;
};

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text, row, index) => {
      if (index !== 3) {
        return <a href="javascript:;">{text}</a>;
      }
      return {
        children: <a href="javascript:;">{text}</a>,
        // The target takes all column span
        props: {
          colSpan: 5
        }
      };
    }
  },
  {
    title: 'Age',
    dataIndex: 'age',
    render: renderContent
  }, 
  ...
];

const data = [..]

<Table columns={columns} dataSource={data} bordered />