标签: react-table

我正在尝试使用 react-table 实现可编辑的数据网格。代码如下所示：

<ReactTable
  data={data}
  columns={columns}
/>

我面临的问题是，每当特定行中的单元格值更新时，整个可见页面都会重新呈现。

这是说明问题的库创建者的分叉沙箱。

我在想，如果在单个单元格中有更新时，react-table 会重新渲染整个页面，那么它效率很低。或者我不确定我是否遗漏了什么。

任何帮助我们非常感谢。提前致谢！

React 表格​​计算页脚总和对搜索排序的页面更改，我们如何实现这一点。

import React from "react";
import { render } from "react-dom";
import ReactTable from "react-table";
import "react-table/react-table.css";

const data = [
  {
    id: 1,
    product: "apple",
    stock: 1,
    price: 123
  },
  {
    id: 2,
    product: "pie",
    stock: 2,
    price: 22
  }
];

const App = () => (
  <div>
    <ReactTable 
      data={data}
      columns={[
        {
          Header: "Id",
          accessor: "id"
        },
        {
          Header: "Product",
          accessor: "product",
          Footer: "Summary"
        },
        {
          Header: "Stock",
          accessor: "stock"
        },
        {
          Header: "Price",
          accessor: "price",
          Footer: ( …

我有一个反应表，每一行都有一个箭头，单击该箭头会扩展为另一个反应表的子组件。

我想更改该箭头的颜色，并在可能的情况下将其移动到列的右侧。有谁知道这是否可能以及如何去做。我附上了表格的代码图片以及它当前呈现的样子。谢谢你的帮助！

代码示例

我的反应表中有一个列使用变量（命名项）来显示其数据。如下代码所示：

{
  Header: this.generateHeaderCell(this.props.headers[3]),
  accessor: 'last_updated_status',
  Cell: (props: any) => <DateSinceFormat date={props.value} item={item}/>,
  maxWidth: 85,
  filterable: false
}

因此，当变量item的值为1 时，它会显示一些数据，而当它更改时，它会显示其他数据。

我正在使用 onClick 事件来更改item的值。

onRowClick = (state, rowInfo, column, instance) => {
    return {
        onClick: e => {
            if(item === '2') {
                item = '1';
            } else {
                item = '2';
            }
            instance.forceUpdate();
        }
    };
}

我在这里面临的问题是，我只想更新用户单击的特定行的值，但是现在所有行都在更新。

请在这里帮助我并让我知道如何解决这个问题。

我正在使用该react-table库创建一个包含可过滤列的表。该表的格式如下：

const defaultFilter = [{
  id: 'title',
  value: '',
}];

const ExampleTable = ({ documents, filter = defaultFilter }) => {
  const columns = [
    {
      accessor: 'title',
      filterable: true,
      id: 'title',
      width: 375,
      Cell: props => {
        return (
          <div>
            { props.value }
          </div>
        );
      },
      Filter: ({ filter, onChange }) => (
        <input
          onChange={ event => onChange(event.target.value) }
          style={ { width: '100%' } }
          placeholder={ 'Enter Filter' }
          value={ filter ? filter.value : '' }
        /> …

我正在使用react-table，并希望根据内部单元格的数量合并特定单元格的单元格。它喜欢删除分隔边框。

它看起来像这样： https: //i.stack.imgur.com/2sJ9O.png

我尝试Columns使用border-bottom: 1px solid transparent !important;and来使用 className border-top: 1px solid transparent !important;，但它不起作用。你能告诉我该怎么做吗？感谢您。

我在我的项目中使用react-table组件。行扩展属性是我的功能所利用的，现在工作正常。

我需要能够在展开一行时折叠所有行。即一次只能打开一行。我确实浏览了许多文档和 stackoverflow 链接，但没有一个成功。请注意，此实现使用了钩子。就像这里提到的那样： https: //codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding

默认情况下，它们允许一次打开多行，但我需要实现相反的情况。

我最接近的是：Auto Expandable rows and subrows React table using hooks

但这里它在初始加载时打开。

谢谢

如何在 React Table 中使用单选输入而不是复选框作为可选表？

有一个复选框但不是单选按钮的示例：https://github.com/tannerlinsley/react-table/blob/master/examples/row-selection/src/App.js

更改 InminatedCheckox 以使用无线电输入不起作用，因为反应表中的选择状态未更新：

const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
    const defaultRef = React.useRef();
    const resolvedRef = ref || defaultRef;

    useEffect(() => {
      resolvedRef.current.indeterminate = indeterminate;
    }, [resolvedRef, indeterminate]);

    return <input name="select-radio" type="radio" ref={resolvedRef} {...rest} />
    );
  });

它看起来正确，但没有传递正确的选择状态：

我正在使用 useGroupBy 钩子对我的 react-table 表进行分组。但是，当分组时，默认行为是对表中的列进行分组重新排列，但我不想将它们保持在相同的位置，您知道如何使用可选的 useGroupByHook 来做到这一点吗？

这是代码和框：https ://codesandbox.io/s/ecstatic-tree-bq19p ? file =/ src/App.js

当按 groupby 即 age 时，它​​会将 age 向左移动..

分组前：

我想在我的一列中添加一个按钮，以便当我单击它时，我可以获得该按钮所在行的详细信息。目前我的桌子上没有按钮，我不知道如何放置按钮初始化。另外我想知道如何在单元格中添加自定义标签。我想在一个单元格中添加两个标签，一个标题标签和一个下面的段落标签，但它们必须在同一个单元格中。

    const location = useLocation();

    useEffect(() => {
        console.log(location.state);
    });

    const data = React.useMemo(
        () => [
            {
                col1: 'Hello',
                col2: "world",
            },
            {
                col1: 'react-table',
                col2: 'rocks',
            },
            {
                col1: 'whatever',
                col2: 'you want',
            },
            {
                col1: 'whatever',
                col2: 'you want',
            },
            {
                col1: 'whatever',
                col2: 'you want',

            },
            {
                col1: 'whatever',
                col2: 'you want',

            },
            {
                col1: 'whatever',
                col2: 'you want',

            },
            {
                col1: 'whatever',
                col2: 'you want',

            },
            {
                col1: 'whatever',
                col2: 'you want',

            },

        ],
        [], …