标签: react-table

我正在尝试找到与我的反应应用程序一起使用的最佳表格,而现在,react-table提供了我需要的一切(分页,服务器端控制,过滤,排序,页脚行).

话虽如此,我似乎无法选择一行.没有举例说明这一点.

我尝试过的一些事情包括尝试在点击行时设置className.但我似乎无法找到调用元素e也不t.此外,我不喜欢这种方法,因为反应应用程序不应该如何做事.

<ReactTable
            ...
            getTrProps={(state, rowInfo, column, instance) => {
                return {
                    onClick: (e, t) => {
                        t.srcElement.classList.add('active')
                    },
                    style: {
                    }
                }
            }}
        />

一些可能的解决方法是将复选框渲染为第一列,但这不是最佳选择,因为它限制了单击以"激活"该行的区域.此外,视觉反馈将不那么富有表现力.

我在房间里想念大象吗？如果没有,你知道另一个支持我之前描述过的东西的图书馆吗？

谢谢!

编辑: 另一种选择,这是开源,是建议编辑.也许这是正确的事情.

编辑2

另一件事,由DavorinRuševljan在评论中提出,但我无法使其发挥作用:

onRowClick(e, t, rowInfo) {
    this.setState((oldState) => {
        let data = oldState.data.slice();
        let copy = Object.assign({},  data[rowInfo.index]);

        copy.selected = true;
        copy.FirstName = "selected";
        data[rowInfo.index] = copy;

        return {
            data: data,
        }
    })
}

....

            getTrProps={(state, rowInfo, column) => {
                return …

我正在使用 Effect 钩子从服务器获取数据，并将这些数据传递到反应表，在那里我使用相同的 api 调用从服务器加载下一组数据。当应用程序加载时，我收到如下警告

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

效果挂钩：

useEffect(() => {
setPageLoading(true);
props
  .dispatch(fetchCourses())
  .then(() => {
    setPageLoading(false);
  })
  .catch((error: string) => {
    toast.error(error);
    setPageLoading(false);
  });
}, []);

反应表页面：

<ReactTable
  className="-striped -highlight"
  columns={columns}
  data={coursesData}
  defaultPage={currentPage}
  defaultPageSize={courses.perPage}
  loading={isLoading}
  manual={true}
  onFetchData={setFilter}
/>

设置过滤功能：

const setFilter = (pagination: …

正在寻找一种方法来将"导出到CSV"按钮添加到作为npmjs包的反应表(https://www.npmjs.com/package/react-table).

我需要添加一个自定义按钮,用于将表数据导出为csv或xls格式的Excel工作表？

我正在使用 react-table v7 https://www.npmjs.com/package/react-table创建表。

1. 通过参考这个排序https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting示例，我可以对所有列进行排序。现在我不希望对所有列进行排序，而是希望对某些特定列进行排序，并且我希望默认降序对 2 列进行排序。有人可以帮我解决这个问题。

2. 将过滤器应用于表后，我想清除所有应用的过滤器。有人也可以帮忙解决这个问题吗？

谢谢

我使用Rails和React-Table来显示表.它到目前为止工作正常.但是如何在React-Table中添加编辑/删除列？

它甚至可能吗？

return (
    <ReactTable
      data={this.props.working_hours}
      columns={columns}
      defaultPageSize={50}
      className="-striped -highlight"
    />
    )

tanstack React 表的 V8 新手...似乎与 V7 在某些方面有很大不同，希望得到一些建议。

我需要使用 apollo graphql 对服务器端进行排序

通过阅读文档，我知道您需要使用“manualSorting”道具

只是不清楚从那里到底要做什么

  const [sorting, setSorting] = useState<SortingState>([]);

  const hasVar = Boolean(reactiveVar);

  const selectedRowId = useReactiveVar(
    reactiveVar ?? makeVar<SelectedID>(null)
  );

  const { controlledPageCount, setControlledPageCount, formatLoadSorts } =
    useLoadTableUtils();

  const serverSideTable = useReactTable({
    data,
    columns,
    pageCount: controlledPageCount,
    state: {
      sorting,
      pagination,
    },
    onPaginationChange: setPagination,
    manualPagination: true,
    onSortingChange: setSorting,
    manualSorting: true,
    debugTable: true,
    getCoreRowModel: getCoreRowModel(),
    enableSorting: true,
    sortingFns,
  });

我在React Table中创建了一个表.我想在列和行上添加拖放功能？我怎样才能做到这一点 ？

这是我的CodeSandbox示例 - https://codesandbox.io/s/2wp7jk23kr

在这里,我有一个用于拖放行的Code Sandbox - https://codesandbox.io/s/1844xzjvp7

在这里,我有一个用于拖放列的Code Sandbox - https://codesandbox.io/s/5vxlnjrw1n

作为初学者在React中,我无法集成这三个沙盒.有人可以在CodeSandbox上找到一个关于如何在列和行上添加拖放功能的好例子.

请使用我的React Table数据列 - https://codesandbox.io/s/2wp7jk23kr

这就是我渲染表格主体的方式：

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

这就是我设置列的方式。我为每个单元格创建了独特的组件。

[
  {
    Header: "Main Header",
    Footer: "Foot",
    columns: [
      {
        Header: "Code",
        accessor: "NominalCode",
        Cell: (props) => {
          return <CodeCell>{props.cell.value}</CodeCell>;
        },
        Footer: () => {
          return <FooterTotalCell>Total</FooterTotalCell>;
        }
      },
      {
        Header: "Description",
        accessor: "Description",
        Cell: (props) => {
          return (
            <DescriptionCell country={props.row.values.Currency}>
              {String(props.cell.value)}
            </DescriptionCell>
          );
        },
        Footer: () => {
          return <td />; …

我已经使用 create-react-app 创建了应用程序。然后我安装了 react-table 包（使用命令 npm install --save react-table）。当我开始我的应用程序时，我发现找不到模块：无法解决“react-table/react-table.css”这个错误。

任何建议如何解决这个问题。提前致谢 ！

我目前正在尝试Tanstack Table，这是一个很棒的库！

我想做的是建立一个如下所示的表：

我的数据来自以下类型的 API：

type Accounting = {
  category: string;
  total: number; // Sum of all expenses
  expenses: {
    name: string;
    value: number;
  }[];
};

这是我到目前为止所得到的：

const columns = React.useMemo(
    () => [
      columnHelper.accessor("category", {
        header: "Category",
        id: "category",
        cell: (info) => {
          return (
            <>
              {info.row.getCanExpand() && (
                <button
                  {...{
                    onClick: info.row.getToggleExpandedHandler(),
                    style: { cursor: "pointer" },
                    className: "mr-2",
                  }}
                >
                  {info.row.getIsExpanded() ? (
                    <Chevron direction="down" />
                  ) : (
                    <Chevron direction="right" />
                  )}
                </button>
              )} …