标签: react-table

我正在从 React Table 6 过渡到 React Table 7，它带来了很多新的变化，因为 React Table 7 现在是一个无头实用程序库，由大量的钩子构建。这与 React 表 6 有很大不同。我对 hooks 不太熟悉，以前也没有使用过它们（几个月前我已经阅读过它们），但现在我有点被迫深入了解它们，因为我的应用程序严重依赖这个库。

使用此处的示例指南，我在 React 应用程序中设置了一个初始表，尝试将该表连接到使用 Axios 获取的应用程序的实时数据。然而，我正在为一个最初的重要功能而苦苦挣扎——让表组件显示/更新我传递给它的数据，但只有在数据发生变化之后。

为了更清楚地说明，我创建了以下组件：

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

function MyReactTable7Table({ tableData }) {

    // 1. Create Columns
    const columns = React.useMemo(
        () => [
            {
                Header: 'Name',
                columns: [
                    {
                        Header: 'Col Available From Start',
                        accessor: 'conferenceId'
                    },
                    {
                        Header: 'Col Avail After Parent Re-Render',
                        accessor: 'teamMarket'
                    }
                ]
            } …

使用react-table V7 useSortBy钩子的toggleSortBy函数首先切换升序，然后降序，然后在第三次切换时设置isSortedDesc为false，而不是设置isSorted为false。

我想继续在true和false值之间切换，直到单击不同的标题。

检查此链接以获取问题参考

columns我的表格组件数组中有一个列react-table，需要在单元格内渲染一个下拉按钮，以允许用户将该行数据渲染到另一个模式组件中进行编辑。

我正在使用dropdownToggles一个布尔数组 - 设置为与表中的行数相同的长度 - 跟踪行中的哪个下拉列表应设置为isOpen。

无论如何，我是否可以访问 中数据的行索引，columns以便我可以将索引传递给isOpen={dropdownToggles[i]}和toggle={() => setDropdownToggles(handleDropdownToggles(i))} ？

import React, { useState, useEffect, useMemo } from "react";

import { useSelector } from "react-redux";

import { Dropdown } from "reactstrap";

const Table = () => {
    const { tasks } = useSelector(state => state.data);
    const numTasks = tasks.data.length;

    const [dropdownToggles, setDropdownToggles] = useState([]);

    useEffect(() => {
        setDropdownToggles(new Array(numTasks).fill(false));
    }, [numTasks]);

    const data = useMemo(() => tasks.data, …

我正在尝试使用React-Table和 Hook useResizeColumns来实现调整大小功能。我想强制表格始终占据其容器的整个宽度。只有列应该改变它们的大小。不是桌子。如果您看一下我在这里制作的这个示例。(Codesandbox) 您可以轻松调整列的大小以超过红色容器。由于某种原因，如果您最小化列大小，表格将始终适合容器！

我不明白这里的行为。有任何想法吗 ？非常感谢。

我正在使用 构建一个表react-table，但 TypeScript 抱怨我添加到columns. 我columns的设置如下：

const columns = useMemo(
    () => [
      {
        Header: 'Name',
        accessor: 'name',
        className: '[some classes here]',
        isSortable: true,
      },
    ...

我像这样渲染表格：

<tr {...headerGroup.getHeaderGroupProps()}>
  {headerGroup.headers.map(column => {
    const getHeaderPropsArgs = [{ className: column.className }];
    if (column.isSortable) getHeaderPropsArgs.push(column.getSortByToggleProps());
    return (
      <th {...column.getHeaderProps(getHeaderPropsArgs)}>
        <div>
          {column.render('Header')}
          {column.isSortable ? <SortIcon isSorted={column.isSorted} isSortedDesc={column.isSortedDesc} /> : null}
        </div>
      </th>
    );

换句话说，我的一些列是可排序的，对于这些列，我SortIcon在标题中呈现一个自定义组件。某些列具有与其关联的类，我将它们getHeaderProps与指令一起添加到使列可排序或不可排序。

TypeScript 抱怨我添加的这两个属性columns：

Property 'className' does not exist on type …

我在使用 webpack 构建时遇到问题。这是我在构建时看到的错误...

ERROR in ./node_modules/react-table/src/publicUtils.js 10:35
Module parse failed: Unexpected token (10:35)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export const defaultRenderer = ({ value = '' }) => value;
> export const emptyRenderer = () => <>&nbsp;</>;
| 
| export const defaultColumn = {
 @ ./node_modules/react-table/src/plugin-hooks/useRowSelect.js 3:0-9:23 14:0-25 15:0-29 16:0-25 17:0-33 96:22-34 103:22-47 110:22-51 141:22-47 178:22-55 235:2-19 277:35-47 279:2-24 281:23-48 286:30-59 …

我正在使用 React-Table 构建一个动态表，我想添加一行新的可编辑单元格。\n目前我可以添加新行，但只有当我按下全局编辑按钮时我才能编辑它，而不是我想要首先添加一行可编辑的行。\n这是我的代码 -

主要成分

function StyledTable() {\n  useEffect(() => {\n    dispatch(getData(mokeJsonData));\n  }, []);\n  const [datatoColumns] = useState(columnDataaa.slice(1));\n  const [skipPageReset, setSkipPageReset] = useState(false);\n  const data = useSelector((state) => state.dataReducer.data);\n  const dispatch = useDispatch();\n\n  const columns = useMemo( \n    () => [\n      {\n        Header: "",\n        id: "expander", \n        Cell2: ({ row }) => { \n          return (\n            <span {...row.getToggleRowExpandedProps()}>  \n              {row.isExpanded ? "-" : "+"}\n            </span>\n          );\n        },\n        Cell: () => {\n          return <div></div>;\n        },\n      },\n      {\n        Header: columnDataaa[0].Header,\n …

我想知道有必要在反应表中使用 useMemo 来获取列和数据，如果是的话，为什么会这样？

这是我的代码：

import React, { useMemo } from "react";
import useData from "../../hooks/useData";
import Table from "./Table";

import Loader from "../../assets/imgs/loader.svg";

const TableSection = React.memo(({ query, isOpen }) => {
  const { data, runtime, error } = useData(query);

  const column =
    data.length > 0 &&
    Object.keys(data[0]).map((key) => {
      const result = data[0][key]
        .replace(/([A-Z]+)/g, " $1")
        .replace(/([A-Z][a-z])/g, " $1");
      return {
        Header: result,
        accessor: key,
      };
    });
  const columns = useMemo(() => column, [column]);
  const queryData = useMemo(() => …

Apply当我单击（从下拉列表中应用所有选定的选项）或Cancel按钮（重置选定的选项）时，我无法进行多重交叉过滤。例如按taste和进行过滤availability（请参见图片）。但我无法呈现过滤后的行/更新的表。

export default function MenuDisplay() {
  const { menuId } = useParams();
  const { match } = JsonData;
  const [selected, setSelected] = useState({});
  const [hidden, setHidden] = useState({});
  const [taste, setTaste] = useState([
    { label: "Good", value: "Good", name: "Good", selected: false },
    { label: "Medium", value: "Medium", name: "Medium", selected: false },
    { label: "Bad", value: "Bad", name: "Bad", selected: false }
  ]);

  const [comments, setComments] = useState([
    { label: "0", value: …

使用此示例
https://tanstack.com/table/v8/docs/examples/react/pagination-control
我如何使用https://tanstack.com/table/v8/docs/api/features/pagination#onpaginationchange如果我需要调度我的 redux 操作而不是 useState - setPaginationState？

onPaginationChange: state => dispatch(browseItemModalActions.setPagination(state))

在控制台中出现此错误：

`react_devtools_backend.js:4012 A non-serializable value was detected in an action, in the path: `payload`. Value: old => {
          let newState = functionalUpdate(updater, old);
          return newState;
        }