标签: react-table

当我们得到一个页面较小的水平列时，我们可以修复一列吗？

例如，我们可以修复列firstName在此例子。

干杯！！

我正在使用ReactTable,并filterable设置为true.我需要访问应用过滤器后返回的数据,因此我可以生成过滤后的数据的CSV.

关于我如何能够获得过滤后的数据的任何想法,如JSON？在这里搞乱了https://react-table.js.org/#/story/custom-filtering,到目前为止还没有找到一种方法来获取已经过滤掉的数据.

我正在尝试打印某些 API 返回的布尔值和时间戳值。我无法做同样的事情。帮助将不胜感激

列配置对象：

    <ReactTable
                data={this.state.data}
                columns={[
                            { 
                              Header: 'Name',   
                              accessor: 'name'
                            },
                            { 
                              Header: 'Age>18',   
                              accessor: d => d.isAgeAbove18.toString(); // this does not work
                            },
                            { 
                              Header: 'TimeStamp',   
                              accessor: d => d.timeVal.toString(); // this does not work
                            },
                     ]}

    />

我正在修改 ReactJS 组件。我添加了一个 react-table 来获取分页，效果很好。但是表中的一列需要调用也在此组件中的函数，因此它可以根据该记录的内容呈现链接。（有些结果会呈现链接，有些则不会。）当我在列的访问器属性中列出该函数时，它会返回该函数的一些值，但不是全部。因此，链接返回为：

    localhost:3000/view/c/IDnumber/undefined.  

IDnumber和query都应该返回，但是query参数是“undefined”。

我试过在访问器中列出函数，如：

    getSerialNo(hit,query)

但后来我得到“命中未定义”。我在这个网站和其他网站上搜索过以找到解决方案。

该列看起来像：

    {id:'serialno',
    Header: "Serial #",
    accessor: getSerialNo
    }

部分功能如下所示：

    const getSerialNo = (hit, query) => {
        const linkAs = '/view/c/${hit._id}/${query}'
    return <Link href={link} as={linkAs}><a target="_blank">{serialNo}
     </a></Link>

我想取回一个实际包含查询的链接，例如：

    localhost:3000/view/c/IDnumber/query

在 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到 …

我正在使用@tanstack/react-tablev8，我想在我的表格行单元格之一中添加一些图标和按钮。查看文档我可以使用显示列：

Display columns do not have a data model which means they cannot be sorted, filtered, etc, but they can be used to display arbitrary content in the table, eg. a row actions button, checkbox, expander, etc.

该文档还提到了有关单元格内容的自定义渲染的内容： By default, columns cells will display their data model value as a string. You can override this behavior by providing custom rendering implementations. ... You can provide a custom cell formatter by passing a function to the cell …

我们正在将表从 v7 迁移到 v8。我对单元格条件样式有点疑问。所以基本上我想做的是，根据状态（即将进入表数据），我需要向行中的每个单元格添加特定的类名。

在 v7 中我们使用了这个： https: //react-table-v7.tanstack.com/docs/examples/data-driven-classes-and-styles

但在 v8 中我找不到类似的东西......

到目前为止，我尝试meta在列定义中使用https://tanstack.com/table/v8/docs/api/core/column-def#meta，我可以在其中为 className 属性设置一些值，并在我的 JSX 中使用它，如下所示：

className={cell.column.columnDef.meta?.className}

但问题是我可以设置为元的任何内容都是静态值。对于我的情况，我需要根据我的状态值设置特定的 className。似乎在元中我们无法访问任何单元格道具......

const driverFormatter = ({ row }) => {
  const { status } = row.original;

  return <span>{status}</span>;
};

const columns: ColumnDef<any,any>[] = [
    {
      accessorKey: "customerName",
      header: "Customer"
    },
    {
      accessorKey: "driver",
      header: "Driver",
      enableSorting: false,
      cell: driverFormatter,
      meta: {
          className: "disabled",
     },
    },
    ...

那么有什么方法可以使用 v8 来实现这一点吗？

谢谢你！

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

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

但在 v7 中它不起作用。

我正在寻找一种简单而干净的方法来使所有行在使用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