标签: react-table

我正在使用 带有--highlight className的react-table来高亮显示悬停的表行.我想自定义突出显示的行的CSS,但我找不到合适的类,我需要覆盖,所以这样做.有帮助吗？

你好，我正在使用 React Table。这是我的演示沙箱 - https://codesandbox.io/embed/vq60okkz20?codemirror=1

我想获取单击的单元格 div 的行索引。我有两列，其中的单元格有一个可点击的 div。我想获取这些单元格的行索引

我正在使用反应表 6.9.2。我希望能够在顶部（标题正下方）添加一行，显示每列的总计。

这是我的函数，仅输出一个包含静态值的表：

function App() {
  const data = [
    {
      one: 2,
      two: 10.4,
      three: 10.1,
      four: 54,
      five: 5,
      six: 5,
      seven: 10,
      eight: 10,
      nine: 10
    },
    {
      one: 1,
      two: 10.4,
      three: 10.1,
      four: 54,
      five: 5,
      six: 5,
      seven: 10,
      eight: 10,
      nine: 10
    }
  ];
  return (
    <div className="App">
      <ReactTable
        data={data}
        showPagination={false}
        columns={[
          {
            Header: "Sales Overview",
            columns: [
              {
                Header: "one",
                id: "one",
                accessor: "one",
                show: true
              },
              {
                Header: "two",
                accessor: "two", …

我正在使用 React-Table，并且尝试设置td列元素的 className，但 React-Table 似乎只允许 className 的字符串和变量，而不是条件样式。

我使用三元语句根据值是正数还是负数来选择 className，但 React-Table 不喜欢我的语法。

{
        Header: "24h Change",
        id: "market_cap_change_percentage_24h",
        className: {coin => coin.market_cap_change_percentage_24h > 0 ? "positive" : "negative"},
        accessor: coin =>
          coin.market_cap_change_percentage_24h == null
            ? coin.market_cap_change_percentage_24h
            : coin.market_cap_change_percentage_24h.toFixed(2) + "%"
      }

我努力了：

className: {coin.market_cap_change_percentage_24h > 0 ? "positive" : "negative"}

这：

className: {market_cap_change_percentage_24h > 0 ? "positive" : "negative"}

甚至这个：

className={market_cap_change_percentage_24h > 0 ? "positive" : "negative"}

还有许多其他变体...

它告诉我存在语法错误并且不允许我编译。我认为我的处理方式完全错误，在阅读了 React-Table 的文档后，我仍然不确定如何解决它。任何帮助将非常感激。

我在react-table中有10行值。我需要转换为PDF格式吗？.ss是否可以转换？

我正在尝试根据教程将 react-table 与 useRowSelect 一起使用。我有一个 REST 应用程序正在运行，/associate但无法弄清楚如何"selectedFlatRows[].original"从表中获取数据。以一种形式使用两个表也会使事情复杂化。

function App() {
  //...

  function handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    fetch('/associate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: data,
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <Styles>
        <Table columns={tcsColumns} data={tcsList} />
        <Table columns={planColumns} data={planList} />
        <br />
        <button>Associate!</button>
      </Styles>
    </form>
  );
}

如何访问我的两个表的数据？

从今天早上开始，我们遇到了以下问题，在构建最新的 node_modules 之后：

**methods.js?ab36:59 Uncaught (in promise) TypeError: 无法读取未定义的属性“forEach”

在 ReactTable.getDataModel (methods.js?ab36:59)

我正在实现一个包含服务器端分页的 react-table 组件，我也需要对列进行排序。

但是，我正在观察奇怪的行为。当我只使用分页并单击下一页时，pageIndex它会增加。

但是，当我添加排序挂钩时，然后分页不起作用。该pageIndex自动又回到了1，我无法弄清楚它为什么。

谁能帮我吗。下面是沙箱链接https://codesandbox.io/s/eager-breeze-9cw0r。

尝试将基本表函数导入到我的下一个应用程序中。由于某种原因，它不会加载到索引中，即使它是一个示例输出并且应该确实有效！

// Layouts\nimport Layout from "../components/Layout/Layout";\n// import Table from "../components/Visualization/Table";\nimport ReactTable from "react-table";   \n\n\n\nexport default function LandingPage() {\n\n\n  \n  return (\n    <Layout>\n\n      <div className="container mx-auto pt-32">\n        <h1>\n          G\xc3\xb6del!\n        </h1>\n        <div>REAL-ESTATE PRESCIENCE - THE BEST INVESTMENT YOU\'VE EVER MADE.</div>\n        <ReactTable  \n                  data=  {[{  \n                    name: \'Ayaan\',  \n                    age: 26  \n                    },{  \n                     name: \'Ahana\',  \n                     age: 22  \n                     },{  \n                     name: \'Peter\',  \n                     age: 40      \n                     },{  \n                     name: \'Virat\',  \n                     age: 30  \n                     },{  \n                     name: \'Rohit\',  \n                     age: …

需要选择所有行而不使用表 API 中可用的复选框触发器。我想将此触发器放入一个单独的组件中，而不是文档中的组件，其中表列之一是全选触发器。

沙盒游乐场：https://codesandbox.io/s/test-select-all-button-toggle-33c3g ?file=/src/App.js

尝试检查文档https://react-table-omega.vercel.app/docs/api/useRowSelect#instance-properties上的选项可能是一个很好的指针，但我还没有弄清楚如何将其付诸实践。

并将其放入组件中，如下所示：

<IconHolder
  onClick={toggleAllRows} //trigger select all rows here
>
  <Text>
    <Icon
      actionIcon
      name={true ? "ok-circled2" : "circle-thin"}
      color={globalColors.purple}
      size={20}
    />{" "}
    Select All
  </Text>
</IconHolder>