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

Conversation

Projects
None yet
6 participants
@afc163
Member

afc163 commented Sep 17, 2018

Related issues:

1


sketch:

image

@ant-design-bot

This comment has been minimized.

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 from [WIP] Optimize Table column head interaction to Optimize Table column head interaction Sep 17, 2018

@afc163 afc163 requested review from yesmeck and zombieJ Sep 17, 2018

@afc163 afc163 changed the title from Optimize Table column head interaction to [WIP] Optimize Table column head interaction Sep 17, 2018

support column.title as render props
```jsx
columns={[{
  title: (filters, sortOrder) => <div>Title</div>,
}]}
```

close #11246

@afc163 afc163 changed the title from [WIP] Optimize Table column head interaction to Optimize Table column head interaction Sep 17, 2018

@afc163

This comment has been minimized.

Member

afc163 commented Sep 17, 2018

All done!

@afc163 afc163 merged commit f0974e0 into feature Sep 21, 2018

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

Member

我再起个 PR 改下。

@afc163 afc163 referenced this pull request Sep 21, 2018

Merged

Fix sort column toggle #12353

@m26597

This comment has been minimized.

m26597 commented Sep 28, 2018

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

@zombieJ

This comment has been minimized.

Member

zombieJ commented Sep 28, 2018

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

@AllanSmithX

This comment has been minimized.

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

This comment has been minimized.

simon-yxl commented Oct 31, 2018

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

@AllanSmithX

This comment has been minimized.

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

This comment has been minimized.

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解决了,谢谢呢🙏

@dazbo dazbo referenced this pull request Nov 22, 2018

Closed

Table column sorter icon has bad UX #13249

1 of 1 task complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment