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

问题描述

在官方Antd中，我已经花了很多时间搜索如何配置Antd表的列标题.表docu 和其他地方，但是我没有成功:是否有一种简单的方法来调整列标题的自动换行?

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?

现在，如果列太小(例如，在调整浏览器窗口大小时)，则字母将以不受控制的方式浮动到新行中.英文连字符会很酷，但是一开始我会很高兴有2或3个省略号点自由掉落的字符.

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.

请问有任何Antd专家可以帮助我吗?

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

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

相关问题

• 扩展时覆盖单个(嵌套)属性一个React类是我面临的更普遍的问题.
• 我们如何配置ant设计表组件?
• 使用表数据自定义React Antd表头

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 接受ReactNode，因此您只需要呈现Ellipsis组件.

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

您应该使用内置的antd Ellipsis，为此使用 Typoghrapy API .

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>

使用纯CSS可以达到相同的效果，请参考 text-overflow.

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屋！