如何在 react-table中进行默认排序

我使用反应表 v7https://www.npmjs.com/package/react-table创建表。

我使用反应表 v7https://www.npmjs.com/package/react-table创建表。

我可以通过引用排序https://codesandbox.io/s/github/tannerlinsley/react-table/tree//examples/sorting的这个例子对所有列进行排序。现在我不希望所有列进行排序,但一些特定的列,我想默认降序排列 2 列。有人可以帮我吗?

将过滤器应用到表后,我想清除所有应用的过滤器。有人可以帮助解决这个问题吗?

非常感谢。

57

给出的另一个答案是对于没有使用 react hook(& lt;v7)的 react-table。为了在构建表时对列(或列)进行排序,您只需要在 useTable 钩子中的 initialState 上设置 sortBy 数组。

const {
    getTableProps,
    getTableBodyProps,
    ...
} = useTable(
    {
        columns,
        ....,
        initialState: {
            sortBy: [
                {
                    id: 'columnId',
                    desc: false
                }
            ]
        }
    }
7

您可以将排序的选项传递给 ReactTable,请尝试使用下面的代码。为了清除尝试按钮点击调用清除函数。

  constructor(props) {
    super(props);
    this.state = {
      sortOptions: [{ id: 'age', desc: true },{ id: 'visits', desc: true }],
     }
  }
 <Table 
    sorted={this.state.sortOptions}
    onSortedChange={val => {
    this.setState({ sortOptions: val }) }}
    columns={columns} 
    data={data} />

它为我工作https://codesandbox.io/s/stupefied-hoover-ibz6f

4

我有一个稍微不同的用例,并希望在初始加载时默认获得多排序,但也将排序顺序保持在任何未来的排序之后

沙箱示例:https://codesandbox.io/s/goofy-shadow-9tskr?file=/src/App.js

诀窍是不使用内置的 getSortByToggleProps(),而是添加自己的 onClick 使用 setSortBy func。

下面的代码灵感来自 @ khai nguyen 的答案

import React from 'react'
import { useTable, useSortBy } from 'react-table';
function Table({ columns, data, sortBy ...rest }) {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        setSortBy,
    } = useTable({
        columns,
        data,
        initialState: {sortBy}
        })
    }, useSortBy); 

然后在列标题元素中:

     ...PREV_TABLE_CODE
{headerGroup.headers.map(column => (
         <th
         {...column.getHeaderProps()}
         onClick={() => handleMultiSortBy(column, setSortBy, sortBy)}
          >
         {column.render( 
REST_TABLE_CODE....

和 handleMultiSortByCode(我的自定义函数,而不是从反应表):

isSortedDesc 可以是 true / false / undefined

export const handleMultiSortBy = (column, setSortBy, meinSortBy) => {
  //set sort desc, aesc or none?
  const desc =
    column.isSortedDesc === true
      ? undefined
      : column.isSortedDesc === false
      ? true
      : false;
  setSortBy([{ id: column.id, desc }, ...meinSortBy]);
};
 

注意:默认的 toggleSortBy () func 中有一个 e.persist ()。我不确定它提供了什么功能,但不使用它没有任何我注意到的不良影响-股票多重排序不起作用 (保持移位),但添加回来并没有解决这个问题。怀疑你可能需要股票 toggleSort。

3

您需要导入 react-table 提供的 'useSortBy' 钩子,以使其按预期工作。

import React from 'react'
import { useTable, useSortBy } from 'react-table';
function Table({ columns, data, ...rest }) {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data,
        ...(rest.initialState && {
            initialState: rest.initialState
        })
    }, useSortBy);

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(71)
Extrairnomesformatados com核心
上一篇
在列表中从三位小数转换为两位小数(name of decimal places)
下一篇

相关推荐

  • type c接口是啥改变你的充电体验

    示例示例Type C接口是一种新型的USB连接器,它可以支持更高的数据传输速度,比传统的USB 0接口更快。与传统的USB接口不同,Type C接口可以在两端都使用,无需额外的翻转,使连接更加方便快捷。下面是一个使用Type C接口的代码示例:…

    2023-01-12 02:06:09
    0 61 73
  • carwings是什么意思智能汽车连接系统的未来

    Carwings是日产汽车公司推出的一款远程智能汽车服务,它可以帮助用户远程监控汽车的状态和行驶信息,并且可以远程控制汽车的功能。…

    2023-01-19 13:55:38
    0 81 52
  • cvt变速箱油分几种:CVT变速箱油的种类及用法

    cvt变速箱油一般分为三种,分别是:传统cvt变速箱油:代码:CVT-1…

    2023-01-27 12:23:25
    0 76 97
  • contextcapture集群:如何使用ContextCapture技术构建高效的3D集群

    ContextCapture集群是一种分布式的技术,它可以让多台服务器共享数据,从而提高应用程序的性能和可靠性。它可以使用多台服务器来收集、存储和处理数据,而不需要单独的服务器来执行这些任务。…

    2023-01-05 08:03:52
    0 33 29
  • code128条码字体下载:使用 Code128 条码字体创建条码标识

    code128条码字体下载是指下载code128条码字体的过程。Code128条码字体是一种用于生成Code128条形码的字体。它可以将文本转换为条形码,并将条形码打印在各种类型的媒体上。要下载code128条码字体,可以从网上搜索“code128条码字体下载”,然后选择一个可靠的网站下载。一旦下载完成,就可以使用该字体创建code128条形码。…

    2023-01-19 14:44:33
    0 69 61
  • txvlog com糖心改变你的生活,让你的心情更加甜蜜!

    txvlog com糖心是一款以视频分享为主的社交APP,可以让用户上传自己的视频,并与其他用户进行互动。它的主要功能有:用户注册:用户可以通过手机号码、邮箱地址或者社交媒体账号注册,并设置自己的个人信息;…

    2023-01-10 05:08:15
    0 50 13
  • chigo空调遥控器操作老式:如何使用Chigo空调遥控器操作老式空调

    Chigo空调遥控器操作老式,主要有以下几步:首先准备好Chigo空调遥控器,打开电源,将遥控器与空调连接;…

    2023-01-23 01:53:07
    0 75 87
  • cvte在线测评:如何利用CVTE在线测评提升职业能力?

    cvte在线测评是一款在线编程测评系统,它可以帮助用户快速、准确地评估学生的编程能力。它支持多种编程语言,并且提供了完善的测试环境,可以有效地检测出学生编程中的错误,同时还可以提供可视化的报告,帮助用户更好地理解学生的编程能力。…

    2023-01-27 15:11:58
    0 87 21

发表评论

登录 后才能评论

评论列表(78条)