在 Antd 表的列标题中配置自动换行 [英] Configuring word-wrap in column header of an Antd Table

问题描述

我已经花了太多时间在

纯CSS也可以达到同样的效果，参考

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

解决方案

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]} />
);

这篇关于在 Antd 表的列标题中配置自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！