标签: react-table-v7

我对我的桌子有以下要求：

1. 表格应该有固定的标题
2. 它需要自动调整大小：为了使无限滚动正常工作，第一次提取应该获得足够的数据量以便滚动出现。
3. 表体应作为无限加载器工作：当滚动到列表末尾时表体应显示加载指示器并加载更多行

我的假设如下：

1. 由于用户将滚动浏览可能较大的数据集，我应该虚拟化列表（反应虚拟化似乎是我唯一的好选择）
2. 因为我们目前有react-table，我想保留它（它有声明表行、列、访问数据和过滤+排序的强大机制）
3. 当我们使用 Material ui 时，我需要使用 Material ui React 组件
4. 因为react-virtualized有自己的Table组件，我可以使用它，但是react-table有不同的渲染行和列的方式，因此我必须使用List组件。（react-table 分隔行和列，而react-virtualized 直接使用列作为 Table 组件的子组件）
5. 我看到react-virtualized可以与名为InfiniteLoader的HOC组件一起使用，所以我也应该使用它
6. 最后，我需要我的列不要仅仅因为它有更多文本（即具有动态高度）而被搞乱。所以我尝试使用 CellMeasurer 来实现这一点。

我能够实现的目标可以在这个沙箱中看到 https://codesandbox.io/s/react-table-infinite-mzkkp?file=/src/MuiTable.js （我无法在这里提供代码，因为它很大）

因此，一般来说，我可以使 Autosizer、CellMeasurer 和 List 组件从反应虚拟化中正常工作。我被困在无限滚动部分。我在官方文档上看到了这个例子，但似乎有点反模式（直接突变状态根本不是一件好事）

所以我试图达到类似的结果，但是如果你能看到，我的 loadMore 函数由于某种原因触发得太早了。它导致几乎每个滚动事件都发送请求。

任何帮助深表感谢。

我已经尝试过的：

1. 使用react-window而不是react-virtualized 它仅适用于简单的用例，并且对于动态大小的单元格会失败。
2. 使用react-inifnite-scrollcomponent（https://www.npmjs.com/package/react-infinite-scroll-component ））它适用于整个页面（无法制作“粘性”标题，无法将加载指示器作为表体，它对长列表没有任何优化）
3. 使用react-virtualized中的Table组件。我无法使其与react-table一起使用（因为react-virtualized中的Table组件似乎直接将Cells渲染为Table组件的子组件。我知道它有renderRow函数，但这意味着两个不同的地方，而react-table有

<TableRow
  {...row.getRowProps({
     style
  })}
  component="div"
  >
  {row.cells.map((cell) => {
     return (
       <TableCell {...cell.getCellProps()} component="div">
         {cell.render("Cell")}
       </TableCell>
      );
   })}
</TableRow>

此外，尚不清楚如何以这种方式呈现自定义过滤器。

我正在我的应用程序中使用交互式表格react-table。

我的目标是制作一个表格，当单击表格单元格中的按钮时，每行都可以编辑。

我设计了一个EditableCell像下面这样的。

import React, {useState} from "react";

export const EditableCell = ({
                                 value: initialValue,
                                 row: Row,
                                 column: {id, editable, state},
                                 isEditing,
                                 updateItem, // This is a custom function that we supplied to our table instance
                             }) => {
    // We need to keep and update the state of the cell normally
    const [value, setValue] = React.useState(initialValue);
    const {index} = Row;

    const onChange = e => {
        setValue(e.target.value);
    };

    // We'll only update the external data …

所以我有一个带有 useTable 的 JavaScript 类。在Java脚本中它的使用如下

import {useTable, useFilters,useAsyncDebounce,useSortBy,usePagination,} from "react-table";

const {getTableProps,getTableBodyProps, headerGroups, page,prepareRow,state,visibleColumns, nextPage,pageOptions,pageCount,previousPage,canPreviousPage,canNextPage,setPageSize,gotoPage
      } = useTable({columns,data,defaultColumn,filterTypes,initialState: { pageSize: 10, pageIndex: 0 }
       },useFilters, useSortBy,usePagination);

我正在将我的 javascript 项目转换为 typescript。

在打字稿中，该useTable行给出了错误。

例子 ：Property 'page' does not exist on type 'TableInstance<object>'.ts(2339)

该initialState属性给出了我的以下错误

Type '{ pageSize: number; pageIndex: number; }' is not assignable to type 'Partial<TableState<object>>'.
  Object literal may only specify known properties, and 'pageSize' does not exist in type 'Partial<TableState<object>>'.ts(2322)
index.d.ts(172, 5): The expected type comes …

我正在尝试使反应表可水平和垂直滚动，但现在它根据数据占用了所有空间。我想使该表格具有固定高度并可在两个方向上滚动。

表组件：

import React from "react";
import { useTable } from "react-table";

const Table = ({ columns, data }) => {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({
      columns,
      data,
    });
  return (
    <table {...getTableProps()} className="text-center">
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                className="bg-primary-dark text-white p-4 text-center"
                {...column.getHeaderProps()}
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody
        {...getTableBodyProps()}
        className="bg-primary-light text-primary-dark overflow-scroll"
      >
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return …

我正在尝试实现一次只能选择一行的反应表。我已经在反应表中经历了很多多行选择的示例，但就我而言，当用户单击单选按钮时，用户只能选择一行，但目前可以选择所有行。有人可以帮我解决这个问题吗？

在 React-Table 的最新版本 (7.5.x) 中，当使用 Material-UI Table 组件时，有没有办法从列标题中删除“Toggle sortBy”工具提示？

两个工具提示

我有一个带有列标题名称的工具提示。悬停时会出现两个工具提示。看看这个codeandbox

我正在使用（和材料 UI 表）react-window创建虚拟表react-table 7。

我嵌入了 FixedSizeList 而不是 TableBody。像这样的东西：

   <TableBody {...getTableBodyProps()}>
    <FixedSizeList
      height={listHeight}
      itemCount={rows.length}
      itemSize={rowHeight}
    >
     {RenderRow}
    </FixedSizeList>)
   </TableBody>

RenderRow 返回 TableRows。像这样的东西：

 const RenderRow = React.useCallback(  ({ index, style }) =>
 {
     const row = rows[index];
     prepareRow(row);
     const rowProps = row.getRowProps();
     return (<TableRow
              {...row.getRowProps({
               style,
              })} />);
 }

由于react-window工作原理，它创建了几个divs 来实现列表滚动，根据需要动态嵌入所需的 TableRow，从而导致输出 react js 警告。

webpack-internal:///490:506 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>

只是忽略这个警告，不是我想做的事情，因为它可能会导致其他警告不被注意。（我也不想在测试时使用发布版本）

那么是否有可能阻止发出此警告？或者是否可以react-window用于表行，而不会收到此警告？

更新：尝试设置innerElementType到 …

我试图保留react-table v7 的选定复选框的状态。我有一个复选框可以一次选择多行并且效果很好，问题是一旦打开批量操作对话框，表就无法维持该状态。即使选定的行数据仍然可用，对话框打开后复选框就会立即变为取消选中状态。我只需要复选框来保持状态。数据从 graphql api 获取，轮询设置为 0

使用的大部分代码与文档相同

const TableContainer = ({ columns, data }) => {
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      page,
      prepareRow,
      canPreviousPage,
      canNextPage,
      pageOptions,
      pageCount,
      gotoPage,
      nextPage,
      previousPage,
      setPageSize,
      setGlobalFilter,
      selectedFlatRows,
      state: { pageIndex, pageSize, globalFilter },
    } = useTable(
      {
        columns,
        data,
        defaultColumn: { Filter: DefaultColumnFilter },
        initialState: { pageIndex: 0, pageSize: 10 },
      },
      useFilters,
      // useExpanded,
      useGlobalFilter,
      useSortBy,
      usePagination,
      useRowSelect,
      (hooks) => {
        hooks.visibleColumns.push((columns) => [
          {
            id: "selection",
            Header: ({ getToggleAllRowsSelectedProps }) => …

提前感谢您的帮助。

我试图解决的问题是使用react-table v7创建一个表，并在该表中使用展开并显示另一个表，其中包含与图像中附加的第一个选择相关的数据。

这是图像的codesandbox示例，我想做同样的事情，但使用最新版本的react-table，我尝试使用子组件，但这些只向我显示数据，而不是它们具有的标题，因此我无法执行排序、子表内搜索

我尝试在子组件内渲染反应表的另一个实例，但看起来它始终保留在第一列中：

有谁有一个看起来像参考图像中的示例可以帮助我吗？

我有一个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），但遇到了同样的问题。

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

提前致谢。