首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Antd表-按dataIndex以外的值排序

Antd表是一个基于React框架的UI组件库,提供了丰富的表格组件,方便开发人员快速构建数据展示和操作的界面。在Antd表中,可以通过设置dataIndex属性来指定表格列与数据源中的字段对应关系。

按dataIndex以外的值排序是指在表格中按照除了dataIndex指定的字段以外的其他字段进行排序。这种排序方式可以用于根据表格中的其他列的值来调整数据的展示顺序,以满足特定的需求。

在Antd表中,可以通过使用sorter属性来实现按照dataIndex以外的值排序。sorter属性接受一个函数作为参数,该函数用于自定义排序规则。在函数中,可以根据需要访问表格中的其他列的值,并根据这些值进行排序。

以下是一个示例代码,演示了如何在Antd表中按照dataIndex以外的值排序:

代码语言:txt
复制
import React, { useState } from 'react';
import { Table } from 'antd';

const dataSource = [
  {
    key: '1',
    name: 'John',
    age: 32,
    address: 'New York',
    score: 90,
  },
  {
    key: '2',
    name: 'Mike',
    age: 28,
    address: 'London',
    score: 85,
  },
  {
    key: '3',
    name: 'Tom',
    age: 30,
    address: 'Paris',
    score: 95,
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Score',
    dataIndex: 'score',
    key: 'score',
    sorter: (a, b) => a.score - b.score, // 按score字段排序
  },
];

const App = () => {
  const [sortedInfo, setSortedInfo] = useState({});

  const handleChange = (pagination, filters, sorter) => {
    setSortedInfo(sorter);
  };

  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      onChange={handleChange}
      pagination={false}
    />
  );
};

export default App;

在上述代码中,我们定义了一个包含姓名、年龄、地址和分数的数据源dataSource,并通过设置columns来定义表格的列。在分数列中,我们通过设置sorter属性来指定按照score字段进行排序。

通过在Table组件中设置onChange属性,可以监听表格的排序变化。在handleChange函数中,我们通过setSortedInfo来更新排序信息。

这样,当用户点击分数列的表头时,表格会按照分数字段进行排序,并且可以在sortedInfo中获取到排序的相关信息。

Antd表的优势在于它提供了丰富的表格组件和功能,可以快速构建出美观、易用的数据展示界面。它还提供了一系列的样式和主题定制选项,可以根据项目需求进行个性化定制。

Antd表的应用场景非常广泛,适用于各种需要展示和操作数据的场景,如管理系统的数据列表、报表展示、数据分析等。

推荐的腾讯云相关产品:腾讯云服务器(CVM)、腾讯云数据库(TencentDB)、腾讯云对象存储(COS)等。您可以通过访问腾讯云官网了解更多关于这些产品的详细信息和使用指南。

腾讯云官网链接地址:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端: 如何让你Table组件无限可能

需求, 也可以使用 antd 或者 element 构建, 但是对于 lowcode 系统而言, 很多模块都是不确定, 我们需要根据协议和数据来驱动 Table 渲染....协议层主要约束不同字段展示类型, 比如字符串, 按钮, 链接, 标签等, 用户在提交表单之后会携带协议层对应 flag 和用户输入, 这有利于我们解析器渲染Table时可以对不同列展示不同类型...Table 排序, 多列排序, 自定义搜索 Table 排序, 多列排序实现方式也很简单, 我们只需要自定义 Table 头部, 对排序字段提升为 Table 公共 State, 最后通过排序标识和排序方法进行排序即可...目前 antd4.0已经支持多列排序, 大家可以直接参考学习即可, 如下: ?...: { title: item, dataIndex: item, key: item, ...getColumnSearchProps(item) } antd4.0 中也有详细使用方式

1.5K10
  • 前端复杂表格导出excel,一键导出 Antd Table 看这篇就够了(附源码)

    使用 addWorksheet 函数第二个参数来指定工作选项。...// 注意:第4列及以上列将右移1列。 // 另外:如果工作行数多于列插入项中,则行将仍然被插入,就好像存在一样。...通过数组添加一行数据 worksheet.addRow([3, 'Sam', new Date()]); // 同时添加多行数据 worksheet.addRows(list); // 遍历工作中具有所有行...解析 AntD Table columns 和 dataSource 因为我们是用 AntD Table,其实已经构造出了表头和具体表格数据,所以只需解析即可。...处理多个表格时,也可以用同样方法。因为每一行数据都是自己写入,所以不管有几张都没有关系,我们关心只有每一行数据。 同时我们做了行和列合并算法,可以实现每一张每一列都能定制宽度。

    11.4K20

    ExcelJS导出Ant Design Table数据为Excel文件

    添加工作: const sheet = workbook.addWorksheet('My Sheet'); 指定工作选项: 使用 addWorksheet 函数第二个参数来指定工作选项。...// 注意:第4列及以上列将右移1列。 // 另外:如果工作行数多于列插入项中,则行将仍然被插入,就好像存在一样。...; // 使用列键对象分配行 row.values = {   id: 13,   name: 'Thing 1',   dob: new Date() }; // 在该行下方插入一个分页符 row.addPageBreak...(); // 遍历工作中具有所有行 worksheet.eachRow(function(row, rowNumber) {   console.log('Row ' + rowNumber +...解析 AntD Table columns 和 dataSource : // 根据 antd  column 生成 exceljs  column const DEFAULT_COLUMN_WIDTH

    5.3K30

    ExcelJS导出Ant Design Table数据为Excel文件

    添加工作: const sheet = workbook.addWorksheet('My Sheet'); 指定工作选项: 使用 addWorksheet 函数第二个参数来指定工作选项。...// 注意:第4列及以上列将右移1列。 // 另外:如果工作行数多于列插入项中,则行将仍然被插入,就好像存在一样。...; // 使用列键对象分配行 row.values = {   id: 13,   name: 'Thing 1',   dob: new Date() }; // 在该行下方插入一个分页符 row.addPageBreak...(); // 遍历工作中具有所有行 worksheet.eachRow(function(row, rowNumber) {   console.log('Row ' + rowNumber +...解析 AntD Table columns 和 dataSource : // 根据 antd  column 生成 exceljs  column const DEFAULT_COLUMN_WIDTH

    47130

    基于业务沉淀组件 => manage-table

    在开发cms后台过程中,最最常用应该就是Table了,例如 antdtable:图片 这应该是最最常用开发后台管理系统中使用到组件了,没有个Table,都不好意思说是个cms系统。...实现首先,既然是antdTable组件,我们肯定是要基于现有的功能去实现这个需求,所以我们需要在Table组件基础上套一层,既不能影响Table展示,同时还能够定制展示列。...那我们就可以列一下需求了:不影响Table展示可以选择自定义展示列可以对展示列进行排序不会对业务产生其他影响(这是最主要)需求既然已经明确,我们就可以开整了,具体实现,就不多说了,我们可以看下实现后效果...,即部分字段默认展示且不允许进行排序和删除。...,默认'设置显示字段', 非必传defaultShowKeysstring[] 默认显示字段,不需要进行选择or 排序 initialShowKeysstring[] 初始显示字段

    74620

    多年管理系统开发经验总结~代码解决方案

    我最近接手了一个项目,先不论是否代码行数多少,仅是思路就很混乱,像是一件衣服在打补丁,而衣服上还有混乱线网,数据绕来绕去,和断掉线头,举例说明下 关于补丁 没有对数据进行扩展处理,一个一个变量。...,回调方法里使用却是,子类传回来父类静态数据number 关于断掉线头 例如使用antdTabs:如果只是单纯点击切换模块,没有进行模块特殊处理,则不需要onChange方法,和状态存储...,基于以往项目可以提取以下部分公共结构 数据流向 搜索排序分页通过操作参数获取,列表展示数据 列表操作区会根据删除或者修改后,重新获取列表数据 零 · 项目准备 此次针对 搜索 列表 分页 区域...,我们一一进行总结 完整代码[1] 关于补丁 在处理查询参数时,我们对查询数据进行了搜索和分页分类存储,但是都保存在一个变量里,如果后期加排序或者其他参数,不会影响之前逻辑,可以在原有基础上进行扩展...index.js进行数据处理,提供给其他组件相应处理函数 对弹窗组件进行柯里化处理,不仅可以避免给列表传递非必要参数,减少组件刷新,还可以方便跨级传递父级参数 关于断线 在进行权限处理时,我们并不需要存储单选框

    87320

    详细剖析|袋鼠云数栈前端框架Antd 3.x 升级 4.x 踩坑之路

    ・4.x 版本 initialValue 在 4.x,antd 团队已经把这个 bug 给解了,并且一是为了 name 重名问题,二是再次强调其初始功能,现在提到 Form 中了。...● validator 在 antd3 时,我们使用 callback 返回报错。但是 antd4 对此做了修改,自定义校验,接收 Promise 作为返回。...3)onSelect 清空了,又会被 onChange 赋值回来。 ・模块复用 在新版 rc-select 中,antd 官方抽取了一个 generator 方法。...,偏移不会影响任何其他元素位置。...在拖拽等回调中就可以通过 nodeData.props.data 方式获取到 data 。但在 antd4 中,获取参数数据结构发生了改变,原先直接通过 props 点出来不行了。

    4.1K30

    使用antd表格组件实现日程

    前言 20多天前,遇到一个日程业务需求,可以动态增加列、对单元格进行合并,结合公司jsp项目的已有功能完成单元格增、删、改操作。...环境搭建 因为公司项目是基于jspantd本想用Vue版本,无奈它与jsp一些语法冲突了跑不起来,于是就尝试了react版本antd,它跑起来了没有发现任何兼容性问题,一切正常。...由于要与项目中已有的功能进行交互,没法用脚手架,我只能以cdn方式引入react,如下所示,顺序引入react、axios、lodah以及antd所需要文件。..."> 上述用到资源文件地址: react-antd-schedule/lib 我们需要把react相关代码写在text/babel标签中,如下所示,我们打印antd和react看看是否有。...最后实现效果如下所示,实现代码请移步:react-antd-schedule/index.html image-20201119175256753 动态增加列 这个日程用户可以通过点增加图标来增加一列日程

    3.7K20

    「前端组件化」以Antd为例,快速打通UI组件开发任督二脉

    如图为AntdInput输入框组件「平平无奇」参数:Antd组件功能赏析电影有精彩片段赏析,Antd组件很丰富,如果一一列举,详细介绍,可能我要写到下个月,所以我选了几个常见且基础组件,来看看Antd...rc-steps我在看Antd源码时发现,有些组件底层用第三方react-component中组件。当然这个组件库也是属于Antd。...当点状步骤条参数progressDot是函数类型时,会使用传入;否则使用内部定义点状展示内容。自定义图标,参数icon表示步骤图标的类型,当它有时候,步骤条会显示成它。...tbody中表格项,也是通过columns中列表项dataIndex变量,从参数dataSource中找到对应。...Cell单元格组件中,结合columns中dataIndex确定最终回显

    2.2K10

    Mock17-Antd高级模板组件ProComponents

    升级好最新前端框架后,让我们回到Mock服务前后端配置服务开发中,最开始我们已经学会了Antd pro中后台框架创建,以及使用Ant Design组件进行布局式开发前端页面。...可以显著地提升制作 CRUD 页面的效率,更加专注于页面 拿项目解释下,我们之前在实现项目管理时候,是一个个组件组装起来,并且需要对样式进行布局调整。而且大部分页面的无非就是表单,搜索和分页。...同时查询表单和 params 参数也会带入。...formRef 是否显示搜索表单,传入对象时为搜索表单配置 search 是否显示搜索表单,传入对象时为搜索表单配置 onSubmit 提交表单时触发 其他属性和参数配置,参考之前讲解antd组件使用方式...这里只需要注意to等于routes配置path即可。

    32610

    前端提效 - js 批量导出 excel 为zip压缩包

    上一篇文章:前端复杂表格导出excel,一键导出 Antd Table 看这篇就够了(附源码)详细介绍了如何实现解析 Antd Table、组装数据和调整表格样式,感兴趣可以先看看。...为 key 进行取值,要拿到 render 函数执行后才是正确。...(data[column.dataIndex], data); 注意 render 需要传入两个参数,一个是 text,一个是这行数据对象,我们都能确定参数,所以直接传入。...然后判断 renderResult类型,如果是 object 类型,说明是个由 html 标签包裹 ReactNode,需要递归取出最终渲染。...由于我们采用了递归来取最后渲染,所以无论嵌套了多少层标签,都可以正确取到

    3.3K20
    领券