首页
学习
活动
专区
工具
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.6K10
  • 前端复杂表格导出excel,一键导出 Antd Table 看这篇就够了(附源码)

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

    11.8K20

    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.4K30

    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

    48630

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

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

    75420

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

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

    87520

    使用antd表格组件实现日程表

    前言 20多天前,遇到一个日程表的业务需求,可以动态增加列、对单元格进行合并,结合公司的jsp项目的已有功能完成单元格的增、删、改操作。...环境搭建 因为公司的项目是基于jsp的,antd本想用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 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为例,快速打通UI组件开发的任督二脉

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

    2.3K10

    Mock17-Antd高级模板组件ProComponents

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

    36410

    Rust赋能前端: 纯血前端将 Table 导出 Excel

    可以看到,类似title/width/dataIndex都是我们在前端构建Table(Antd)中用到的字段。...对每个列的 dataIndex 进行查找,如果找到相应值,将其转换为字符串形式,并存储在 row 中。 将每一行的 row 数据加入到 plain。...核心逻辑: 动态数据处理:根据列的 dataIndex 从 source_row 中提取对应的值。 类型处理:处理可能的 JSON 数据类型,包括字符串、数字、布尔值等,将它们统一转换为字符串。...具体来说,它依据 correlation 中的列和行的值,确定哪些单元格的内容是相同的,并根据这些相同的值来决定哪些单元格需要合并。...这个映射用于快速查找每个列的索引。 column_index_map 以 &String(列的 dataIndex)为键,列的索引 usize 为值。 2.

    6900
    领券