Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to add ellipsis (...) to table cells, headers when content doesn't fit #5753

Open
reflog opened this issue Apr 13, 2017 · 20 comments

Comments

Projects
None yet
@reflog
Copy link

commented Apr 13, 2017

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

@afc163

This comment was marked as outdated.

Copy link
Member

commented Apr 14, 2017

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

@afc163 afc163 closed this Apr 14, 2017

@sbyps

This comment has been minimized.

Copy link

commented May 18, 2017

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

@lvze1992

This comment has been minimized.

Copy link

commented Nov 20, 2017

+1

@lvze1992

This comment has been minimized.

Copy link

commented Nov 20, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Feb 27, 2018

+1

@hengkx

This comment has been minimized.

Copy link
Contributor

commented Feb 27, 2018

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

@fengyun2

This comment has been minimized.

Copy link

commented May 21, 2018

+1

@swillis12

This comment has been minimized.

Copy link
Contributor

commented May 23, 2018

@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

This comment has been minimized.

Copy link

commented Jun 12, 2018

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

This comment has been minimized.

Copy link

commented Jul 13, 2018

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

@afc163 afc163 reopened this Jul 13, 2018

@hengkx

This comment has been minimized.

Copy link
Contributor

commented Aug 1, 2018

这个 还提供支持吗

@swillis12

This comment has been minimized.

Copy link
Contributor

commented Aug 1, 2018

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

@sitch

This comment has been minimized.

Copy link

commented Aug 29, 2018

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

@twisger

This comment has been minimized.

Copy link
Contributor

commented Jan 7, 2019

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

This comment has been minimized.

Copy link
Member

commented Jan 9, 2019

We should support in this way: #13825 (comment)

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

This comment has been minimized.

Copy link

commented Jan 12, 2019

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

This comment has been minimized.

Copy link

commented Jan 24, 2019

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

This comment has been minimized.

Copy link

commented Feb 22, 2019

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

@IssueHuntBot

This comment has been minimized.

Copy link

commented Mar 14, 2019

@rororofff has funded $10.00 to this issue.


@IssueHuntBot

This comment has been minimized.

Copy link

commented May 18, 2019

@swillis12 has funded $10.00 to this issue.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.