CODEWITHSUNDEEP
reactjsclassinheritanceantd
B--rian
B--rian

Reputation: 5870

Overwriting a single (nested) property when extending a React class

I am rather new to React.js, I believe I understood the major concepts, and I am struggling to find documentation on how to overwrite a single property of a class I am declaring.

In on of my components, I define a new class MyColumn based on a class from Ant Design. The architecture (of inheritance rather than composition) was already made by others, and I am not able to change that.

import { Table } from "antd";
const { Column } = Table;
// ... 
class MyColumn extends Column<Interfaces.myViewEntry> { }   // <---

At the moment, the column headers just flows downward, I need either ellipsis dots (and a mouse-over with the full column label), or a proper word wrap. Probably, the latter is easier.

To reach that goal, I want to set the property style: { 'white-space': 'unset' } (and just that property) for MyColumn since I read that this will allow me to get proper word-wrap for the column headers.

Could somebody please elaborate what to put into the brackets in the line I marked with <--?

Background

In interfaces.tsx, I defined something like the following

export interface myViewEntry{
    LastName: string,
    FirstName: string,
    Result: number,
}

References

Upvotes: 0

Views: 562

Answers (1)

Nikita Ščigelsk&#253;
Nikita Ščigelsk&#253;

Reputation: 122

in my opinion it's better to wrap ant-design components with you own ones and add additional properties to that. For example:

import { Table } from 'antd';

export default function MyTableColumn({ children, ...rest }) {
  //...useState, useRef, useEffect, whatever you need.
  return <Table.Column {...rest}>{children}</Table.Column>
}

Upvotes: 1

Related Questions