feat: 💥 support tableLayout and column.ellipsis #17284

afc163 · 2019-06-25T05:32:33Z

🤔 This is a ...

🔗 Related issue link

close #13825 (comment)
close #17127
close #5753

💡 Background and solution

<Table tableLayout="fixed" />
column.ellipsis

const columns = [{
   title: 'Long Column Long Column Long Column',
   dataIndex: 'address',
   key: 'address 2',
+  ellipsis: true,
}]

📝 Changelog

Language	Changelog
🇺🇸 English	- Table supports `tableLayout` property for table-layout attribute. And using `tableLayout="fixed"` defaully in scrollable table situation to resolve align issue caused by cell content. - Table supports `column.ellipsis` to ellipsize cell content.
🇨🇳 Chinese	- Table 新增 `tableLayout` 属性，支持设置表格的 table-layout 布局，并在固定表头/列下默认开启 `tableLayout="fixed"`，解决因为表格自动根据内容排版造成的列对齐问题。 - Table 新增 `column.ellipsis` 支持单元格内容自动省略。

☑️ Self Check before Merge

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

#11822: 关于固定表头必须要给表头设置宽度

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

tests-checker

Could you please add tests to make sure this change works as expected?

netlify · 2019-06-25T05:32:47Z

Deploy preview for ant-design ready!

Built with commit 4fe4706

https://deploy-preview-17284--ant-design.netlify.com

netlify · 2019-09-03T07:29:53Z

Deploy preview for ant-design ready!

Built with commit 0ad9967

https://deploy-preview-17284--ant-design.netlify.com

zombieJ · 2019-09-03T08:32:23Z

放 4.0 里？

afc163 · 2019-09-03T08:59:05Z

这个加 3.x 里能解决表格当前很多对齐问题。

buildsize · 2019-09-03T10:15:15Z

File name	Previous Size	New Size	Change
package-lock.json	848.29 KB	849.97 KB	1.69 KB (0%)

codecov · 2019-09-03T10:26:50Z

Codecov Report

Merging #17284 into feature will increase coverage by 0.03%.
The diff coverage is 100%.

@@             Coverage Diff             @@
##           feature   #17284      +/-   ##
===========================================
+ Coverage    96.74%   96.78%   +0.03%     
===========================================
  Files          280      280              
  Lines         7552     7552              
  Branches      2104     2093      -11     
===========================================
+ Hits          7306     7309       +3     
+ Misses         244      241       -3     
  Partials         2        2

Impacted Files	Coverage Δ
components/table/Table.tsx	`95.39% <100%> (ø)`	⬆️
components/_util/wave.tsx	`88.46% <0%> (+2.88%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 18e57e9...0ad9967. Read the comment docs.

close #5753

afc163 · 2019-09-04T10:22:40Z

Dynamic Settings 例子里可以加上 ellipsis 和 fixed 的设置

已加

afc163 · 2019-09-04T10:33:49Z

用例都挂了，https://github.com/kaimallea/isMobile/ 最近没发版本，见鬼了。

afc163 · 2019-09-04T10:36:02Z

原来是我把这个发掉了：react-component/menu@72242cf

zombieJ · 2019-09-04T11:50:08Z

👍 看着 OK 了，CI fix 了就可以合了。

afc163 · 2019-09-12T09:11:04Z

components/table/style/index.less

@@ -328,6 +333,7 @@
  &-thead > tr > th,
  &-tbody > tr > td {
    padding: @table-padding-vertical @table-padding-horizontal;
+    overflow-wrap: break-word;


还需要给设定了宽度的列加上，word-break: break-word 不然还是会有对齐问题。

来了 #18789

jeessy2 · 2019-10-16T08:37:17Z

省略能自动加title不呢？不然列表里面看不清到底是啥内容

fengyun2 · 2019-10-17T00:33:03Z

表头能否也加上这个属性呢？

Airkro · 2019-10-17T04:03:36Z

在上一版本中 columns.width 设为 1 可以达到 min-content 的效果。但现在不管用了

我认为 tableLayout='auto' 可以解决，但该属性没有生效。

afc163 · 2019-10-17T04:05:41Z

表头能否也加上这个属性呢？

@fengyun2 之前试过不太好加，可以来试试给个 PR

Jkanon · 2019-10-18T02:34:33Z

我加上这个属性之后，表头单元格也省略了，我感觉得表头标题不应该省略，应该加个属性切换

HoikanChan · 2019-11-29T07:48:34Z

antd已经上了这个功能了
https://ant.design/components/table-cn/#components-table-demo-ellipsis
麻烦加上该功能

wuzhonghao1 · 2020-02-26T15:22:44Z

table中的columns.ellipsis属性与table的scroll属性在火狐上不兼容，出现不对齐且无法实现省略号的问题

pr-triage bot added the PR: draft label Jun 25, 2019

tests-checker bot suggested changes Jun 25, 2019

View reviewed changes

afc163 requested a review from zombieJ June 25, 2019 05:32

pr-triage bot added PR: reviewed-changes-requested and removed PR: draft labels Jun 25, 2019

afc163 changed the base branch from master to feature June 25, 2019 05:34

pr-triage bot added PR: draft and removed PR: reviewed-changes-requested labels Jun 25, 2019

afc163 mentioned this pull request Jul 6, 2019

建议Table组件使用div改写一下吧,坑太多了,table天生不支持布局 #17495

Closed

1 task

afc163 mentioned this pull request Jul 22, 2019

Use table-layout fixed in scrollable or fixed-column Table #17127

Closed

ant-design-bot added the Inactive label Jul 27, 2019

afc163 mentioned this pull request Aug 2, 2019

Table 's td > div use text-overflow:ellipasis，fixed columns overflow-hiden invalid #18048

Closed

1 task

weekly-digest bot mentioned this pull request Sep 1, 2019

Weekly Digest (25 August, 2019 - 1 September, 2019) #18594

Closed

afc163 force-pushed the feat-table-layout branch from 4fe4706 to 4c3b3ae Compare September 3, 2019 07:29

Add Table tableLayout prop

ad4247c

afc163 force-pushed the feat-table-layout branch from 4c3b3ae to ad4247c Compare September 3, 2019 07:31

default overflow-wrap break-word for all cell

806e7a4

afc163 mentioned this pull request Sep 3, 2019

support tableLayout and column.ellipsis react-component/table#369

Merged

afc163 changed the title ~~Feat table layout~~ feat: support tableLayout="fixed" and column.ellipsis Sep 3, 2019

🆙 upgrade rc-table

a1cde52

✅ fix table snapshot

d132505

afc163 force-pushed the feat-table-layout branch from d5e1fdb to d132505 Compare September 3, 2019 10:15

afc163 changed the title ~~feat: support tableLayout="fixed" and column.ellipsis~~ feat: support tableLayout and column.ellipsis Sep 3, 2019

⚡ support column.ellipsis

9efcb34

close #5753

afc163 added 2 commits September 4, 2019 18:12

🎬 Add tableLyout and ellipsis in Table demo

b803f6a

📝 Improve Table doc about tableLayout

0ad9967

zombieJ approved these changes Sep 4, 2019

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Sep 4, 2019

afc163 merged commit 2e59284 into feature Sep 5, 2019

afc163 deleted the feat-table-layout branch September 5, 2019 05:39

pr-triage bot added PR: merged and removed PR: reviewed-approved labels Sep 5, 2019

afc163 mentioned this pull request Sep 8, 2019

关于固定表头必须要给表头设置宽度 #11822

Closed

1 task

afc163 commented Sep 12, 2019

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: merged labels Sep 12, 2019

afc163 mentioned this pull request Sep 12, 2019

fix: table column width broken by long word #18789

Merged

14 tasks

snyk-bot mentioned this pull request Nov 19, 2019

[Snyk] Upgrade antd from 3.23.6 to 3.25.1 ndom91/newtelco-next-maintenance-mgmt#9

Closed

afc163 mentioned this pull request Nov 26, 2019

the latest version Table column add property className, when value is "hidden", the Table isn't responsive #19934

Closed

1 task

arange mentioned this pull request Jul 15, 2021

Table不再支持tableLayout属性 #31408

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 💥 support tableLayout and column.ellipsis #17284

feat: 💥 support tableLayout and column.ellipsis #17284

afc163 commented Jun 25, 2019 •

edited by issuehunt-oss bot

tests-checker bot left a comment

netlify bot commented Jun 25, 2019 •

edited

netlify bot commented Sep 3, 2019 •

edited

zombieJ commented Sep 3, 2019

afc163 commented Sep 3, 2019 •

edited

buildsize bot commented Sep 3, 2019 •

edited

codecov bot commented Sep 3, 2019 •

edited

afc163 commented Sep 4, 2019

afc163 commented Sep 4, 2019 •

edited

afc163 commented Sep 4, 2019

zombieJ commented Sep 4, 2019

afc163 Sep 12, 2019

afc163 Sep 12, 2019

jeessy2 commented Oct 16, 2019

fengyun2 commented Oct 17, 2019

Airkro commented Oct 17, 2019 •

edited

afc163 commented Oct 17, 2019

Jkanon commented Oct 18, 2019

HoikanChan commented Nov 29, 2019

wuzhonghao1 commented Feb 26, 2020

feat: 💥 support tableLayout and column.ellipsis #17284

feat: 💥 support tableLayout and column.ellipsis #17284

Conversation

afc163 commented Jun 25, 2019 • edited by issuehunt-oss bot

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

Referenced issues

tests-checker bot left a comment

Choose a reason for hiding this comment

netlify bot commented Jun 25, 2019 • edited

netlify bot commented Sep 3, 2019 • edited

zombieJ commented Sep 3, 2019

afc163 commented Sep 3, 2019 • edited

buildsize bot commented Sep 3, 2019 • edited

codecov bot commented Sep 3, 2019 • edited

Codecov Report

afc163 commented Sep 4, 2019

afc163 commented Sep 4, 2019 • edited

afc163 commented Sep 4, 2019

zombieJ commented Sep 4, 2019

afc163 Sep 12, 2019

Choose a reason for hiding this comment

afc163 Sep 12, 2019

Choose a reason for hiding this comment

jeessy2 commented Oct 16, 2019

fengyun2 commented Oct 17, 2019

Airkro commented Oct 17, 2019 • edited

afc163 commented Oct 17, 2019

Jkanon commented Oct 18, 2019

HoikanChan commented Nov 29, 2019

wuzhonghao1 commented Feb 26, 2020

afc163 commented Jun 25, 2019 •

edited by issuehunt-oss bot

netlify bot commented Jun 25, 2019 •

edited

netlify bot commented Sep 3, 2019 •

edited

afc163 commented Sep 3, 2019 •

edited

buildsize bot commented Sep 3, 2019 •

edited

codecov bot commented Sep 3, 2019 •

edited

afc163 commented Sep 4, 2019 •

edited

Airkro commented Oct 17, 2019 •

edited