Ant-design: Option to add ellipsis (...) to table cells, headers when content doesn't fit

[reflog]

What problem does this feature solve?

Right now when the table is resized and the content doesn't fit, the text is broken and reflows to the next row, thus appearing rather bad. Adding an option to allow ellipsis sign (...) by adding text-overflow:ellipsis; where required to appear would increase the usability IMHO.

Thanks in advance!

What does the proposed API look like?

ellipsize={true} in column properties

---

IssueHunt Summary

Backers (Total: $25.00)

• rororofff ($10.00)
• swillis12 ($10.00)
• jfbloom22 ($5.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
  

  - Need some help from other developers? Add your repositories on IssueHunt to raise funds.

IssueHunt has been backed by the following sponsors. Become a sponsor

[afc163]

It is a user-side call, I don't think we should support it, sorry.

[sbyps]

@afc163 现在在table内设置了
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
table内也不能出现省略号，请问该怎么设置css使得td内文字超长时显示省略号

[lvze1992]

+1

[lvze1992]

though you can set 'width', @sbyps ,then ellipsis can show.
the 'width' can't change width the table td width change.
<td><div style={{width: 200, ...ellipsis}}></div></td>

[hengkx]

+1

[hengkx]

@afc163 有什么好的解决方案吗

[fengyun2]

+1

[swillis12]

@afc163 I don't get why this is closed. There is no way to set overflow to hidden from what I can tell unless you set a static width in the content. I don't get the point of having a 'width' option on the column configuration if the content that I render is not bounded by this width.. Any recommendations on how to set ellipsis overflow for any content beyond the width set in the column config?

{
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: (text, record) => (
          <span className="sample">
            <Link to={'/dummy/sample/' + record.id}>{extremelyLongTextThatNeedsEllipsis}</Link>
          </span>
        ),
        width: '25%'
      }

In the above example extremelyLongTextThatNeedsEllipsis just grows the infinitely, any recommendations on how to set text-overflow: ellipsis in this case?

Thanks

[fletanoux]

Would be interested in a solution as well.

For me the problem comes from the fact the width is set in a colgroup. It's the only place that is aware of the width we defined, but we cannot cascade down its style to the content.

[yezongyang]

这是很多的需求啊，希望考虑下

[hengkx]

这个 还提供支持吗

[swillis12]

Still very interested in support for this, excited that you have opened this again @afc163. Thanks!

[sitch]

Solution:

table.fixed {
  table-layout: fixed;
}
td.truncated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

and make sure you set width in your columns definitions

[afc163]

We should support in this way: https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241

columns={[
  ...
  textWrap: 'ellipsis' | 'word-break',
]}

[KejieLiu]

Another solution changed from fix header example , consider adding it to doc.
It seems that Tooltip need be inclued in rc-table if you want to provide this feature in API,which is inappropriate.

import { Table } from 'antd';
import { Tooltip } from 'antd';

class EllipsisTooltip extends React.Component {
  state = {
    visible: false
  }
  handleVisibleChange = (visible) => {
    if (this.container.clientWidth < this.container.scrollWidth) {
      this.setState({
        visible: visible
      })
    }
  }
  render() {
    return (
      <Tooltip visible={this.state.visible} onVisibleChange={this.handleVisibleChange} title={this.props.title}>
        <div ref={node => this.container = node} style={{
          textOverflow: 'ellipsis',
          overflow: 'hidden',
        }}>{this.props.children}</div>
      </Tooltip>
    )
  }
}

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  width: 150,
  onCell: () => {
    return {
      style: {
        whiteSpace: 'nowrap',
        maxWidth: 150,
      }
    }
  },
  render: (text) => <EllipsisTooltip title={text}>{text}</EllipsisTooltip>
}, {
  title: 'Age',
  dataIndex: 'age',
  width: 150,
}, {
  title: 'Address',
  dataIndex: 'address',
}];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: i === 0 ? 'A man with a long name' : `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

ReactDOM.render(
  <Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />,
  mountNode
);

it is works

[gyerts]

const columns = [
   {
      title: 'Title',
      dataIndex: 'title',
      key: 'title',
      width: '30%',
      onCell: () => {
         return {
            style: {
               whiteSpace: 'nowrap',
               maxWidth: 150,
            }
         }
      },
      render: (text) => (
         <Tooltip title={text}>
            <div style={{textOverflow: 'ellipsis', overflow: 'hidden'}}>{text}</div>
         </Tooltip>
      )
   }
}

[koupeng]

+1，有个属性设置最好了。

[IssueHuntBot]

@rororofff has funded $10.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[IssueHuntBot]

@swillis12 has funded $10.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[vary]

+1，希望可以提供属性支持

[matankastel]

Based on @twisger, as hooks

function EllipsisTooltip({
  children,
  title,
}) {
  const [visible, setVisible] = useState(false);
  const container = useRef(null);

  const handleVisibleChange = (updatedVisible) => {
    if (container.current.clientWidth < container.current.scrollWidth) {
      setVisible(updatedVisible);
    }
  };

  return (
    <Tooltip
      placement="left"
      visible={ visible }
      onVisibleChange={ handleVisibleChange }
      title={ title }
    >
      <div
      ref={ container }
      style={ {
        textOverflow: 'ellipsis',
        overflow: 'hidden',
      } }
      >
        { children }
      </div>
    </Tooltip>
  );
}

EllipsisTooltip.propTypes = {
  children: PropTypes.node,
  title: PropTypes.oneOfType([PropTypes.string]),
};

EllipsisTooltip.defaultProps = {
  children: null,
  title: null,
};

[afc163]

Pull Request sent: #17284

[issuehunt-app[bot]]

@jfbloom22 has funded $5.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[nazrulcsebd]

{
title: "Comment",
dataIndex: "comment",
width: "15%",
key: "comment",
sorter: true,
render: (text, row, index) => {
return (

textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace : "nowrap"
}}>{text}

);
}
}

[kavolorn]

The following works for me without specifying any specific column width (checked on Chrome and Safari):

const columns = [
  ...,
  {
    title: "Description",
    dataIndex: "description",
    render: (description) => (
      <div style={{ display: 'grid', placeItems: 'stretch' }}>
        <div style={{ whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>
          {description}
        </div>
      </div>
    )
  },
  ...
];

Maybe somebody will find it as a useful case.