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

@ant-design-bot
Copy link
Contributor

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 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 commented Sep 17, 2018

All done!

@afc163 afc163 merged commit f0974e0 into feature Sep 21, 2018
@afc163 afc163 deleted the redesign-table-head-action-style branch September 21, 2018 05:41
} else if (sortOrder === 'descend') {
newSortOrder = 'ascend';
} else {
newSortOrder = undefined;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我再起个 PR 改下。

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

m26597 commented Sep 28, 2018

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

@zombieJ
Copy link
Member

zombieJ commented Sep 28, 2018

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

@AllanSmithX
Copy link

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

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

@AllanSmithX
Copy link

@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

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

@afc163 afc163 mentioned this pull request Mar 27, 2019
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants