Configuring word-wrap in column header of an Antd Table

Question

I already spent too much time searching on how to configure the column headers of Antd tables, in the official Antd table docu and elsewhere, but I was not successful: Is there a simple way of adjusting the word-wrap of the column header?

Right now, if the column is too small (e.g. when resizing the browser window), letters are floating into new lines in an uncontrolled manner. English hyphenation would be cool, but for a start I would appreciate having 2 or 3 ellipsis dots instead of freely dropping characters.

Any Antd-experts out there who could help me out, please?

Minimal non-working example

import { Table } from "antd";
const { Column } = Table;

const dataSource = [
  {
    key: '1',
    name: 'Mike',
  },
  {
    key: '2',
    name: 'John',
  },
];

const columns = [
  {
    title: 'My very-very-very long column-name',
    dataIndex: 'name',
    key: 'name',                                     
  },
];

<Table dataSource={dataSource} columns={columns} />;

Related questions

• Overwriting a single (nested) property when extending a React class is the more general problem I am facing.
• How can we configure the Header of ant design table component?
• Customize React Antd table header with table data

Answer 1

Table.Column.title accepts a ReactNode, so you only need to render an Ellipsis component.

You should use antd built-in Ellipsis, for that use Typoghrapy API.

Note: You should strain container's width so the ellipsing will work:

const COLUMN_STYLE = { width: 200 };
<Typography.Text ellipsis={true} style={COLUMN_STYLE}>
  A very long text
</Typography.Text>

You can achieve the same effect with pure CSS, refer to text-overflow.

const dataSource = [
  {
    key: '1',
    name: 'Mike'
  },
  {
    key: '2',
    name: 'John'
  }
];

const COLUMN_STYLE = { width: 200 };

const customColumn = {
  title: (
    <Typography.Text ellipsis={true} style={COLUMN_STYLE}>
      My very-very-very long column-name My very-very-very long column-name My
      very-very-very long column-name
    </Typography.Text>
  ),
  dataIndex: 'name',
  key: 'custom'
};

const normalColumn = {
  title: 'My very-very-very long column-name',
  dataIndex: 'name'
};

const TOTAL_COLUMNS = 6;

const columns = [...Array(TOTAL_COLUMNS).keys()].map(key => ({
  ...normalColumn,
  key
}));

const App = () => (
  <Table dataSource={dataSource} columns={[customColumn, ...columns]} />
);

Answer 2

Since I am (yet) stuck with an old version of Antd, I went the inline-CSS way suggested by Dennis Vash. Within the render() function, I defined

var myColTitleStyle = {
            textOverflow: 'ellipsis',
            // overflow: "hidden",
            whiteSpace: 'nowrap'
};

Interestingly, I had to comment the parameter overflow out, although https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow suggests that it is required for the property text-overflow to work. Also note the CamelWritingStyle of the css-properties within React.

Inside the component, the imports are

import { Table } from "antd";
const { Column, ColumnGroup } = Table;

The actual call of Antd's Column contains a <div> within the title, plus the inline-CSS:

<Column
   title={<div style={myColTitleStyle}>My long-long title</div>}
   width=10
>

Please also note that textOverflow will only work with absolute widths, which are dimensionless in React. It will not work when using percentage-widths.