标签: react-table

我正在使用该react-table插件，但很难对定义了自定义链接的一列进行排序。

此列的内容基于该行中数据的一些属性，因此我为其创建了一个自定义单元格。显示正常，但排序执行得很奇怪。

我很确定问题出在columns定义中，但为了完整性，我将在此处发布所有代码：

export default function CloudfrontList() {
    const [loading, setLoading] = useState(true);
    const [columns, setColumns] = useState([]);
    const [data, setData] = useState([]);

    const getDataForTable = async () => {
        const _columns = [{
            // This is the cell that doesn't sort properly
            Header: "Name",
            Cell: cell => {
                const row = cell.row.original;
                const value = row.comment ? row.comment : row.origins[0].domain_name;
                return (
                    <Link href="/view/cloudfront/[id]" as={`/view/cloudfront/${row.id}`}>
                        <a>{value}</a>
                    </Link>
                );
            },
            accessor: row => {
                return row.comment …

我是 React 新手，并尝试模拟此处找到的行拖放代码：https ://react-table-omega.vercel.app/docs/examples/row-dnd

如果我打开沙箱，所有默认代码都可以正常工作。如果我在本地复制粘贴代码，编译时会出现以下错误：

Attempted import error: 'react-dnd-html5-backend' does not contain a default export (imported as 'HTML5Backend')

我使用安装了该库npm install react-dnd-html5-backend --save，并且没有对其进行任何修改。

导入行是：

import HTML5Backend from 'react-dnd-html5-backend'

这是从教程中复制粘贴的。我不明白为什么它会抛出错误，也不明白如何修复它。有什么想法吗？

我有下表：

我希望点击行右侧的三个点会打开一个弹出菜单，所以我为此单元格编写了一个 onClick 函数。

我还希望点击行中的任何其他区域将重定向到另一个页面，所以我覆盖了反应表的 onClick，（如反应表文档中所建议的：https : //github.com/tannerlinsley/react-table/ tree/v6#custom-props ) 以下列方式：

 _getTdProps = (state, rowInfo, column, instance) => ({
     onClick: (e, handleOriginal) => {
        if (this.props.onTableRowClick) {
            this.props.onTableRowClick({ e, column, rowInfo, instance });
        }
        if (this.props.shouldHandleOriginalOnClick && handleOriginal) {
           handleOriginal();
        }
    },
})

我的问题是，当我按下三点图标而不是打开弹出菜单时，也会重定向到另一个页面。

我怎样才能使这个功能起作用？我试过对单元格和行使用 z-index 但它没有帮助。

有什么建议？

谢谢

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

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

知道如何在反应表中使用 rowSpan 。对于下面的示例 usernameFormatter 有多个值。注意：附件图片是复制的，但这看起来像我想要的

const columns = [
     {
         accessor: "id",
         show: false,
     },
     {
        Header: "Username",
        id: "username",
        accessor: "username",
        Cell: this.usernameFormatter,
        enableRowSpan: true
     }
]
          
<ReactTable
    data={this.state.users}
    filterable={true}
    columns={columns}
    defaultPageSize={18}
    getTdProps={(state, rowInfo, column) => {
        const index = rowInfo ? rowInfo.index : -1;
        return {
            onClick: (e, handleOriginal) => {
                if (column.Header === undefined) {
                    handleOriginal();
                } else {
                    if (rowInfo !== undefined) {
                        this.selectedRow = index;
                        this.onRowSelect(rowInfo.original.id);
                    }
                }
            },
        };
    }}
/>
                

React Table 的文档非常稀疏，我无法理解这些示例。

例如这里： https: //react-table.tanstack.com/docs/examples/data-driven-classes-and-styles，我们看到这样的代码：

{row.cells.map(cell => {
                return (
                  <td
                    // Return an array of prop objects and react-table will merge them appropriately
                    {...cell.getCellProps([
                      {
                        className: cell.column.className,
                        style: cell.column.style,
                      },
                      getColumnProps(cell.column),
                      getCellProps(cell),
                    ])}
                  >
                    {cell.render('Cell')}
                  </td>

我不清楚发生了什么。

GetCellProps被调用，并提供一个数组作为参数。该数组包含 1. 一个具有两个属性的对象，2. 一次调用getColumnProps（这有什么作用？），然后 3. 另一个调用，getCellProps但现在以单元格作为参数。

然后使用扩展运算符 (...) 对该调用的结果进行运算。

如果有人能帮助我理解这一切，非常感谢。

我试图保留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 }) => …

我正在使用@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 …