图片本文完整版：《React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发》 在日常开发中，特别是内部使用的后台系统时，我们常常会需要用表格来展示数据，同时提供一些操作用于操作表格内的数据...跟随本文你将学到如何使用 react-table 在 React 中搭建表格组件如何使用 react-table 表格组件进行数据的分页、排序、搜索过滤筛选react-table 实战案例：手把手教你使用...时，需要通过一个叫做 useTable 的 hooks 来构建表格。...样式效果：图片接下来我们给这个表格添加更多常见的功能：排序、搜索过滤筛选、分页等。...prepareRow,} = useTable( { columns, data,+ defaultColumn, }, useFilters,)展示效果如下： 图片这里我们发现了一个问题：当点击筛选输入框时，
在比较 object 类型时，实际上比较的是它们的引用，使用 == / === 无法判断两个对象的“值”否相等。...将来，React 可能会选择“遗忘”以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。...先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目的。 （但是，目前我还没有听说过该机制引发的问题）。...因为复杂引用的问题根本原因是对象的引用会随着重新渲染而变化，而 Ref 中保存的值不会在每次渲染时销毁和新建。...func2: ... }); // ... } 需要更新视图时，手动调用 forceUpdate()。
当执行单独的计算且数据集具有字段名称（列标签）时，这些函数非常强大。 如下图1所示，使用DMIN函数来计算指定城市的最小时间。 ?...在“输入引用列的单元格”中输入D3，单击“确定”按钮。 上述技巧还可以解决多条件问题。如下图5所示，使用DGET函数可以求出满足指定产品代码和“L/R?”的数量。 ?...的数量，则必须逐个添加字段名和判断条件，否则就要使用数组公式。然而，我们也可以使用模拟运算表来解决。 如下图6所示，在单元格E7中输入： =G4 引用单元格G4中的值。...分别在行中输入要查找的产品代码，在列中输入L和R。 ? 图6 选择单元格区域E7:H9，单击功能区“数据”选项卡“预测”组中的“模拟分析——模拟运算表”命令，打开“模拟运算表”对话框。...在该对话框中输入引用行、列的单元格，如下图7所示。 ? 图7 单击“确定”后，得到的结果如下图8所示。 ? 图8
V 显示版本控制常用操作菜单弹出层 Alt + F1 Option + F1 显示当前文件选择目标弹出层，弹出层中有很多目标可以进行选择 Alt + F7 Option + F7 查询所选对象/变量被引用...光标所在行下空出一行，光标定位到新行位置 Shift + 左键单击 Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 Ctrl + Alt Win 快捷键 Mac 快捷键 介绍...+ Shift + F12 Command + Shift + F12 编辑器最大化 Ctrl + Shift + Enter Command + Shift + Enter 自动结束代码，行末自动添加分号...Ctrl + Shift + 左键单击 Command + Shift + 左键单击 把光标放在某个类变量上，按此快捷键可以直接定位到该类中 Ctrl + Shift + 左方向键 Option +...光标放在方法名上，将方法移动到下一个方法前面，调整方法排序 Alt + Shift Win 快捷键 Mac 快捷键 介绍 Alt + Shift + N Option + Shift + B 选择 / 添加
V 显示版本控制常用操作菜单弹出层 Alt + F1 Option + F1 显示当前文件选择目标弹出层，弹出层中有很多目标可以进行选择 Alt + F7 Option + F7 查询所选对象/变量被引用...光标所在行下空出一行，光标定位到新行位置 Shift + 左键单击 Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 Alt + Shift Win 快捷键 Mac 快捷键...介绍 Alt + Shift + N Option + Shift + N 选择 / 添加 task Alt + Shift + 左键双击 Option + Shift + 左键双击 选择被双击的单词...+ Shift + F12 Command + Shift + F12 编辑器最大化 Ctrl + Shift + Enter Command + Shift + Enter 自动结束代码，行末自动添加分号...Ctrl + Shift + 左键单击 Command + Shift + 左键单击 把光标放在某个类变量上，按此快捷键可以直接定位到该类中 Ctrl + Shift + 左方向键 Option +
注释 Ctrl+/ 能为光标”所在行”或者”选中行”添加注释或者取消注释。...也可以对多行添加或取消注释 快速修复 Ctrl + 1 删除当前行 Ctrl+d 光标位于行的任何地方， 按Ctrl+D 删除当前行, 当然也可以删除空行, 不用为了删除行，而按很多删除键了 格式化整个文档...查找引用 Ctrl+Shift+G 查找类、方法和属性的引用。这是一个非常实用的快捷键，例如要修改引用某个方法的代码，可以通过【Ctrl+Shift+G】快捷键迅速定位所有引用此方法的位置。...后退历史记录 Alt+ ←、Alt+ → 后退历史记录和前进历史记录，在跟踪代码时非常有用，用户可能查找了几个有关联的地方，但可能记不清楚了，可以通过这两个快捷键定位查找的顺序。...快速查找选定的内容 Ctrl+K Ctrl + K 快速向下查找选定的内容，从此不再需要用鼠标单击查找对话框了。
加号+、减号或负号-、乘号*、除号/、乘方^） 关系运算符（等于=、不等于、大于>、大于等于>=、小于<、小于等于<=） 二、公式的输入与编辑 2.1 输入公式 1）在要显示公式计算结果的单元格中单击鼠标...，使其成为当前活动单元格 2）输入等号“=”，表示是正在输入的公式，否则系统会将其判断为文本数据，不会产生计算结果 3）直接输入常量或单元格地址，或者用鼠标单击需要引用的单元格和区域 4）按Enter键完成输入...如果要删除公式，只需在公式单元格中单击，然后按Delete键即可 三、公式的复制与填充 输入到单元格中的公式，可以像普通数据一样，通过拖动单元格右下角的填充柄，或者从“开始”选项卡上的“编辑...”组选择“填充”进行公式的复制填充，此时自动填充的实际上不是数据本身，而是复制的公式，填充时公式中对单元格的引用采用的是相对引用。...在复制公式时，如果不希望所引用的位置发生变化，那么就要用到绝对引用，绝对引用是在引用的地址前插入符号“”，表示为列标 4.3 混合引用 如:当需要固定引用行而允许列变化，在行号前加符号“$”。
（必备） Ctrl + X 剪切光标所在行 或 剪切选择内容 Ctrl + C 复制光标所在行 或 复制选择内容 Ctrl + D 复制光标所在行 或 复制选择内容，并把复制内容插入光标位置下面 （必备...也可以在提示补充的时候按），显示文档内容 Ctrl + U 前往当前光标所在的方法的父类的方法 / 接口定义 （必备） Ctrl + B 进入光标所在的方法/变量的接口或是定义处，等效于 Ctrl + 左键单击...移动光标到当前所在代码的花括号开始位置 Ctrl + ] 移动光标到当前所在代码的花括号结束位置 Ctrl + F1 在光标所在的错误代码处显示错误信息 （必备） Ctrl + F3 调转到所选中的词的下一个引用位置...光标所在行下空出一行，光标定位到新行位置 （必备） Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 （必备） Shift + 滚轮前后滚动 当前文件的横向滚动轴滚动 （必备）...task （必备） Alt + Shift + F 显示添加到收藏夹弹出层 / 添加到收藏夹 Alt + Shift + C 查看最近操作项目的变化情况列表 Alt + Shift + I 查看项目当前文件
或 删除选中的行 （必备） Ctrl + X 剪切光标所在行 或 剪切选择内容 Ctrl + C 复制光标所在行 或 复制选择内容 Ctrl + D 复制光标所在行 或 复制选择内容，并把复制内容插入光标位置下面...） Ctrl + Delete 删除光标后面的单词或是中文句 Ctrl + BackSpace 删除光标前面的单词或是中文句 Ctrl + 1,2,3…9 定位到对应数值的书签位置 Ctrl + 左键单击...光标所在行下空出一行，光标定位到新行位置 Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 Shift + 滚轮前后滚动 当前文件的横向滚动轴滚动 Ctrl + Alt 快捷键...task Alt + Shift + F 显示添加到收藏夹弹出层 Alt + Shift + C 查看最近操作项目的变化情况列表 Alt + Shift + F 添加到收藏夹 Alt + Shift...自动导入变量定义 ⌘ + ⌥ + T 可以把代码包在一个块内，例如：try/catch ⌘ + ⌥ + L 格式化代码 ⌘ + ⌥ + I 将选中的代码进行自动缩进编排，这个功能在编辑 JSP 文件时也可以工作
显示当前文件选择目标弹出层，弹出层中有很多目标可以进行选择 Alt + F7 Option + F7 查询所选对象/变量被引用...光标所在行下空出一行，光标定位到新行位置 Shift + 左键单击 Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件...Alt + Shift + N Option + Shift + N 选择 / 添加...>Shift + Enter Command + Shift + Enter 自动结束代码，行末自动添加分号...Ctrl + Shift + 左键单击 Command + Shift + 左键单击
2.在 Basic 上点击右键,去除原来的 Ctrl+空格 绑定,然后添加 Alt+/ 快捷键。 然后点击Apply, OK. ?...P 方法参数提示显示 （必备） Ctrl + U 前往当前光标所在的方法的父类的方法 / 接口定义 （必备） Ctrl + B 进入光标所在的方法/变量的接口或是定义处，等效于 Ctrl + 左键单击...（必备） Ctrl + / 注释光标所在行代码，会根据当前不同文件类型使用不同的注释符号 （必备） Ctrl + F1 在光标所在的错误代码处显示错误信息 （必备） Ctrl + F3 调转到所选中的词的下一个引用位置...光标所在行下空出一行，光标定位到新行位置 （必备） Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 （必备） Shift + 滚轮前后滚动 当前文件的横向滚动轴滚动 （必备...task （必备） Alt + Shift + F 显示添加到收藏夹弹出层 / 添加到收藏夹 Alt + Shift + C 查看最近操作项目的变化情况列表 Alt + Shift + I 查看项目当前文件
（必备） Ctrl + X 剪切光标所在行 或 剪切选择内容 Ctrl + C 复制光标所在行 或 复制选择内容 Ctrl + D 复制光标所在行 或 复制选择内容，并把复制内容插入光标位置下面 （必备...移动光标到当前所在代码的花括号开始位置 Ctrl + ] 移动光标到当前所在代码的花括号结束位置 Ctrl + F1 在光标所在的错误代码处显示错误信息 （必备） Ctrl + F3 调转到所选中的词的下一个引用位置...光标所在行下空出一行，光标定位到新行位置 （必备） Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 （必备） Shift + 滚轮前后滚动 当前文件的横向滚动轴滚动 （必备）...（必备） Ctrl + Shift +Backspace 退回到上次修改的地方 （必备） Ctrl + Shift +1,2,3…9 快速添加指定数值的书签 （必备） Ctrl + Shift + 左键单击...task （必备） Alt + Shift + F 显示添加到收藏夹弹出层 / 添加到收藏夹 Alt + Shift + C 查看最近操作项目的变化情况列表 Alt + Shift + I 查看项目当前文件
或 删除选中的行 （必备） Ctrl + X 剪切光标所在行 或 剪切选择内容 Ctrl + C 复制光标所在行 或 复制选择内容 Ctrl + D 复制光标所在行 或 复制选择内容，并把复制内容插入光标位置下面...也可以在提示补充的时候按），显示文档内容 Ctrl + U 前往当前光标所在的方法的父类的方法 / 接口定义 （必备） Ctrl + B 进入光标所在的方法/变量的接口或是定义处，等效于 Ctrl + 左键单击...移动光标到当前所在代码的花括号开始位置 Ctrl + ] 移动光标到当前所在代码的花括号结束位置 Ctrl + F1 在光标所在的错误代码处显示错误信息 （必备） Ctrl + F3 调转到所选中的词的下一个引用位置...光标所在行下空出一行，光标定位到新行位置 （必备） Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 （必备） Shift + 滚轮前后滚动 当前文件的横向滚动轴滚动 （必备...task （必备） Alt + Shift + F 显示添加到收藏夹弹出层 / 添加到收藏夹 Alt + Shift + C 查看最近操作项目的变化情况列表 Alt + Shift + I 查看项目当前文件
我们每天有可能都在与数据列表打交道，比如列表的分页、查找列表（搜索查询）、按照指定的列升序降序排列这些需求，你可能再尝试使用 react-table or Ant Design table 这样的组件完成这些需求...') }, { accessor: 'start_date', label: 'Start Date' }, ] 你可能注意到了，我们的表头属性和列表数据的属性有相关性，我们可以用表头的属性方便在行里进行遍历循环显示数据...二、添加分页功能 我们可以有很多方式在前端设置分页。 例如下图谷歌界面的分页方式，显示上一页和下一页的按钮，以及当前的页面和前后相关的页面，我们可以进行相关的操作。...就我个人而言，我更喜欢 “第一页 ️️️⏮️”，“上一页⬅️”，“下一页 ➡️” 以及“最后一页⏭️”的分页操作，如果当前页没有上一页或下一页的操作时，我们应该隐藏或者禁止相关按钮的点击。...升序排列（⬆️） 降序排列（⬇️） 重置排序或不排序（↕️） 以下表格，是针对不同类型的数据的升序和降序排列的总结，方便大家理解： Untitled 本示例只展示了按照单列的逻辑进行升序或降序，只要单击任意一列的排序
在JavaScript代码中设置断点 刚工作时被leader安利了Chrome浏览器，那时一说到调试，就知道这一个操作 以为在行号上单击一下就是打断点，就是会调试了:) 当然这也是最最基本的打断点的方式了...在打开的页面上单击对应的行号即可设置断点。 同时也可以通过在行号上右键点击Add breakpoint来设置断点。...当一个表达式跨行时，添加的断点会默认下移到该表达式结束后的一行 ? 在JavaScript代码中设置条件断点 当知道了如何在行号上单击来添加断点，已经能满足最最最基本的调试了。...（不禁回想起刚工作时，有类似的问题，我当时的处理方式就是一手托腮，另一只手放在F8键上，狂按数十下后正襟危坐，开始调试） 显然，Chrome已经帮我们想到了这种场景，我们可以通过添加一些条件断点来避免一些无意义的断点...禁用断点的方式，选择菜单栏中的Disable breakpoint 或者直接在设置了断点的行号上单击即可。 或者我们也可以通过debugger模块来统一管理所有的断点。
移动光标到当前所在代码的花括号开始位置 Ctrl + ] 移动光标到当前所在代码的花括号结束位置 Ctrl + F1 在光标所在的错误代码处显示错误信息 （必备） Ctrl + F3 调转到所选中的词的下一个引用位置...光标所在行下空出一行，光标定位到新行位置 （必备） Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 （必备） Shift + 滚轮前后滚动 当前文件的横向滚动轴滚动 （必备）...V 显示版本控制常用操作菜单弹出层 Alt + F1 Option + F1 显示当前文件选择目标弹出层，弹出层中有很多目标可以进行选择 Alt + F7 Option + F7 查询所选对象/变量被引用...光标所在行下空出一行，光标定位到新行位置 Shift + 左键单击 Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 Alt + Shift Win 快捷键 Mac 快捷键...Ctrl + Shift + 左键单击 Command + Shift + 左键单击 把光标放在某个类变量上，按此快捷键可以直接定位到该类中 Ctrl + Shift + 左方向键 Option +
或 删除选中的行 （必备） Ctrl + X 剪切光标所在行 或 剪切选择内容 Ctrl + C 复制光标所在行 或 复制选择内容 Ctrl + D 复制光标所在行...Ctrl + ] 移动光标到当前所在代码的花括号结束位置 Ctrl + F1 在光标所在的错误代码处显示错误信息 （必备） Ctrl + F3 调转到所选中的词的下一个引用位置...光标所在行下空出一行，光标定位到新行位置 （必备） Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 （必备） Shift + 滚轮前后滚动 当前文件的横向滚动轴滚动 （必备）...task （必备） Alt + Shift + F 显示添加到收藏夹弹出层 / 添加到收藏夹 Alt + Shift + C 查看最近操作项目的变化情况列表 Alt + Shift + I 查看项目当前文件... Force Step Into 这个是强制进入代码 Atl+F9 Run To Cursor 运行到光标处 ctrl+shift+F10 正常运行java类 alt+F8 debug时选中查看值
，分为必备、常用、一般 必备 快捷键 功能介绍 Alt + Enter IntelliJ IDEA 根据光标所在问题，提供快速修复选择，光标放在的位置不同提示的结果也不同 Ctrl + D 复制光标所在行...或 复制选择内容，并把复制内容插入光标位置下面 Ctrl + Y 删除光标所在行 或 删除选中的行 Ctrl + N 根据输入的 类名 查找类文件 Ctrl + B 进入光标所在的方法/变量的接口或是定义处...，等效于 Ctrl + 左键单击 Ctrl + Space 基础代码补全，默认在 Windows 系统上被输入法占用，需要进行修改，建议修改为 Ctrl + \ Ctrl + Alt + O 整理import...Ctrl + Alt + L 格式化代码 Ctrl + G 跳转到指定行 Shift + F6 改名 Alt + F7 搜索引用出，相当于eclipse的Ctrl + Alt + H Ctrl + W...显示最近修改的文件列表的弹出层 Ctrl + Shift + F7 高亮显示所有该选中文本，按Esc高亮消失 Ctrl + Shift + F12 编辑器最大化 Ctrl + Shift + Enter 自动结束代码，行末自动添加分号
或 删除选中的行 （必备） Ctrl + X 剪切光标所在行 或 剪切选择内容 Ctrl + C 复制光标所在行 或 复制选择内容 Ctrl + D 复制光标所在行 或 复制选择内容，并把复制内容插入光标位置下面...也可以在提示补充的时候按），显示文档内容 Ctrl + U 前往当前光标所在的方法的父类的方法 / 接口定义 Ctrl + B 进入光标所在的方法/变量的接口或是定义出，等效于 Ctrl + 左键单击...移动光标到当前所在代码的花括号开始位置 Ctrl + ] 移动光标到当前所在代码的花括号结束位置 Ctrl + F1 在光标所在的错误代码出显示错误信息 Ctrl + F3 调转到所选中的词的下一个引用位置...光标所在行下空出一行，光标定位到新行位置 Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 Shift + 滚轮前后滚动 当前文件的横向滚动轴滚动 Ctrl +...task Alt + Shift + F 显示添加到收藏夹弹出层 Alt + Shift + C 查看最近操作项目的变化情况列表 Alt + Shift + F 添加到收藏夹 Alt
或 删除选中的行 （必备） Ctrl + X 剪切光标所在行 或 剪切选择内容 Ctrl + C 复制光标所在行 或 复制选择内容 Ctrl + D 复制光标所在行 或 复制选择内容，并把复制内容插入光标位置下面...移动光标到当前所在代码的花括号开始位置 Ctrl + ] 移动光标到当前所在代码的花括号结束位置 Ctrl + F1 在光标所在的错误代码出显示错误信息 Ctrl + F3 调转到所选中的词的下一个引用位置...） Ctrl + Delete 删除光标后面的单词或是中文句 Ctrl + BackSpace 删除光标前面的单词或是中文句 Ctrl + 1,2,3…9 定位到对应数值的书签位置 Ctrl + 左键单击...光标所在行下空出一行，光标定位到新行位置 Shift + 左键单击 在打开的文件名上按此快捷键，可以关闭当前打开文件 Shift + 滚轮前后滚动 当前文件的横向滚动轴滚动 Ctrl + Alt 快捷键...task Alt + Shift + F 显示添加到收藏夹弹出层 Alt + Shift + C 查看最近操作项目的变化情况列表 Alt + Shift + F 添加到收藏夹 Alt + Shift
领取专属 10元无门槛券
手把手带您无忧上云
