Alternative way of using Antd Table Columns and ColumnGroups

Question

According to Ant Design's Column grouping demo, Ant Design tables are usually just called like the following - assuming you have pre-filled columns and data appropriately:

<Table 
   columns={columns} 
   dataSource={data} 
   // ... other parameters
/>

However, I stumbled upon code which uses deconstruction (const { Column, ColumnGroup } = Table;) and inheritance (e.g. class MyTable extends Table<Interfaces.myTable>) to allow a code like the following within the return() function of the render() part of a custom component

<div>
  <div className="myTable">
    <MyTable dataSource={myData}
             locale={{ emptyText: 'No data found'}}>
      <ColumnGroup title="Headline 1">
         <MyColumn title="Col 1.1" 
                   dataIndex="iName"
                   key="kName"
         />
      </ColumnGroup>
</MyTable>

The problem is now that this does now (after update from Antd 2.10.0 to 3.23.3) no longer work:

Error TS2459 (TS) Type 'ComponentClass, "loading" | "footer" | "style" | "title" | "scroll" | "size" | "children" | "className" | "prefixCls" | "locale" | "getPopupContainer" | "onChange" | "dataSource" | ... 27 more ... | "sortDirections">, any>' has no property 'ColumnGroup' and no string index signature

I understand that this mainly because node_modules\antd\lib\table\Table.d.ts looks now different, and does not longer contain the ColumnGroup property. What alternatives do I have now, if I do not want to rewrite literally thousand lines of code?

@DennisVash The issue is that without v3.x.x I am missing essential features I need, so I guess I have to heavily rewrite the code and get rid of the inheritance. — B--rian, Oct 22 '19 at 07:57

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Moving a major version considered as breaking changes, therefore in your case you might want to stay in your current version 2.x.x or re-implement components logics with the new version.

About inheritance with React, React has a powerful composition model, its recommended to use composition instead of inheritance to reuse code between components.

If you still think about Inheritance:

At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies.

Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.

If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.

When you getting to a situation that inheritance is un-avoidable, try asking a senior React developer, you might just missing something, in any case you can always use references and use composition on them.

I just learned the reason why we are using inheritance (in a somewhat mild form, if you may say so): I am told that it is a workaround to fix typescript errors occurring if the corresponding library is not taking care about using correct types itself. — B--rian, Nov 14 '19 at 09:00

Alternative way of using Antd Table Columns and ColumnGroups

1 Answers1