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

Optimize Table column head interaction #12264

Merged
merged 10 commits into from Sep 21, 2018
Merged

Conversation

@afc163
Copy link
Member

@afc163 afc163 commented Sep 17, 2018

Related issues:

1


sketch:

image

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Sep 17, 2018

Deploy preview for ant-design ready!

Built with commit 0e7b928

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

@afc163 afc163 changed the title [WIP] Optimize Table column head interaction Optimize Table column head interaction Sep 17, 2018
@afc163 afc163 requested review from yesmeck and zombieJ Sep 17, 2018
@afc163 afc163 changed the title Optimize Table column head interaction [WIP] Optimize Table column head interaction Sep 17, 2018
```jsx
columns={[{
  title: (filters, sortOrder) => <div>Title</div>,
}]}
```

close #11246
@afc163 afc163 changed the title [WIP] Optimize Table column head interaction Optimize Table column head interaction Sep 17, 2018
@afc163
Copy link
Member Author

@afc163 afc163 commented Sep 17, 2018

All done!

@afc163 afc163 merged commit f0974e0 into feature Sep 21, 2018
21 checks passed
21 checks passed
WIP ready for review
Details
ci/circleci: compile Your tests passed on CircleCI!
Details
ci/circleci: dist Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_dist Your tests passed on CircleCI!
Details
ci/circleci: test_dist_15 Your tests passed on CircleCI!
Details
ci/circleci: test_dom Your tests passed on CircleCI!
Details
ci/circleci: test_dom_15 Your tests passed on CircleCI!
Details
ci/circleci: test_es Your tests passed on CircleCI!
Details
ci/circleci: test_es_15 Your tests passed on CircleCI!
Details
ci/circleci: test_lib Your tests passed on CircleCI!
Details
ci/circleci: test_lib_15 Your tests passed on CircleCI!
Details
ci/circleci: test_node Your tests passed on CircleCI!
Details
ci/circleci: test_node_15 Your tests passed on CircleCI!
Details
codecov/patch 96.66% of diff hit (target 92.28%)
Details
codecov/project Absolute coverage decreased by -2.8% but relative coverage increased by +4.38% compared to c65d6f6
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
deploy/netlify Deploy preview ready!
Details
security/snyk - package.json (paranoidjk) No manifest changes detected
@afc163 afc163 deleted the redesign-table-head-action-style branch Sep 21, 2018
} else if (sortOrder === 'descend') {
newSortOrder = 'ascend';
} else {
newSortOrder = undefined;
}

This comment has been minimized.

@zombieJ

zombieJ Sep 21, 2018
Member

这里需要跟踪一下点了哪个 column:
kapture 2018-09-17 at 20 42 56

This comment has been minimized.

@afc163

afc163 Sep 21, 2018
Author Member

我再起个 PR 改下。

@afc163 afc163 mentioned this pull request Sep 21, 2018
@m26597
Copy link

@m26597 m26597 commented Sep 28, 2018

@afc163 @zombieJ @ant-design-bot 请问我应该怎样使用上述deploy-preview-12353--ant-design发布版本中的点击表头排序功能? 我把本地antd版本下载为3.9.2发现没有作用,我应该怎样操作?

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Sep 28, 2018

@m26597 ,这是 feature branch,会在 3.10.x 里发布

@AllanSmithX
Copy link

@AllanSmithX AllanSmithX commented Oct 19, 2018

@afc163 刚学react,请教个问题,现在的确点击列标题行就可进行排序了,但是列标题提示功能现在不能正确显示了。我代码用了 react-tooltip,代码如下:
table 列类似下面这种:
title: <span data-tip data-for="flag">Text</span>, dataIndex: 'quantity ', key: 'quantity ', sortType: 'number', sorter: (a, b) => { return a.quantity - b.quantity; }
render中类似下面这种:
<ReactTooltip id="flag" type="dark"> <span>Tool Tips Info</span></ReactTooltip>

@simon-yxl
Copy link

@simon-yxl simon-yxl commented Oct 31, 2018

扩大table的sorter点击区域这有个bug,我们有一种业务情况,表格头部有tooltip,需要鼠标放上去显示提示文案,但是这个sorter冲突了,3.9.3的时候还正常呢

@AllanSmithX
Copy link

@AllanSmithX AllanSmithX commented Oct 31, 2018

@simon-yxl 我们这边儿目前这样处理可以用哈
1、在先前代码基础上添加 className="ant-table-column-sorters",应该就能显示你设置的提示信息了。
title: <span data-tip data-for="XXX" className="ant-table-column-sorters">XXX</span>
2、若是光标划过时不想看到提示“排序”,则可表属性中添加 locale={{ sortTitle: '' }},如下所示:
<Table locale={{ sortTitle: '' }} />

@simon-yxl
Copy link

@simon-yxl simon-yxl commented Oct 31, 2018

@afc163 刚学react,请教个问题,现在的确点击列标题行就可进行排序了,但是列标题提示功能现在不能正确显示了。我代码用了 react-tooltip,代码如下:
table 列类似下面这种:
title: <span data-tip data-for="flag">Text</span>, dataIndex: 'quantity ', key: 'quantity ', sortType: 'number', sorter: (a, b) => { return a.quantity - b.quantity; }
render中类似下面这种:
<ReactTooltip id="flag" type="dark"> <span>Tool Tips Info</span></ReactTooltip>

加了个className解决了,谢谢呢🙏

@dpitois dpitois mentioned this pull request Nov 22, 2018
1 of 1 task complete
@afc163 afc163 mentioned this pull request Mar 5, 2019
0 of 1 task complete
@afc163 afc163 mentioned this pull request Mar 27, 2019
0 of 1 task complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

6 participants