标签: react-table

let {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    nextPage,
    previousPage,
    state: { pageIndex, sortBy }
  } = useTable(
    {
      columns,
      data,
      sortable: {dsiabledSort}
      manualPagination: true,
      manualSortBy: true
    },
    useSortBy,
    usePagination
  );

dsiabledSort 是变量，它可以是 false 或 true，它设置为 true，但表仍然有排序...我也尝试过简单

sortable:false

但还是不行

任何帮助谢谢

有人可以向我解释为什么我不能在First Name列上设置固定宽度吗？它的设置是通过宽度但它会破坏整个表格.如果你修改大小(通过鼠标)列将出现其他列.这是由于flebox？我不熟悉flexbox.

var ReactTable = ReactTable.default
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          columns={[
            {
              Header: "Name",
              columns: [
                {
                  width:'50',
                  Header: "First Name",
                  accessor: "firstName"
                },
                {
                  Header: "Last Name",
                  id: "lastName",
                  accessor: d => d.lastName
                }
              ]
            },
            {
              Header: "Info",
              columns: [
                {
                  Header: "Age",
                  accessor: "age"
                },
                {
                  Header: "Status",
                  accessor: "status"
                } …

在他们的npm 页面上，示例显示了<ReactTable>组件的用法：

import ReactTable from 'react-table'
...
render() {
  return (
    <ReactTable
      data={data}
      columns={columns}
    />
  )
}

但是，在他们的API 文档和示例中，他们都使用useTable.

import { useTable } from 'react-table';

function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  })

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup …

我使用https://react-table.js.org/#/story/readme来显示来自服务器响应的表.但对于长度较长的列数据,它显示省略号.我没有找到包装它的方法,因此显示完整的数据.

在文档中,他们提到style道具,但我无法弄明白.我试过下面,但它没有用.

<ReactTable
    data={respDataArr}
    columns={columns}
    style={{overflow:'wrap'}}
/>

有人可以建议我应该做些什么改变？

我在我的应用程序中使用react-table.

我被困在做一两件事,即改变CSS的columns同时,一列正在调整.

目前,当您resize的列只cursor更改时.我想要的是添加border到selected column.

我搜索了这对SO和google也.但找不到任何有用的东西.在文档中也没有提到关于这个主题的内容.

更新

现在,我可以在调整大小时拖动列时添加边框.我可以通过添加和删除类来实现.

我这样做了:

为className创建了一个var的状态:

  this.state = {
         addBorder: null
   }

在我的专栏中传递了这个类名:

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

我正在尝试使用 react-table 包（https://www.npmjs.com/package/react-table#example）在数据中添加一个组件

使用包自述文件中的示例，我尝试使用一个花哨的组件将图像添加到单元格：使用 ** 在代码中跳出......我也尝试过：

imageUrl:{<PlaceholderImage width={60} textColor="#fff" text="Image"/>}

例子：

import ReactTable from 'react-table'
import 'react-table/react-table.css'
**import { PlaceholderImage } from 'react-placeholder-image'**

render() {
  const data = [{
    name: 'Tanner Linsley',
    age: 26,
**imageUrl:<PlaceholderImage width={60} textColor="#fff" text="Image"/>,**
    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!
  }, { …

如何设置材质 UI 表格标题的样式？

也许像使用 useStyle 添加类之类的东西。

<TableHead >
            <TableRow >
                <TableCell hover>Dessert (100g serving)</TableCell>
                <TableCell align="right">Calories</TableCell>
                <TableCell align="right">Fat&nbsp;(g)</TableCell>
                <TableCell align="right">Carbs&nbsp;(g)</TableCell>
                <TableCell align="right">Protein&nbsp;(g)</TableCell>
            </TableRow>
</TableHead>

我想为表头添加样式

所以我有一个带有 useTable 的 JavaScript 类。在Java脚本中它的使用如下

import {useTable, useFilters,useAsyncDebounce,useSortBy,usePagination,} from "react-table";

const {getTableProps,getTableBodyProps, headerGroups, page,prepareRow,state,visibleColumns, nextPage,pageOptions,pageCount,previousPage,canPreviousPage,canNextPage,setPageSize,gotoPage
      } = useTable({columns,data,defaultColumn,filterTypes,initialState: { pageSize: 10, pageIndex: 0 }
       },useFilters, useSortBy,usePagination);

我正在将我的 javascript 项目转换为 typescript。

在打字稿中，该useTable行给出了错误。

例子 ：Property 'page' does not exist on type 'TableInstance<object>'.ts(2339)

该initialState属性给出了我的以下错误

Type '{ pageSize: number; pageIndex: number; }' is not assignable to type 'Partial<TableState<object>>'.
  Object literal may only specify known properties, and 'pageSize' does not exist in type 'Partial<TableState<object>>'.ts(2322)
index.d.ts(172, 5): The expected type comes …

我将需要一个服务器端表，所以在我react-table在 github 上看到9k+ 星后决定使用它，我正在尝试构建一个 React-Table，它可以轮询远程服务器的每个请求数据以获取最新数据。所以在示例中，我确实使用了 jsonplaceholder 我请求了数据 func 工作，它将获取我过滤的数据排序pageSize，pageIndex（https://jsonplaceholder.typicode.com/posts?_start={pageIndex will come here}&_limit={pageSize will come here}...排序和过滤的数据）我该怎么做？谢谢你。

下面我写了一些代码但没有很好的编码抱歉

//Table.js
import React, { useState, useEffect } from 'react';
import { useTable, useFilters, useSortBy, usePagination } from 'react-table';

export default function Table({ columns, data, pages, onFetchData, loading, pageCount: controlledPageCount, error }) {
    const [ filterInput, setFilterInput ] = useState('');
    // Use the state and functions returned from useTable to build your UI
    const {
        getTableProps,
        getTableBodyProps, …

我是反应表的新手。我正在尝试实现服务器端分页，但我没有获得有关如何检测新 react-table 版本中页面更改的逻辑。我正在正确使用获取数据我无法检测到更改。每次单击“下一步”按钮时，我都应该能够以 20 为增量更改 API 端点中的偏移值以获取新数据。我无法执行此操作。请帮忙。

import React, { useEffect, useState, useMemo } from 'react'
import { URLs } from "../../../Config/url";
import cookie from 'react-cookies';
import "./OrderManagementScreen.css"
import { useTable, usePagination, useSortBy } from 'react-table';
import styled from 'styled-components';


const Styles = styled.div`
padding: 1rem;

table {
  border-spacing: 0;
  border: 1px solid lightgray;
  width: 100%;
  text-align: "center" !important;

  tr {
    :last-child {
      td {
        border-bottom: 0;
        text-align: "center" !important;
      }
    }
  }
  th {
    padding: 3px;
    box-shadow: 0px 5px …