CODEWITHSUNDEEP
javascriptreactjstypescriptantd
B--rian
B--rian

Reputation: 5870

Alternative way of using Antd Table Columns and ColumnGroups

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?

Upvotes: 2

Views: 2753

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

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.

Upvotes: 2

Related Questions