标签: react-table

我有一个带有页面的反应表，可以与我一起向集合中添加新数据，但是当添加数据时，它总是将当前页面重置为 0。有没有某种方法可以保存当前所选页面的当前状态？根据我从一个同事那里得到的代码，我无法弄清楚我需要更改什么才能使其不继续重置页面索引。

我的表代码如下所示

function Table({ columns, data }) {
    const filterTypes = React.useMemo(
        () => ({
            // Add a new fuzzyTextFilterFn filter type.
            fuzzyText: fuzzyTextFilterFn,
            // Or, override the default text filter to use
            // "startWith"
            text: (rows, id, filterValue) => {
                return rows.filter(row => {
                    const rowValue = row.values[id]
                    return rowValue !== undefined
                        ? String(rowValue)
                            .toLowerCase()
                            .startsWith(String(filterValue).toLowerCase())
                        : true
                })
            },
        }),
        []
    )

    const defaultColumn = React.useMemo(
        () => ({
            // Let's set up our default Filter UI …

我使用其属性向表列列表中添加了 4 个自定义列Cell；每行中的每一列都包含一个复选框，用于更改表数据状态中的特定属性；它的数据状态结构是这样的：

export type dataTypes = {
    id: number;
    getAccess: boolean;
    insertAccess: boolean;
    editAccess: boolean;
    deleteAccess: boolean;
}[];

当复选框修改表的数据状态（也关于表的过滤器和排序）时，我不希望react-table （v7.7.0）分页重置到其第一页。

有人知道吗？

我想向我的React项目添加一些复杂的表。我做了一些研究，发现这react-table是最好的选择之一。我安装了最新版本v8.5.13，但是当我查看文档时，所有示例都是使用TypeScript. 我不太熟悉TypeScript，我的问题是：有没有可能的方法来实现最新版本的react-tablewithout TypeScript？如果是，请提供一些例子。

我是表的新手。是否可以在分页模式下设置默认页面。是否有某种道具可以解决这个问题？F.ex. 装入组件后，我想在第5页上打开表格。谢谢！

我正在使用react-table但我有 2 个值要加入一个单元格中。有谁知道如何做到这一点？

假设我有这个示例代码，现在它有“名字”作为名字和姓氏的组合。

如果在我的数据库中按名字和姓氏分开会发生什么。我怎么能在这里的 ui 中将它们连接在一起（我知道我可以在 db 级别执行此操作，但这只是一个示例）

import ReactTable from 'react-table'

render() {
  const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
      name: 'Jason Maurer',
      age: 23,
    }
  },{
    ...
  }]

  const columns = [{
    Header: 'Name',
    accessor: 'name' // String-based value accessors!
  }, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  }, {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Friend Name', …

我正在尝试显示一个显示一些数据的表，但是我的数据来自后端，区分大小写，但是我不希望这样，因此，react-table sort default忽略大小写，我想使用该排序算法可以在组件安装时对数据进行排序，但是在文档中我找不到一些相关信息，因此我尝试使用“功能渲染”，但没有成功。

<ReactTable data={data} columns={columns}>
  {(state, makeTable, instance) => {
   instance.sortData()
   return makeTable()
  }
</ReactTable>

我正在使用React Table模块，并且试图利用传递给组件的数据字段moment显示更好的日期格式。created_atReactTable

let columns = [{
  id: "createdAt",
  Header: "Created",
  accessor: a => <Fragment>{moment(a.created_at).format("MM DD YYYY")}</Fragment>
}];

但是由于某种原因，它会因错误而抱怨

TypeError：Object（...）不是一个函数

指向这条线。

如果我只是这样做a.created_at，它将正常显示。该模块肯定是导入的。

我正在使用React Table，我需要根据我的数据长度动态设置表行。这就是我得到的：

let pgSize = (data.length > 10) ? 5 : data.length;


 <ReactTable
                data={data} 
                PaginationComponent={Pagination}
                columns={[
                  {
                    columns: [
                     //column defs
                    ]
                  }
                ]}
                defaultPageSize={10}
                pageSize={pgSize}
                className="-striped -highlight"
              />

我需要行是动态的，但是如果我将pagesize设置为数据的长度。分页被删除，如果我有100行数据，这将是一个问题。我最多需要10个默认页面大小。我似乎无法理解这样做的逻辑。

谢谢您的帮助！

1 [我试图将分页的z-index更改为0，这是行不通的]

这是指向我的代码框的链接：请检查最后选择的下拉列表，它位于分页后面。

https://codesandbox.io/s/jolly-chandrasekhar-uim6k

我正在尝试迁移到 react-table 版本 7 https://www.npmjs.com/package/react-table。我现有的代码有一个回调，onSortedChange但我不知道如何使用新版本 7 钩子复制它。

版本 6 格式：

<ReactTable
  onSortedChange={myCallbackFn}
/>

版本 7：

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
} = useTable(
    {
        columns,
        data,
        defaultColumn,
        filterTypes
    },
    useFilters,
    useSortBy
);
...

感谢任何建议！