标签: react-table-v7

我正在尝试在我的 React 表中实现日期范围过滤器。当我更改开始或结束日期时，它会触发过滤功能，创建最小和最大日期，但当它完成时，不会过滤任何日期，并且输入从所选日期开始为空。这是我的代码：

const ChartData = () => {
const columns = React.useMemo(
() => [
  {
    Header: "Date",
    columns: [
      {
        Header: "Date",
        accessor: "date",
        id: "date",
        Filter: chartFilter.DateRangeColumnFilter,
        filter: "between"
      }
    ]
  }
],
[]
);

const data = React.useMemo(() => dummyData(100000), []);

return (
   <div className={classes.tableWrapper}>
      <Table columns={columns} data={data} />
   </div>
 );
};
export default ChartData;

过滤页面：

  export function DateRangeColumnFilter({
     column: { filterValue = [], preFilteredRows, setFilter, id }
     }) {
     const [min, max] = React.useMemo(() => …

我正在 create-react-app 项目（版本）中尝试react-table ^7.0.25。我正在使用他们的快速入门文档中的确切示例。但是，我在访问器和数据列之间遇到类型错误。下面是我的代码，

import * as React from 'react';
import { Solution } from '../../../Models/SolutionModel';
import {useTable} from 'react-table'

interface ICompareTableComponentProps {
  Solutions : Solution[]
}

const CompareTableComponent: React.FunctionComponent<ICompareTableComponentProps> = (props) => {
    
    const data = React.useMemo(
      () => [
        {
          col1: 'Hello',
          col2: 'World',
        },
        {
          col1: 'react-table',
          col2: 'rocks',
        },
        {
          col1: 'whatever',
          col2: 'you want',
        },
      ],
      []
    )
  
    const columns = React.useMemo(
      () => [
        {
          Header: 'Column 1',
          accessor: 'col1', // …

如何根据日期范围过滤表格数据？

在此处将过滤器设置为日期列：

const tableInstance = useRef(null);
  const filterTable = (dates) => {
    if (tableInstance.current) {
      tableInstance.current.setFilter('session_date', dates);
    }
  };

onClick 功能在这里：

const handleFilter = () => {
    setSessionsData(data);
    if (sessionsData) {
      const dateArray = getDates(
        moment(fromDate).format('L'),
        moment(toDate).format('L')
      );
      filterTable(dateArray);
    }
  };

我在以前的版本中看到您可以使用以下方式访问它：

const columns = [
  {
    Header: "Name",
    accessor: "name",
    Cell: (e) => {
      return e.original.name;
    }
  }
];

但在 v7 中它不起作用。

我有一个react-table v7（带有粘性页眉和页脚），它使用react-window呈现数千个虚拟化行。

一个新的要求需要表也有粘性列，但我不能让它工作，因为反应窗口添加了几个嵌套的 div 来进行虚拟化，破坏了列的粘性。

已经有一个钩子（https://github.com/GuillaumeJasmin/react-table-sticky）允许创建粘性列，但一旦使用了react-window，它也会中断；一些开发人员指出了一些很好的解决方法，但页脚将不再粘住（https://github.com/GuillaumeJasmin/react-table-sticky/issues/5）。

在此阶段，我还尝试并排使用两个表（一个用于粘性列，一个用于其余列），但考虑到应用的虚拟化，向上/向下滚动时行会不同步。我还尝试使用另一个虚拟化组件（https://github.com/bvaughn/react-virtualized），但遇到了同样的问题。

有没有人遇到过相同或类似的问题并找到了让它发挥作用的方法？

提前致谢。

我正在寻找一种简单而干净的方法来使所有行在使用react-table v7时自动扩展。

当我将所有数据映射到true并将其设置为初始状态时，它不会扩展我的行。

const expanded = {
  1: true,
  2: true,
  ...
};

...

useTable(
  {
    ...
    initialState: {
      expanded
    }
  }
);

通过转储表状态expanded道具，我发现生成了非数字键，例如{Col1:somevalue2: true}（分组列）。在创建表实例之前，我无权访问这些键，因此我也无权访问行 id 来生成初始状态。

我发现的唯一方法如下，但我更喜欢最初扩展 tableInstance （作为useTable()钩子的结果）。

React.useEffect(() => tableInstance.toggleAllRowsExpanded(true), []);

相关Github FR讨论：https://github.com/tannerlinsley/react-table/discussions/3317

我正在使用反应表。我想知道useBlockLayout、useAbsoluteLayout和useFlexLayout之间的区别。什么情况下可以使用这些钩子？

我在我的项目中使用react-table组件。行扩展属性是我的功能所利用的，现在工作正常。

我需要能够在展开一行时折叠所有行。即一次只能打开一行。我确实浏览了许多文档和 stackoverflow 链接，但没有一个成功。请注意，此实现使用了钩子。就像这里提到的那样： https: //codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding

默认情况下，它们允许一次打开多行，但我需要实现相反的情况。

我最接近的是：Auto Expandable rows and subrows React table using hooks

但这里它在初始加载时打开。

谢谢

我一直在关注https://blog.logrocket.com/complete-guide-building-smart-data-table-react/。要根据单元格值应用自定义样式，我正在更新列对象，如下所示：

return {
  Header: key,
  accessor: key,
  width: "150",
  sortType: "basic",
  Cell: ({cell: {value} }) => {
    if (value == "Error") {
      return <RedCell/>
    }
    ...
  }
}

是否可以将自定义样式应用于包含单元格的行？我想必须将道具传递给行，但我根本不清楚如何做到这一点。

任何指针将不胜感激。

在版本 6 中，这曾经有效，某些行没有价格，但original应该指向该行。

        {
            accessor : 'price',
            Header: () => <b>Price</b>,
            style: { 'whiteSpace': 'unset' },
            Cell: ({original}) => original.price && <div className="full-center">{original.price}</div>,
        },

但升级到版本7后，现在我得到了LineMatchingPage.js:121 Uncaught TypeError: Cannot read property 'price' of undefined