标签: react-table

React 表排序有 3 个条件，default view如其ascending官方descending示例https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting所示

现在，我只想将其设置在ascending和之间descending并删除默认视图。我尝试默认对第一列进行排序

 useTable(
    {
      columns,
      data,
      initialState: {
        pageIndex: 0,
        pageSize: 10,
        sortBy: [
          {
            id: "asset",
            desc: false,
          },
        ],
      },
    },
  )

但当我单击该列时，默认视图仍然存在，但我不知道如何删除它。我在他们的文档中也找不到它。

我试图向我的每一行添加一个“编辑”按钮，react-table该按钮打开一个模态表单，允许用户将编辑保存到该行的不同属性（其中一些属性可能会或可能不会显示在表中）。在模态中单击“保存”后，将向 API 发出发布请求，并react-table使用响应更新其中的行。

我试图添加一个onClick调用函数的handleEdit函数，但是传递给的所有内容handleEdit都是未定义的？如何访问行属性（甚至是未在表中显示的属性）并用新值覆盖它们？

Header: 'Action',
            accessor: 'action',
            Cell: row => (
            <div>
               <button onClick={row => handleEdit(row.original)}>Edit</button>
            </div>
            ),

function handleEdit(row) {
    console.log(row);
    // display modal
    // say user types in modal new firstName
    // post request

    // set row.firstName = newFirstName
 
  }

这是沙箱：https://codesandbox.io/s/elated-currying-scvxk? fontsize=14&hidenavigation=1&theme=dark

我正在使用反应表的材料ui厨房水槽示例（https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-kitchen-sink）

我的数据更新频繁，问题是每次更新数据时过滤器都会被清除。您可以通过在codesandbox示例中设置过滤器并更改单元格中的值来尝试此操作。onBlur 它设置状态，并清除过滤器并取消选中复选框。

有没有办法防止这种情况或解决方案/解决方法？

非常感谢！

我有一个react-table在打字稿中运行良好的。

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    { columns, data }
  );

我想添加全局过滤。如果我简单地添加插件挂钩，它就会编译：

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    { columns, data },
    useGlobalFilter
  );

但如果我尝试添加该setGlobalFilter选项，则会收到编译器错误：

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, setGlobalFilter } = useTable(
    { columns, data },
    useGlobalFilter
  );

ERROR in src/components/SubmissionTable.tsx:144:77
TS2339: Property 'setGlobalFilter' does not exist on type 'TableInstance<TableModel>'.

我有"@types/react-table": "^7.7.9"我的开发依赖项，并且可以确认它可以找到这些类型。我不清楚为什么在我传入 useGlobalFilter 插件/钩子后它不允许我使用 setGlobalFilter 。

我已经使用 setGlobalFilter 实现了全局文件管理器

但我想明智地设置过滤器列，例如：

在表之外，我需要一个包含一些值的下拉列表，这些值应该根据下拉列表中选择的值来过滤反应表。此下拉过滤器应根据下拉列表中选择的值过滤掉整个表。

任何人都可以给我演示链接或任何有关此的帮助将不胜感激。

我想从 this.props.data 创建一个对象数组，试图做到这一点，但我无法使地图放置通常由 object.entries 生成的键值。

我有一个带有代码的屏幕截图，以及一些控制台日志和它们显示的结果，而不是 {_key:"0"}，我希望它是 {numberOfElements:"12"}。谢谢。

这是代码中有问题的部分

import React, { Component } from 'react';
export default class DataTable extends Component{
  render(){
    const data= Object.entries(this.props.data).map((_key,_value)=>({
      _key:String(_value)
    }));
    console.log(data)
    console.log(Object.entried(this.props.data))
    return <div></div>
  }

}

控制台输出：

我正在尝试实现一个全局搜索过滤器，用于在整个表中搜索键。我正在附加一个更改处理程序，并在每个输入上触发一个回调，该回调在该数据中搜索该键并正在设置该值。它在我输入字符时被过滤，但我希望当我输入多个时搜索工作在搜索输入中搜索像 string1,string2 这样的值

代码沙盒：https : //codesandbox.io/s/jolly-bhabha-iqcx1

代码

import React from "react";
import ReactDOM from "react-dom";
import { Input } from "semantic-ui-react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { firstName: "aaaaa", status: "Pending", visits: 155 },
        { firstName: "aabFaa", status: "Pending", visits: 155 },
        { firstName: "adaAAaaa", status: "Approved", visits: 1785 },
        { firstName: "aAaaaa", status: "Approved", visits: 175 },
        { firstName: "adaSaaa", …

我有一个数据数组：

data = [ {date: "16/05/2020", value: [ {column: "student", count: 10, value: "abcd" }, 
         {column: "teacher", count: 25, value: "pqrs" }] },
         {date: "17/05/2020", value: [ {column: "student", count: 19, value: "mno" }, 
         {column: "teacher", count: 7, value: "xyz" }] }
        ];

这是列数组：

columns = [{ Header: "Date", accessor: "date"}, 
           { Header: "Column", accessor: "column"},
           { Header: "Count", accessor: "count"},
           { Header: "Value", accessor: "value"}
           ]

我想在React Table中显示图片（表格）中提到的数据。

在 render() 内部，我正在这样做：

              <ReactTable
                data={data}
                columns={columns}
                minRows={0}
                defaultPageSize={25}
              /> …

Codesandbox 示例：https ://codesandbox.io/s/react-table-pagination-not-working-xt4yw

我正在使用 react-table 包（版本 7.1.0）。

我有一张显示一些发票的表格。

我在初始加载时检索所有数据。然后我想对这些数据应用客户端分页，以便在任何时候只显示部分结果。

我的数据中有 139 个项目。

用户最初将看到 10 个结果并能够“显示更多”。目前这是在选择字段中实现的，它更新了pageSize

（在我的示例中，我使用的假数据不是来自任何端点。）

我usePagination以与此官方示例相同的方式使用钩子：https : //codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination?file=/src/App.js

useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0, pageSize: 10 }
    },
    useSortBy,
    usePagination
  );

但是，必须有一些我遗漏的东西，因为尽管pageIndex并pageSize清楚地设置了分页，但并未应用分页。

  "pageIndex": 0,
  "pageSize": 10,

一次显示所有结果，而不是仅显示 10 个。

此处未应用分页的原因是什么？

Codesandbox 示例：https ://codesandbox.io/s/react-table-pagination-not-working-xt4yw

我对打字稿相当陌生，我正在使用并围绕钩子@tanstack/react-table构建一个，它需要 2 个道具并将它们传递给钩子。TableComponentuseReactTabledatacolumnsuseReactTable

问题是 data 和 columns 属性是可以包含不同类型对象的数组，并且它们是连接的，我如何正确输入它们？现在我在里面遇到错误TableComponent

type OrderTableProps = {
  data: OrdersRow[];
  columns: typeof ordersTableColumns;
  onRowClick?: (row: Row<OrdersRow>) => void;
}

type ContainerTableProps = {
  data: ContainersRow[];
  columns: typeof containersTableColumns;
  onRowClick?: (row: Row<ContainersRow>) => void;
}

export type TableComponentProps = PropsWithChildren
  & TableComponentBaseProps
  & (OrderTableProps | ContainerTableProps);
    

// TableComponent
    const ReactTableComponent = ({data, columns}: TableComponentProps) => {
     const table = useReactTable({
        data, -> Type 'OrdersRow[] | ContainersRow[]' is not assignable …