标签: react-table

https://codesandbox.io/s/8x331yomp0

我正在尝试在我的表格中创建一个全选复选框。当我单击标题复选框时，我也希望填充其他复选框。

我正在尝试使用 selectAll 状态值来执行此操作，但是无论出于何种原因，这第一次都会返回 false，因此它始终与应为的值相反。有机会有人知道出了什么问题吗？我将代码沙箱放在顶部，但这是我的表代码：

import React, { Component } from "react";
import $ from "jquery";
import ReactTable from "react-table";
import "react-table/react-table.css";

const style = {
  container: {
    position: "relative"
  },

  refresh: {
    cursor: "pointer",
    width: "75px"
  }
};

class KKTable extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      timestamp: "",
      selectAll: false,
      data: [],
      checked: []
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = () => {
    var selectAll = !this.state.selectAll;
    this.setState({ selectAll: selectAll });
    var …

我正在尝试向我创建的一堆反应表添加一个唯一的 id。我创建了一个使用 react-table 的自定义组件。

我已经尝试将 id 道具添加到标签中，但这不起作用，我猜这是因为库中没有定义 id 道具？

return <ReactTable data={props.data} columns={columns} showPagination={false} minRows={5} style={{height :"400px"}} id='someId'/>;

我期待这将 id 属性添加到 react-table 库创建的 div 中，但这并没有发生

使用react-table 时得到一些意想不到的结果。我结合了反应表示例中的分页控制和排序示例。我遇到的问题是表挂钩似乎在第二次重新渲染时将页面索引重置回默认值。这导致来回分页时 fetchData 被调用两次。以下是我面临的问题的重现：

import React from "react";
import styled from "styled-components";
import { useTable, usePagination, useSortBy } from "react-table";

import makeData from "./makeData";

const Styles = styled.div`
  `

// Let's add a fetchData method to our Table component that will be used to fetch
// new data when pagination state changes
// We can also add a loading state to let our table know it's loading new data
function Table({
  columns,
  data,
  fetchData,
  loading,
  pageCount: controlledPageCount
}) …

您好，我可以在不使用复选框的情况下在 React-table 中选择一行吗，我只想单击我们要选择的行，然后从所选行中获取数据，如果可行，您能否提供一个示例

我有一个在“react-table”上设计的桌子。我想根据我在表格上标记的复选框进行排序。例如，当我按列名称时，应该首先列出真实的列。如果你能帮助我，我会很高兴。

错误图片（真实值 \xe2\x80\x8b\xe2\x80\x8b 应该是第一个或选择错误值）

我正在使用react-table，并且有一个自定义单元格，该单元格循环遍历名为“skus”的关联记录数组

我想隐藏此列，但将其包含在内，以便可以在搜索栏中使用它进行全局过滤。我已经能够获取列中呈现的数据，并将其包含在全局搜索过滤器中。现在，我无法隐藏该列。

这里有 1 列确实可以隐藏，而我循环遍历的列没有隐藏：

   {
     Header: 'Category',
     accessor: 'brand.category.name',
     isVisible: false,
   },
   {
     Header: 'SKU',
     accessor: row => row.skus.map((sku) => `sku${sku.sku}`),
     isVisible: false,
   },

我使用此效果来删除带有 isVisible: false 的列，适用于

React.useEffect(() => {
  setHiddenColumns(
    columns.filter(column => (column.isVisible === false)).map(column => column.accessor)
  );
}, [setHiddenColumns, columns]);

问题显然是我正在通过访问器的数组进行映射，但我无法弄清楚如何将其包含在全局过滤器中并隐藏该列。

我正在使用react-table包。cell.render("Cell")我很困惑，我能写下去还有什么意义cell.value？我在浏览器中看到它以相同的方式呈现。那么，为什么我应该使用第一个呢？

因此，我想使用react-table创建一个可排序的列，该列为每行编号（根据其在数据集中的位置）。

根据文档，排序是通过对accessor值进行比较的排序功能完成的。但是，与accessor选项不同，该选项不会公开索引Cell。

因此，这将不起作用：

const columns = [
  {
    Header: '#',
    id: 'index',
    accessor: (row) => row.index // 'index' is undefined
  },
  /* ... */
]

我当前的解决方法是将索引直接注入数据集中，如下所示：

myIndexedData = myData.map((el,index) => ({index, ...el})) //immutable

return (
  <ReactTable
    data={myIndexedData}
    columns={columns}
  />
);

这并不是真正的最佳解决方案，尤其是对于大型数据集。有没有我看不到的更好的方法？

我正在使用React-Table 6.7.6,并希望以编程方式重置所有过滤器.

现在,我有这个代码:

return (
    <div>
        <ReactTable
            className="-striped -highlight"
            data={data}
            columns={columns}
            filterable={true}
            defaultFilterMethod={(filter, row, column) => {
                const id = filter.pivotId || filter.id;
                return row[id] !== undefined
                    ? String(row[id]).includes(filter.value)
                    : true;
            }}
        />
    </div>
);

有没有办法重置过滤器值而不会过多地挖掘这个东西的内脏？

我正在使用react-table，并希望根据特定单元格的内部编号更改背景色。例如 单元格> 1 =绿色，单元格<1 =红色，中间有不同的阴影。我已经看到了很多关于对行和列进行着色的内容，但是却在如何根据加载的数据对特定单元格进行着色方面苦苦挣扎。

我知道这段代码行不通，但希望它能显示出我正在寻找的内容：

<ReactTable
  data={data}
  columns={columns}
  getTdProps={(cellInfo) => {
      return {
        if (cellInfo.value > 1) {
            cellInfo.className = "green-cell";
        }
        if (cellInfo.value < 1) {
            cellInfo.className = "red-cell";
        }
      };
    }}
/>

希望这是有道理的。谢谢您的帮助。