Настройка переноса слов в заголовке столбца таблицы Antd

Question

Я уже потратил слишком много времени на поиск того, как настроить заголовки столбцов таблиц Antd, в официальной таблице документа Antd и в других местах, но у меня ничего не получилось: Есть ли простой способкорректировки переноса заголовка столбца?

Прямо сейчас, если столбец слишком мал (например, при изменении размера окна браузера), буквы перемещаются в новые строки неконтролируемым образом. Английский перенос был бы классным, но для начала я хотел бы иметь 2 или 3 многоточие точек вместо свободно падающих символов.

Есть ли какие-нибудь специалисты в области антропологии, которые могли бы мне помочь, пожалуйста?

Минимальный нерабочий пример

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 - это более общая проблема, с которой я сталкиваюсь.
• Как мы можем настроить компонент Header таблицы Ant design?
• Настройка заголовка таблицы React Antd с данными таблицы

Answer 1

Table.Column.title принимает ReactNode, поэтому вам нужно только отрендерить Ellipsis компонент.

Вы должны использовать antd встроенный Ellipsis, длякоторые используют Typoghrapy API .

Примечание: Вы должны деформировать ширину контейнера, чтобы сработало многоточие:

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

Вы можете добиться того же эффекта с помощью чистого CSS, см. 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

Поскольку я (пока) застрял со старой версией Antd , я пошел по пути CSS, предложенному Деннисом Вашом . Внутри функции render() я определил

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

Интересно, что мне пришлось закомментировать параметр overflow, хотя https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow предполагает, что он необходим для свойства text-overflow дляработай. Также обратите внимание на CamelWritingStyle css-свойств в React.

Внутри компонента импортируются

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

. Фактический вызов Antd Column содержит <div> в title, плюс встроенный CSS:

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

Обратите внимание, что textOverflow будет работать только с абсолютными значениями ширины, которые безразмерны в React. Он будет не работать при использовании процентной ширины.