使用表数据自定义 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 表头 的相关文章

  • 在 ajax 请求上启用 jQuery contextMenu 项

    我正在尝试更新上下文菜单 http medialize github com jQuery contextMenu docs htmlitem 如果 ajax 请求改变了我的 div 内容 这就是我的意思 我有一个这样的 div div c
  • 图表.js.如何更改“标签”数组的字体样式?

    我从 Chart JS 库中获取了一个图表 截屏 https i stack imgur com DnuRq png var ctx document getElementById myChart var data labels HTML
  • querySelector 搜索直接子级[重复]

    这个问题在这里已经有答案了 我有一些类似 jquery 的函数 function elem return gt someselector elem 问题是我怎样才能做同样的事情querySelector 问题是 gt 选择器中querySe
  • 如何判断网站是否使用 next.js?

    很容易判断一个网站是否使用 ReactJS 通过使用反应开发者工具 https chrome google com webstore detail react developer tools fmkadmapgofadopljbjfkapd
  • 无需重定向的 HTML 页面提交

    有没有什么方法可以在不使用ajax的情况下提交html表单而无需从当前页面重定向 你可以设置一个target 为您form 这样您就可以将表单提交到新选项卡 target blank 或一个小的 隐藏的iframe target nameo
  • 为什么Promise中的代码会同步执行? [复制]

    这个问题在这里已经有答案了 在我的项目中 我有一个很长时间运行的操作 所以我决定将其放入Promise因为我认为这样我就可以在里面的代码继续执行其他操作Promise正在跑步 调试的时候发现外面的代码Promise仅当里面的代码执行Prom
  • 如何将焦点设置在 BootStrap 中的第一个输入字段上? [复制]

    这个问题在这里已经有答案了 可能的重复 如何将焦点设置到独立于 id 的 HTML 表单中的第一个输入元素 https stackoverflow com questions 277544 how to set the focus to t
  • 为什么这个递归函数返回未定义?

    我正在尝试编写一个使用递归组合两个字符串的函数 我的代码如下 但我不知道为什么该函数返回未定义 特别是当我在基本情况下使用 console log 时 它不会打印未定义而是打印正确的值 var str3 function merge str
  • 是否有跨浏览器的方式在Javascript中设置style.float?

    通常 如果您需要在 JavaScript 中设置样式属性 您可以这样说 element style attribute value 虽然略有不同 但属性名称通常与 HTML 属性名称类似 尽管是驼峰式 对我来说问题是 float 属性不起作
  • 为什么浏览器允许onmousedown JS改变href?

    我很长时间以来都注意到 当您尝试复制链接位置或在 Facebook 上打开链接时 它会修改链接并将其传递给l php 例如 我可以被发送到 http www facebook com l php u http 3A 2F 2Fwww goo
  • iPhone 上的锁定方向 UIWebView

    有没有办法锁定 UIWebView 的方向 使用 Obj C JS 还是 Html 我不想有按钮或任何东西 我只想在应用程序打开时将其锁定为纵向 好像这个堆栈溢出帖子 https stackoverflow com questions 43
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • React Hooks 常量组件与功能组件

    我理解函数组件和类组件之间的区别 但是 const 组件和函数组件之间有什么区别 e g const Home gt return div Home div To function Home return div Home div 两者都可
  • 为什么 TypeScript 混合了模块和原型模式?

    我正在查看此页面上 TypeScript 生成的 JS 代码 http www typescriptlang org Playground http www typescriptlang org Playground 基本上 要创建一个Gr
  • chrome 选项卡/窗口中的 window.open 行为

    我有一小段 javascript 旨在打开两个或更多选项卡 这在 FF 和 IE 中工作正常 但 chrome 会在新窗口而不是选项卡中打开第二个窗口 它不依赖于 url 因为我已经尝试过使用两个相同的 url 第一个在选项卡中打开 第二个
  • Firebase 身份验证和实时应用程序数据库如何保护自身安全?

    从一般开发的角度来看 我很好奇如何保护在线资源的访问 我们使用以下 Firebase 配置参数初始化 Web 应用程序 apikey authdomain projectid databaseurl messagesenderid 服务器如
  • 加载 Angular 库时,IE9 和 IE10 中出现 Angular JS“SCRIPT5007:预期对象”错误

    我正在开发一个 AngularJS 应用程序 该应用程序应在 Firefox IE 9 和 IE 10 上运行 我使用最新版本的 angularjs 库 现在是 1 3 15 服务器端是在JavaEE平台上用Java编写的 服务器运行在Gl
  • 从json中获取所有子节点

    我有以下 json var source k 01 k 02 children k 05 k 06 children k ABC k PQR k 07 k 03 我希望能够指定 k 的值并取回所有孩子 以及孙
  • 使用严格模式编译指示时如何声明全局变量

    使用自调用函数来包装严格模式兼容代码 通常称为严格模式编译指示 被认为是一种很好的做法 function use strict Strict code here 我的问题是在这种情况下如何声明全局变量 我今天知道的三种替代方案 替代方案 1
  • 拉斐尔路径交叉点不起作用

    我对拉斐尔和 pathIntersection method JSFiddle 示例 http jsfiddle net t6gWt 2 您可以看到有两条线都与曲线相交 但当我使用 pathIntersection method 有一个未解

随机推荐

  • 在用户登录期间,使用正确的用户名和密码进行身份验证不会返回 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