标签: react-table-v7

我正在为我的项目创建一个网格，我需要在其中实现列过滤。我已经完成了大部分工作，但面临一个问题，那就是每当我单击 ID 列的过滤器输入框时，该列就会被排序。我尝试过使用，e.stopPropagation()但这不起作用。

我的代码库的工作副本可以在https://4hz20.csb.app/找到，代码可以在https://codesandbox.io/s/data-table-forked-4hz20找到

ColumnFilter.js

import React from "react";
import styled from "styled-components";

const Input = styled.input`
  width: 144px;
  margin: 8px 0;
  padding: 12px;
  border: solid 1px #c2c3c9;
  background-color: #ffffff;
`;

export const ColumnFilter = ({ column }) => {
  const { filterValue, setFilter } = column;
  return (
    <Input
      value={filterValue || ""}
      onChange={(e) => {
        e.stopPropagation();
        setFilter(e.target.value);
        return false;
      }}
      placeholder="Search"
    />
  );
};

另外我正在使用manualFilters: true,manualSortBy: true因为manualPagination: true我想在服务器端处理它们，但手动排序和手动过滤似乎不能一起工作，请参阅 …

我正在使用反应表包。我制作了一个带有行选择的简单表格。问题是：行选择结果是一个带有索引的对象：

{
 0: true,
 1: true,
 ...
}

但我想成为我的数据的主键，如下所示：

{
  EXoxMjyd4leYABdpuy8m: true,
  2gXlClA38AU8sSM5jnZ7: true,
  ...
}

代码示例

在文档中，我找不到可以设置选择键的配置。问题是，我怎样才能实现第二个例子呢？

在这个官方示例中，表格排序和搜索会在任何可编辑字段模糊时重置。https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink?file=/src/App.js
我怎样才能防止这种情况？我希望排序和搜索保持不变，即使有人编辑数据。

我正在尝试使用 react-table 并且它抛出了一个错误。当我运行它时，它会在屏幕上显示以下堆栈跟踪：

它似乎试图从列创建映射，但由于列未定义而引发错误。

我正在传递我的专栏，但也许我做得不正确。

这是我的代码：

class Blog extends Component {
...
    createTable() {
        return this.state.blogPosts.length ? <Table posts={this.state.blogPosts} /> : null;
    }
...
    componentDidMount() {
...     
        axios.get('/blogs').then(response => {
            if (response.data) {
                const entries = Object.entries(response.data);
                this.setState({blogPosts: entries.map(p => Object.assign({id: p[0]}, {...p[1]}))
                    .sort((p1, p2) => p1.updatedAt > p2.updatedAt ? -1 : 1)});
            }
        }, err => {
            console.log('err=', err);
        });
    }
}

import React from 'react';
import {
    useTable,
    useGroupBy,
    useFilters,
    useSortBy,
    useExpanded,
    usePagination
} from 'react-table';

function Table(props) …

我使用单选按钮来选择行。如何禁用多行选择以便一次只能选择一行？

我正在使用selectedFlatRows，但它允许选择多行。

const Table = props => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
    selectedFlatRows,
  } = useTable(
    {
      columns,
      data: props.linkedProducts,
    },
    useSortBy,
    usePagination,
    useRowSelect,
    hooks => {
      hooks.visibleColumns.push(columns => [
        {
          id: 'selection',
          disableGlobalFilter: true,
          accessor: 'selection',
          Cell: ({row}) => (
            <RadioButton
              {...row.getToggleRowSelectedProps()}
            />
          ),
        },
        ...columns,
      ]);
    }
  );

我正在尝试使用react table v7显示一些数据。使用useTable 钩子它可以完美地工作，除了它只显示一个空表，没有预期的noDataText。

import React, { useContext, useEffect, useMemo } from 'react'
import {
    useTable,
    useSortBy,
    useFilters,
    usePagination,
} from 'react-table'
import '../css/datatable.css'
import WarehouseAction from './WarehouseAction'
import { WarehouseContext } from '../context/WarehouseContext'
import { AuthContext } from '../context/AuthContext'
import AddStock from './AddStock'
import { Filter, DefaultColumnFilter } from './Filter'
import { InlineIcon } from '@iconify/react'
import ChevronCircleUp from '@iconify/icons-jam/chevron-circle-up'
import ChevronCircleDown from '@iconify/icons-jam/chevron-circle-down'






function WarehouseData() {

    const { warehouseData, getWarehouseRequest } = useContext(WarehouseContext) …

useSortBy sortType 属性的文档说：

sortType: String | Function(rowA: <Row>, rowB: <Row>, columnId: String, desc: Bool)

    Used to compare 2 rows of data and order them correctly.
    If a function is passed, it must be memoized. The sortType function should return -1 if rowA is larger, and 1 if rowB is larger. react-table will take care of the rest.
    String options: basic, datetime, alphanumeric. Defaults to alphanumeric.
    The resolved function from the this string/function will be used to sort the …

我想在反应表中设置单个单元格的样式，但我无法这样做。

const MOCK_DATA = [
  {
    amount: 1000,
    status: `SUCCESS`,
    updatedAt: 1629181927,
  },
  {
    amount: 2000,
    status: `FAILED`,
    updatedAt: 1629181927,
  },
];

export const COLUMNS = [
  {
    Header: 'Date',
    accessor: 'transactionDate',
  },
  {
    Header: 'Amount',
    accessor: 'amount',
  },
  {
    Header: 'Status',
    accessor: 'status',
  },
];

这是 jsx：

 <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>

假设我想根据数据的状态将单元格的颜色更改为绿色或红色，如何实现？

笔记：

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

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

React 表排序有 3 个条件，default view如其ascending官方descending示例https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting所示

现在，我只想将其设置在ascending和之间descending并删除默认视图。我尝试默认对第一列进行排序

 useTable(
    {
      columns,
      data,
      initialState: {
        pageIndex: 0,
        pageSize: 10,
        sortBy: [
          {
            id: "asset",
            desc: false,
          },
        ],
      },
    },
  )

但当我单击该列时，默认视图仍然存在，但我不知道如何删除它。我在他们的文档中也找不到它。

我有一个react-table在打字稿中运行良好的。

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    { columns, data }
  );

我想添加全局过滤。如果我简单地添加插件挂钩，它就会编译：

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    { columns, data },
    useGlobalFilter
  );

但如果我尝试添加该setGlobalFilter选项，则会收到编译器错误：

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, setGlobalFilter } = useTable(
    { columns, data },
    useGlobalFilter
  );

ERROR in src/components/SubmissionTable.tsx:144:77
TS2339: Property 'setGlobalFilter' does not exist on type 'TableInstance<TableModel>'.

我有"@types/react-table": "^7.7.9"我的开发依赖项，并且可以确认它可以找到这些类型。我不清楚为什么在我传入 useGlobalFilter 插件/钩子后它不允许我使用 setGlobalFilter 。