使用表数据自定义 React Antd 表头

2023-12-12

In my React project, I need to customize antd table header as follows enter image description here

我在下面添加了示例代码。

I need to have Sum of the amount in the header of the Amount column enter image description here

示例代码:

https://codesandbox.io/embed/great-sun-534cd


您可以使用这样的标题函数来获取总金额字段

const columns = [

    {
      title: () => { 
        var total = 0;
        for(var i=0;i<data.length;i++){
          total += data[i].amount;
        }
        return <div>total {total}</div>;
      } ,
      dataIndex: "date",
      width: 200
    },
    {
      title: "Amount",
      dataIndex: "amount",
      width: 100
    }
  ];

示例链接在这里https://codesandbox.io/s/festive-wiles-st6wl?fontsize=14

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用表数据自定义 React Antd 表头 的相关文章

  • 正则表达式中的“g”标志是什么意思?

    的含义是什么g正则表达式中的标志 之间有什么区别 g and g用于全局搜索 这意味着它将匹配所有出现的情况 通常你还会看到i这意味着忽略大小写 参考 全局 JavaScript MDN https developer mozilla or
  • 使用 npm 作为构建工具连接文件

    我最近发现我可以使用 npm 作为任务运行程序 而不是 gulp 或 grunt 到目前为止 一切都很棒 lint stylus jade uglify watch 等 但串联部分 我似乎无法实现 gulp 是这样的 gulp task s
  • 使用 jQuery / .data() 避免内存泄漏

    我正在使用 jQuery 动态创建 HTML 元素 现在需要针对它们存储 JavaScript 数据 但是 我现在担心内存泄漏 因为我实际上从未在对象上调用 删除 我 append 和 detach 它们 但从不 remove jQuery
  • Google Charts(AreaChart)如何检测缩放变化

    我正在画一个面积图 在覆盖层上有一些标记 我正在使用explorer选项 仅限水平 以便用户放大和缩小 问题是我找不到一种方法来通知缩放更改 以便有机会更新制造商位置 有一个图表范围变化事件 但它不是由 AreaChart 触发的 我尝试检
  • 夜间值班。单击带有文本的元素

    我遇到问题 无法单击具有某些独特文本的网页元素 我有这样的结构 div class wg wagon type title Text div 我试试这个 click wg wagon type title contains Text 但我有
  • 如何为 HTML5 音频元素制作加载栏?

    我正在尝试为 HTML5 音频元素制作一个加载栏 显示加载 缓冲的百分比 对于视频标签 可以使用以下方法进行计算 video buffered end 0 video duration 但我无法让它与音频标签一起使用 它只是返回一个固定值
  • Typescript:如何在自定义过滤器中使用角度 $filter

    如何在自定义过滤器中使用 Angular filter 如何注入 filter依赖 module Filters export class CustomFilter public static Factory return function
  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w
  • 如何在一段特定时间后在后台运行 ajax 调用? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想在一段特定的时间后显示警报消息 您想继续吗 如果用户同意 则 ajax 调用必须在后台运行 否则取消 ajax 调用 那么请告诉我
  • 在 php、ajax 或 javascript 中加载进度?

    任何人都知道如何在系统仍在服务器端获取数据的同时在客户端显示加载进度以及完成的百分比 例如 当我在客户端按下 确定 按钮时 它会调用服务器端从数据库收集数据 整个过程可能需要2到3分钟 如何在客户端显示加载进度 大约加载完成了多少 我怎样才
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 获得一次性绑定以适用于 ng-if

    这个问题已经被之前问过 https stackoverflow com questions 23969926 angular lazy one time binding for expressions 但我无法让该解决方案发挥作用 所以我想
  • JavaScript:预期的赋值或函数调用,却看到了一个表达式

    我正在使用 JSHint 来确保我的 JavaScript 是 严格的 但我收到以下错误 预期是赋值或函数调用 但看到的是表达式 关于以下代码 var str A B C D var data var strArr str split fo
  • ReferenceError 和全局对象

    在浏览器中的 JavaScript 中window是全局对象 这意味着在全局范围内定义的每个变量都是window 那么为什么我会得到这个结果 console log window foo No error logs undefined co
  • toLocaleDateString() 在 Chrome 中如何工作?

    我理解了javascript方法toLocaleDateString 使用的计算机设置 让我们来W3Schools 示例 http www w3schools com jsref tryit asp filename tryjsref to
  • PhantomJS 网页内存消耗?

    是否有一种编程方式 因为我想在运行时自动执行 方式来查看网页在通过 PhantomJs 运行时使用了多少内存 我也在使用 casperjs 如果这有帮助的话 我已经搜索了很多但没有找到任何方法 PhantomJs 使用 QtWebKit 因
  • 如何修复 getImageData() 错误画布已被跨源数据污染?

    我的代码在本地主机上运行得很好 但在网站上却不起作用 我从控制台收到此错误 对于这一行 getImageData x y 1 1 data Uncaught SecurityError Failed to execute getImageD
  • 如何使用 Jest 测试对象键和值的相等性?

    我有一个mapModule我在其中导入组件并导出它们 import ComponentName from components ComponentName export default name ComponentName 我该如何测试ma
  • 如何设置 Firebase 用户的显示名称?

    根据Firebase网站上的JS Auth文档 它只展示了如何获取 displayName 以及如何更新 displayName 所以我尝试更新它 但这有点不合逻辑 因为你怎么能在不创建某些东西的情况下更新它呢 所以我的问题是 如何设置注册
  • 使用 JQuery 预填充选择字段的下拉选项验证

    我有这个 JQuery 片段来防止选择已在另一个字段中选择的下拉选项 var coll select name service on change function coll each function var val this value

随机推荐

  • 在用户登录期间,使用正确的用户名和密码进行身份验证不会返回 None

    我的用户登录在身份验证过程中存在一些问题 我正在使用 Django 1 9 和 Python 3 6 这是我的代码存储库 用户 验证 用户名 用户名 密码 密码 将用户返回为无 这就是我的帐户 视图 py寻找登录 def register
  • 禁用特定应用程序的对讲

    我有一个为盲人修改Android手机的项目 因此我使用Android文本语音转换 我已经成功使用 TTS 库创建了一个 SMS 和电话应用程序http code google com p eyes free 并使用 myTTS speak
  • PHP 在关闭主窗口时销毁会话

    如何在关闭浏览器时销毁会话 当浏览器窗口关闭时 会话应终止 现在 如果我关闭窗口并输入应用程序 URL 它就允许我访问应用程序 本机 php 会话会在浏览器关闭时过期 只要您不修改会话 cookie 过期时间 就应该没问题 如果这种情况没有
  • 为什么纯 IEnumerable 的内容对于 WPF DataGrid 是不可见的?

    假设我有一个数据网格 其中 itemssource 绑定到属性 Collection 例如 IEnumerable 当然 我为其编写了适当的 getter 和 setter 现在 当我分配给这个属性 集合 时 只是 IEnumerable
  • 编译错误:用户定义类型未定义

    当我尝试编译此代码时 在 VB6 中出现编译错误 用户定义的类型未定义 谁能告诉我需要做什么来解决这个错误 以下是我收到错误的行 Public Conn As ADODB Connection Public rs As ADODB Reco
  • 为什么需要 virtual 关键字?

    换句话说 为什么编译器不 知道 如果函数的定义在派生类中发生更改 并且指向该派生类动态分配的内存的指针调用更改后的函数 那么该函数特别应该被称为而不是基类的 在什么情况下 使用 virtual 关键字对程序员没有好处 virtual关键字告
  • 适用于 Android 的离线导航软件 - 有什么?

    我正在寻找适用于 Android 平台的导航软件 我有一些要求 离线地图 地图应存储在设备 存储卡上 因此不需要互联网连接 应该有某种方式 通过代码 与应用程序交互 发送路线请求 也许获取当前位置 将应用程序带到前台 后台等 API 以便可
  • 如何使用 PyOpenGL 渲染文本?

    我正在学习现代 openGL 目前我在渲染文本方面遇到了麻烦 我正在关注这个tutorial这是用 C 编写的 但我正在尝试用 python 实现 这是我的代码 from OpenGL GL import from OpenGL GLU i
  • 如何获取lxml中元素的路径?

    我正在使用 python 中的 lxml 中的 XPath 在 HTML 文档中进行搜索 如何获取某个元素的路径 这是 ruby nokogiri 的示例 page xpath text each do textnode path text
  • 使用flexbox为div设置相等的高度(取决于最短的)[重复]

    这个问题在这里已经有答案了 很明显如何使用 Flexbox 使两个 div 与最高的 div 具有相同的高度 但对我来说 不清楚如何根据最短的 div 设置相等的高度 例如 我连续有两个 div 第一个 div 高度取决于内部图像的大小 所
  • 在自定义控件上显示触摸键盘

    The 触摸键盘示例展示了一种让开发人员在用户触摸自定义控件时通知系统显示触摸键盘的方法 可能在平板电脑模式下 有人指出 在PC上 您可以通过实现TextPattern提供程序接口 ITextProvider 和ValuePattern提供
  • Java中如何设置类路径?

    我有很多 jar 文件要添加到我的类路径中 因此每次编译 java 文件时我都会得到如下命令 javac cp commons digester 2 1 commons digester 2 1 jar lucene core 3 0 3
  • 在 Bash 命令提示符下添加 git 分支

    我尝试在 bash 提示符上添加我当前正在处理 签出 的 git 分支 但没有成功 同时保留显示活动目录 文件的当前路径完好无损的 我家里有一个 bashrc 文件 但我也看到很多人提到 profile 文件 git 1 9 3 或更高版本
  • 将字符串转换为整数/浮点/双精度

    我正在尝试将字符串转换为Integer Float Double但我有一个NumberFormatException 我的字符串是37 78584 现在我将其转换为我得到的任何一个NumberFormatException 我怎样才能转换这
  • Internet Explorer 11 中对 ES6 的支持

    根据这个页面http kangax github io compat table es6 ES6 功能未在 IE 11 中实现 IE 11 是否有有一天实现它们的计划 或者我可以忘记它吗 是否有一个页面可以解释他们对该主题的意图 我在某处读
  • C++ 受保护/公共重载

    我有一堂这样的课 class Foo public Foo for int i 0 i lt 10 i v push back i const vector
  • .NET MVC Action 参数类型为对象

    如果我有一个简单的控制器 路由如下 context MapRoute Default controller action new controller Base action Foo 控制器Foo的动作如下 HttpPost public
  • WinRT Metro 应用程序是否交叉兼容(x86/64 和 ARM)?

    维基百科有关 Windows 8 的条目在其声明中地铁段 that Metro 应用程序将与基于 x86 64 的系统交叉兼容 ARM 上的系统和 Windows 但没有参考文献 标有 需要引用 从技术上讲 是否可以在 ARM 上运行使用
  • android-使用VideoView显示视频时黑屏

    这是我的布局
  • 使用表数据自定义 React Antd 表头

    In my React project I need to customize antd table header as follows 我在下面添加了示例代码 I need to have Sum of the amount in the