无法对 Gatsby 网站的 Ant Design Table 中的列进行排序

关键词：

【中文标题】无法对 Gatsby 网站的 Ant Design Table 中的列进行排序【英文标题】：Can't sort Column in Ant Design Table in Gatsby site 【发布时间】：2020-04-16 04:21:33 【问题描述】：

我在 Gatsby 网站中实现了一个 Ant 设计表。我正在从 graphql 中提取数据。到目前为止，一切都很好。数据显示正常，分页工作等。

现在我想添加对列进行排序的功能。为此，我将表和列设置如下：

<Table
  dataSource=data.allNewsFeed.edges
  onChange=onChange
  rowSelection=rowSelection
  rowKey="id"
>
  <Column
    title="Title"
    dataIndex="node.title"
    key="title"
    sorter=(a, b) => a.node.title - b.node.title
    sortDirections=["descend", "ascend"]
  />
</Table>

现在，确实显示了用于对列进行排序的图标，但是当我单击它时没有任何反应。

如果我从排序功能中删除.node，也会发生同样的事情：sorter=(a, b) => a.title - b.title。

所以，我被卡住了——知道为什么这不起作用以及如何解决它吗？

谢谢。

【问题讨论】：

这能回答你的问题吗？ how to sort a table in alphabetical order with antd 【参考方案1】：

我想您可以使用String.prototype.localeCompare 代替a.node.title - b.node.title 进行正确排序。正如文档所述：

localeCompare() 方法返回一个数字，指示引用字符串是在排序顺序之前还是之后或与给定字符串相同。

不知何故：

const values = ['random', 'something', 'else', 'text'];
const result = values.sort((a,b) => 
  return a.localeCompare(b);
);

console.log(result);

所以我猜在提到的情况下它会是：

<Column title="Title"
        dataIndex="node.title"
        key="title"
        sorter=(a, b) => a.node.title.localeCompare(b.node.title)
        sortDirections=["descend", "ascend"] />

我希望这会有所帮助！

【讨论】：

谢谢 - 非常感谢。我需要使用 Dennis Vash 的答案才能真正让它发挥作用，但正如他所指出的，他的答案是基于你的。 没问题，很乐意为您提供帮助！【参考方案2】：

@norbitrial's answer 是正确的，作为参考，这里是一个通用排序器（用于数字和字符串）：

const sorter = (a, b) => (isNaN(a) && isNaN(b) ? (a || '').localeCompare(b || '') : a - b);

// Usage example with antd table column
[
  
    title: 'Status',
    dataIndex: 'status',
    key: 'status',
    width: '10%',
    // status can be Number or String
    sorter: (a, b) => sorter(a.status, b.status),
    render: Name
  
]

【讨论】：

带有 Ant Design 的 Snowpack：无法解决导入“antd”的问题

】带有AntDesign的Snowpack：无法解决导入“antd”的问题【英文标题】：SnowpackwithAntDesign:Import"antd"couldnotberesolved【发布时间】：2020-12-2023:20:34【问题描述】：我想将AntDesign与Snowpack一起使用。我遵循AndDesign文档并安装了antd，... 查看详情

无法让 @ant-design/pro-layout 的样式与“create-react-app”一起使用

】无法让@ant-design/pro-layout的样式与“create-react-app”一起使用【英文标题】：Cannotgetthestylesof@ant-design/pro-layouttoworkwith`create-react-app`【发布时间】：2019-12-0907:44:00【问题描述】：我正在尝试在create-react-apptypescript项目中使用@ant-desig... 查看详情

单击表格单元格内的按钮时无法更新状态，React Ant Design

】单击表格单元格内的按钮时无法更新状态，ReactAntDesign【英文标题】：Unabletoupdatethestatewhenbuttoninsidetablecellclicked,ReactAntDesign【发布时间】：2019-03-1623:51:55【问题描述】：我想在点击表格单元格时更新状态。但是事件handleClick没... 查看详情

如何自定义 Ant Design 的表单？

...描述】：我正在尝试使用antdesign进行内联表单设计，但我无法制作自定义版本。我附上了代码、代码输出的图像以及我想要的表单应该是什么样子。代码如下：constlayout=labelCol:span:8,wrapperCol:span:16,;constl 查看详情

如何改进对特定图像的 gatsby 图像查询

】如何改进对特定图像的gatsby图像查询【英文标题】：Howtoimprovegatsbyimagequeryingforspecificimages【发布时间】：2022-01-0216:38:07【问题描述】：只是对任何有助于减轻Gatsby网站内图像查询压力的解决方案感到好奇。Gatsby已经给出了图片... 查看详情

Gatsby - GraphQL - StaticQuery 标签 - 由于查询字符串的奇怪行为，站点无法编译

...sby-GraphQL-StaticQuery标签-由于查询字符串的奇怪行为，站点无法编译【英文标题】：Gatsby-GraphQL-StaticQuerytag-sitefailstocompileduetostrangebehaviorwithquerystring【发布时间】：2019-12-0406:08:48【问题描述】：我正在尝试对我的gatsby网站的wordpress... 查看详情

如何更改 ant-design 选项卡的默认边框颜色

...tbordercolor【发布时间】：2021-06-3010:23:05【问题描述】：我无法更改antdTabs的默认边框颜色。带有默认边框的标签：我想要的是这个：不知何故，我能够做到这一点，但它没有响应，需要更多时间。它搞砸了手机屏幕等。.../*restofcs... 查看详情

react组件库模板

开源的有蚂蚁金服的：1、https://pro.ant.design/index-cn2、https://pro.ant.design/docs/getting-started-cn3、https://github.com/shengulong/ant-design4、https://ant.design/docs/resource/download-cnreact中午网站：http://reac 查看详情

ant-design-vue:table指定expandedrowkeys后会导致其他的折叠按钮无法展开与回缩-展开所有缩回所有和单项展开缩回并存开发

...-vue有个bug：table指定expandedRowKeys后会导致其他的折叠按钮无法展开与回缩，然后我们试了defaultExpandedRowKeys也只会在首次加载起作用expandedRowKeys：展开的行，控制属性字符串数组defaultExpandedRowKeys：默认展开的行字符串数组两个数... 查看详情

Ant design Modal 移除或更改黑色背景

】AntdesignModal移除或更改黑色背景【英文标题】：AntdesignModalremoveorchangetheblackbackground【发布时间】：2021-10-2602:42:34【问题描述】：编辑：您好，非常感谢您的回答，这对我很有帮助。但是你知道如何去除线条背景吗？【问题讨论... 查看详情

无法访问 Gatsby 页面查询中的对象数据

】无法访问Gatsby页面查询中的对象数据【英文标题】：CannotaccessobjectdatainGatsbypagequery【发布时间】：2019-06-2205:11:15【问题描述】：我在网站上使用Prismic和Gatsby，但在使用页面模板时遇到了问题。graphql查询有效，但我无法访问数... 查看详情

antdv3升级v4

...hook的话升级v4会比较好。antdV4提供了一个codemodcli工具@ant-design/codemod-v4以帮助快速升级到v4版本。废弃的组件则通过@ant-design/compatible保持运行（从@ant-design/compatible引入的老版本Form组件，样式类名会从.ant-form变成.ant-legacy-form）如... 查看详情

如何更改步骤颜色（Ant-design）

】如何更改步骤颜色（Ant-design）【英文标题】：HowtochangeStepsColorin(Ant-design)【发布时间】：2019-04-2601:14:17【问题描述】：我是Ant设计的新手。目前我正在研究ReactJs项目，我在我的项目中使用了Steps。我想改变Steps的颜色，但不知... 查看详情

初识ant-design(代码片段)

设计价值观Ant-Design在设计方面，存在两个大的价值观，自然和确定。自然即顺其自然，在顺应用户的自我感知和行为方式来开发更自然的产品。确定即探索设计规律，并将其抽象成对象，减少设计者的主观干扰，降低系统的不... 查看详情

ReactJS Ant Design - 在 DatePicker 中禁用小于任何默认日期的日期

...作，我正在尝试禁用小于给定defaultDate的DatePicker日期，我无法以任何方式正确设置。情况是说日期选择 查看详情

@ant-design/charts 的 Next.js 问题，错误

】@ant-design/charts的Next.js问题，错误【英文标题】：Next.jsproblemwith@ant-design/charts,error【发布时间】：2022-01-1806:37:47【问题描述】：我从事一个大型项目(monorepo)。技术栈是Next、ApolloGraphQL、Ant-Design。我想添加@ant-design/charts包，但它... 查看详情

如何更改 Ant-Design 'Select' 组件的样式？

】如何更改Ant-Design\\\'Select\\\'组件的样式？【英文标题】：HowtochangethestyleofaAnt-Design\'Select\'component?如何更改Ant-Design\'Select\'组件的样式？【发布时间】：2018-09-0521:35:45【问题描述】：假设我想将Select组件的标准白色背景颜色更改... 查看详情

如何自定义 Ant.design 样式

】如何自定义Ant.design样式【英文标题】：HowtocustomizeAnt.designstyles【发布时间】：2018-07-1504:47:19【问题描述】：谁知道如何以正确的方式自定义Ant.design样式？例如，我想更改Header部分的默认背景颜色和高度：importReact,Componentfrom\'r... 查看详情