标签: react-table

有没有办法在react-table的页脚部分自定义文本？

我正在尝试自定义默认文本.提前致谢.

我正在尝试在我的应用程序中使用'react-table'库.我不确定我做错了什么,但表中的所有元素都垂直显示在左侧,而不是网格中.这发生在我的应用程序中,所以我尝试创建一个新的应用程序来显示这个表.

我一字一句地复制了这个例子:这里唯一的区别是我硬编码了两条记录的数据.

这是页面显示的内容:

Name
Info
Stats
First Name
Last Name
Age
Status
Visits
Bret
Till
33
spoken for
4

是否存在一些内联或其他内容的CSS问题？我是新的反应,甚至更糟糕的CSS.我确实记得添加这个导入:

import "react-table/react-table.css";

这是一个说明问题的最小回购:

反应表-最小回购

我正在使用 React Table（React Bootstrap Table-2）在页面中显示一个表，并用来自数据库 API 的数据填充它。我想让其中一列中的值显示为链接（hrefs）。此特定列仅包含 URL。我想要实现的是，如果我点击每一行的 url("show report") - 它应该打开一个带有相应行 ID 的新选项卡。如何在 React Bootstrap Table-2 中实现这一点？

我试过：

{
datafield : "report",
text : "Show report",
accessor : "link",
Cell : (e) => <a href={e.value}> {e.value} </a>
},

{
datafield : "report",
text : "Show report",
accessor : "link",
Cell : (e) => <a href={e.value}> {e.value} </a>
},

我正在尝试在我的 React 表中实现日期范围过滤器。当我更改开始或结束日期时，它会触发过滤功能，创建最小和最大日期，但当它完成时，不会过滤任何日期，并且输入从所选日期开始为空。这是我的代码：

const ChartData = () => {
const columns = React.useMemo(
() => [
  {
    Header: "Date",
    columns: [
      {
        Header: "Date",
        accessor: "date",
        id: "date",
        Filter: chartFilter.DateRangeColumnFilter,
        filter: "between"
      }
    ]
  }
],
[]
);

const data = React.useMemo(() => dummyData(100000), []);

return (
   <div className={classes.tableWrapper}>
      <Table columns={columns} data={data} />
   </div>
 );
};
export default ChartData;

过滤页面：

  export function DateRangeColumnFilter({
     column: { filterValue = [], preFilteredRows, setFilter, id }
     }) {
     const [min, max] = React.useMemo(() => …

提前感谢您的帮助。

我试图解决的问题是使用react-table v7创建一个表，并在该表中使用展开并显示另一个表，其中包含与图像中附加的第一个选择相关的数据。

这是图像的codesandbox示例，我想做同样的事情，但使用最新版本的react-table，我尝试使用子组件，但这些只向我显示数据，而不是它们具有的标题，因此我无法执行排序、子表内搜索

我尝试在子组件内渲染反应表的另一个实例，但看起来它始终保留在第一列中：

有谁有一个看起来像参考图像中的示例可以帮助我吗？

我在以前的版本中看到您可以使用以下方式访问它：

const columns = [
  {
    Header: "Name",
    accessor: "name",
    Cell: (e) => {
      return e.original.name;
    }
  }
];

但在 v7 中它不起作用。

我有一个反应表，我想删除或修改我的数据。我的所有单元格的代码如下。

    deleteTableElement = (row) => {
        let data = this.state.list.data;
        data.splice(row.id, 1);
        this.setState({
            list:{
                ...this.state.list,
                data:data
            }
        })
    };

    actionsCell = (columns) => {
        columns.push({
            Header: "Accion",
            Cell: (props) => {
                console.log(props);
                return (
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "space-around",
                        }}
                    >
                        <i
                            onClick={() => this.deleteTableElement(props.row)}
                            className="material-icons"
                            style={{ color: "red", cursor: "pointer" }}
                        >
                            delete
                        </i>
                    </div>
                );
            },
        });
        return columns;
    };

在这种情况下，我想修改该项目。反应表没有更新。

我正在寻找一种简单而干净的方法来使所有行在使用react-table v7时自动扩展。

当我将所有数据映射到true并将其设置为初始状态时，它不会扩展我的行。

const expanded = {
  1: true,
  2: true,
  ...
};

...

useTable(
  {
    ...
    initialState: {
      expanded
    }
  }
);

通过转储表状态expanded道具，我发现生成了非数字键，例如{Col1:somevalue2: true}（分组列）。在创建表实例之前，我无权访问这些键，因此我也无权访问行 id 来生成初始状态。

我发现的唯一方法如下，但我更喜欢最初扩展 tableInstance （作为useTable()钩子的结果）。

React.useEffect(() => tableInstance.toggleAllRowsExpanded(true), []);

相关Github FR讨论：https://github.com/tannerlinsley/react-table/discussions/3317

我对react-table v8过滤器的实现进行了稍微修改：https://tanstack.com/table/v8/docs/examples/react/filters

在原文中，他们似乎使用自定义过滤器函数来全局过滤表，但它需要另一个我不想包含的库，文档对此不是很清楚，但似乎有我想要的内置函数可以使用：https ://tanstack.com/table/v8/docs/api/features/filters

然而，一旦我更改表格，它就会停止过滤，我尝试不包括globalFilterFn并将其设置为globalFilterFn: "includesString"我提到的内置函数之一，但到目前为止没有任何效果。

这是我的代码：

import React from "react";
import ReactDOM from "react-dom/client";

import "./index.css";

import {
  useReactTable,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  FilterFn,
  ColumnDef,
  flexRender
} from "@tanstack/react-table";

//import { RankingInfo, rankItem } from "@tanstack/match-sorter-utils";

import { makeData, Person } from "./makeData";

/* declare module "@tanstack/table-core" {
  interface FilterMeta {
    itemRank: RankingInfo;
  }
}

const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
  // Rank the item
  const itemRank = rankItem(row.getValue(columnId), …

我正在将一个反应表重建为 v8，其中一个单元格是一个功能组件，它根据 Id 值显示状态。

我的 Status 组件定义如下：

function Status({ id }) {
  const [status, setStatus] = useState("pending");
  useEffect(() => {
    getApi(`/status/${id}`).then((stat) => {
      setStatus(stat);
    });
  }, []);
  return status == "pending" ? (
    <p>Pending</p>
  ) : (
    <p>{status}</p>
  );
}

该列的定义如下：

columnHelper.accessor("id", {
      header: () => "Latest Status",
      cell: (info) =>  <Status id={info.getValue()} />

为了渲染单元格，我使用 FlexRender

flexRender(cell.column.columnDef.cell,cell.getContext())

这样，当单元呈现时，我只得到“待处理”，即使 API 提供了响应，组件上的状态也不会更新。

我在 React-Table v7 上使用了相同的概念，cell.render("Cell")并且它按预期工作。