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

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

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

[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