标签: react-table

如果单元格中有两个值，如何对列进行排序？

columnHelper.accessor('violations', {
  id: 'violations',
  header: () => <p>Violations</p>,
  cell: (info) => (
    <div>
      <p>{info.getValue().count}</p>
      <p>{info.getValue().percent}%</p>
    </div>
  ),
}),

如果有办法的话，能否提供一个实现的例子？

我使用tanstack 的 react-table v8创建了一个可重用的表组件。我现在尝试通过 tanstack 来实现react-virtual到这个可重用的表。我使用“@tanstack/react-virtual”：“^3.0.0-beta.54”和“@tanstack/react-table”：“^8.9.2”。我在网上找不到任何集成这两个库最新版本的示例。有人可以帮我解决这个问题吗？

import type { ReactElement } from "react";
import { useRef } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeaderCell,
  TableRow,
} from "./style";
import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import type { ColumnDef } from "@tanstack/react-table";
import { useVirtualizer } from "@tanstack/react-virtual";

interface TableProps {
  columns: Array<ColumnDef<any, string>>;
  data: any;
}

function CustomTable(props: TableProps): ReactElement {
  const { columns, data } = props;
  const parentRef = useRef<HTMLTableElement>(null);

  const …

我已经完成了基于实时可调整大小的容器来更改pageSize的工作：在更改页面之前，它可以很好地工作。

更改页面后，如果减小容器的高度，则表格的高度不能低于更改页面时的高度。

换句话说，当我更改页面时（例如，从第1页更改为第2页），假设高度为360px，带有约12行，如果我走得更高，则会平滑地“添加” 360px行，但是当我低于360px时，桌子的高度不再改变。

注意：更改页面之前，所有操作均正常进行。

export default class Table extends React.Component {

  constructor() {
    ...
  }

  componentWillReceiveProps(newProps) {
    if (this.props.y != newProps.y) {
      // size row
      let rowHeight = 32.88;
      // size resizable panel
      let panelHeight = newProps.y;
      // size of the extra y of the table (header + footer)
      let extraTable = 27 + (this.props.x < 650 ? 75 : 45);
      // setting pageSize of the table
      this.setState({pageSize: parseInt((panelHeight - extraTable) / rowHeight)});
    }
  }

  render() {
    return ( …

我正在使用反应表 包和它的表。

在表格列道具中，我提交了对象，因为它的格式正确。

    Header: 'Charter',
      columns: [
          {
              Header: 'Title',
              accessor: 'charter_title',
              style: {
                  textAlign: 'center'
              }
          }
      ]
    }

我想要做的是将此列值格式化为货币

即 10000.53 将是 10,000.53

即 1230000.123 将是 1,230,000.123

react-table是否让您有机会进行这种格式化？

是否有用于反应的表组件，当浏览器滚动条滚动它的长主体时，该组件具有固定的标题？（表的高度随着用户单击“加载更多”而增加）。这是一个代码示例：https : //codesandbox.io/s/rm0x6lmypm 表头在浏览器滚动时应保持静态。

我需要将默认样式更改为下面的样式

我正在使用react-table创建可过滤的表，但是我想用自己想要的方式对其进行样式设置。我应该直接在node_modules应用程序中更改它，还是应该创建自己的CSS文件并覆盖动态检查元素？

CodeSandBox：https ://codesandbox.io/embed/react-table-editable-content-ggvcy

当尝试处理 React-table 的输入时，我的输入失去焦点，所以我一次只能输入 1 个字符。

如何修复渲染周期以允许输入？

编辑：我不小心用代码的工作版本更新了沙箱，尽管它还有另一个错误：如何在刷新更新期间捕获反应事件由于焦点在模糊变化？

我正在使用 react-table v7 ( https://www.npmjs.com/package/react-table ) 。我能够过滤数据（从https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering引用）并且我正在对所有要过滤的列使用 SelectColumnFilter 函数。我想创建一个按钮来重置所有过滤器。就像如果我通过单击“重置所有”按钮将过滤器应用于 4 列，我希望清除所有过滤器。有人可以帮我解决这个问题吗？谢谢

我正在尝试使用 react-table 实现分页。在大多数教程中，我们从这个开始：

const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        page,
        prepareRow,
        visibleColumns,
        canPreviousPage,
        canNextPage,
        pageOptions,
        pageCount,
        gotoPage,
        nextPage,
        previousPage,
        setPageSize,
        state: { pageIndex, pageSize },
    } = useTable(
        {
            columns,
            data,
            defaultColumn: { Filter: DefaultColumnFilter },
            initialState: { pageIndex: 0, pageSize: 10 },
        },

就我而言，我的 IDE 说，属性：page、canPreviousPage、canNextPage、pageOptions、pageCount、gotoPage、nextPage、previousPage、setPageSize

“TableInstance{}”类型不存在。

在 www 进行了大量研究后，我找不到这些属性不在 TableInstance 中的原因。如何在没有这些属性的情况下使用分页，或者有没有办法让它工作？

我期待每一个答案