0

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

B--rian
  • 5,578
  • 10
  • 38
  • 89
  • Sure. I just need more information, where inheritance exists in your code? How those components looks like? – Dupocas Oct 08 '19 at 11:31
  • I just checked the code again -- I guess I have to stick to inheritance. :-( There is a whole hierarchy of child classes following `MyColumn`. So composition is no option. May you still help me? – B--rian Oct 08 '19 at 11:35
  • Such inheritance is a very bad idea. – Dennis Vash Oct 08 '19 at 15:48
  • @Dennis Vash: I am aware that it is not pretty, but is it technical possible? And if so, how? – B--rian Oct 08 '19 at 15:58
  • Yes, you can, please provide a reproducible example [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) (you can use such [codesandbox-antd-template](https://codesandbox.io/s/react-antd-styled-template-n8n96) and I will show you an example accordingly. – Dennis Vash Oct 08 '19 at 16:01
  • @DennisVash I will try to do that rsn. The challenge is that the code base is really complex, and it is rather tricky to pseudonimze the code without breaking it. – B--rian Oct 10 '19 at 12:54

1 Answers1

1

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>
}
Nikita Ščigelský
  • 122
  • 1
  • 3
  • Is the `...rest` really three dots and not two, or does that matter at all? Could you maybe elaborate a bit on your code, I am not sure what is literal and what is placeholder. I guess, only `rest` is placeholder, am I right. – B--rian Oct 10 '19 at 12:55
  • It's an object destructuring syntax, we are calling that spread operator. You can read more about that here: https://javascript.info/destructuring-assignment. And yeah, this is just an example code, you can destructure all you properties and pass them to the ant-design component – Nikita Ščigelský Oct 10 '19 at 12:59
  • For some reason I thought the [JS spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) is just two dots, like the [bash range operator](https://askubuntu.com/questions/166583/bash-for-loop-with-range). I keep mixing up languages.. – B--rian Oct 10 '19 at 13:01