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

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>
      )
   }
}

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

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
);

@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

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

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

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

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.

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

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

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

Pull Request sent: #17284

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>

it could be nice if these method can turns to api. And another question is: when columns api ellipsis={true}, the background color of tooltip will be affected by the color of the browser itself.

{ title: “Comment”, dataIndex: “comment”, width: “15%”, key: “comment”, sorter: true, render: (text, row, index) => { return ( <Tooltip title={text}> <div style={{ textOverflow: ‘ellipsis’, overflow: ‘hidden’, whiteSpace : “nowrap” }}>{text}</div> </Tooltip> ); } }

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

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

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.