标签: react-table

我有一个reactjs应用程序，我在其中使用react-table 。表格按钮的文本（“下一页”、“第 x 页，共 y 页”等）是英文的，我没有看到任何本地化选项。有这方面的API吗？或者我应该挂钩这些元素并自己实现它？

这是我所指的图标的链接。表格标题顶部的黑线。

您好，我在问题中嵌入了一个链接，但我试图弄清楚如何切换 React-table 库的排序图标的颜色。我尝试使用

.sort-asc {
    color: green;
}  

以及相反的情况

.sort-desc {
    color: green;
}  

但它所做的只是改变整个表格标题的颜色，而不仅仅是图标。我尝试在内部检查器中闲逛，但也无法以这种方式访问​​图标。

任何帮助将不胜感激。先感谢您。

所以我使用react-table库来显示一个带有模拟数据的树形网格表，但它看起来并不像它应该的那样，它表明表上有一个项目。

import React, { Component } from 'react';
import ReactTable from "react-table";
import 'react-table/react-table.css'

export default class TestTable extends Component {

    state = {
        data: [{
                actionNo: "1",
                action: "--",
                productService: "Mobile Contract",
                qty: 1,
                startDate: Date.now(),
                endDate: Date.now(),
                account: 11111111,
                mobileNo: 9111111,
                amount: "--",
                status: "Error"
            }]
    }
    render() {
        const { data } = this.state;
        console.log(data);

        const columns = [{
            Header: 'Action No.',
            accessor: 'actionNo'
        }, {
            Header: 'Action',
            accessor: 'action',
        }, {
            acessor: 'productService',
            Header: …

我正在研究反应表中的过滤器方法的实现。如果我添加filterable属性，它会在所有列中为我提供过滤器输入，但我不想在特定列中添加过滤器输入。

对此有什么解决办法吗？

我正在尝试创建这个在使用 map() 函数时运行良好的按钮：

{bands.events.map((group, i) => (
                <tr key={i}>
                  <td>{group.start}</td>
                  <td>
                    {" "}
                    <button value={group.name} onClick={props.handleClickGroup}>
                      {group.name}
                    </button>
                  </td>
                </tr>
              ))}

但是，现在我想使用 react-table 按时间顺序过滤日期并启用其他功能，但是我似乎找不到添加此按钮并打印出按钮元素内本地 json 数据的方法。这是我的代码：

import React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

var bands = require("../festivals/bands.json");

const FestivalTable = props => {
  const columns = [
    {
      width: 200,
      Header: "Time",
      accessor: "start"
    },
    {
      width: 300,
      Header: "Artist Name",
      accessor: "name",
      Cell: cell => (
        <button value={cell.accessor} onClick={props.handleClickGroup}>
          {cell.accessor}
        </button>
      )
    }
  ];

  return ( …

我正在尝试使用 URL 作为表中另一个字段的超链接。

ticketurl和ticketid是我的 JSON 响应中的两个不同的名称值对。我正在尝试显示ticketid，这是指向 的超链接ticketurl：

数据是json数组

[
  {  
    "index": 2,
    "empId": "ammy",
    "requestorId": null,
    "profile": "a",
    "request": "b",
    "ticketId": "abc-12345",
    "createdTime": "2019-07-07 18:01:15.0",
    "updatedTime": "2019-07-07 18:56:26.0",
    "statusurl": "www.xyz.com",
    "ticketurl": "www.abc.com",
    "status": "Open",
    "description": "The issue is open"
  }
]

<ReactTable
  data={data}
  columns={[
    {
      columns: [
        {
          Header: "Employee Id",
          accessor: "empId"
        },
        {
          Header: "Requestor Id",
          accessor: "requestorId"
        },
        {
          Header: "Profile",
          accessor: "profile"
        },
        {
          Header: "Request",
          accessor: "request"
        }, …

我对 React、函数式编程、Javascript 和 JSX 还很陌生，所以如果这是一个愚蠢的问题，请简单点。

我正在修改react-table v7 中的示例material-ui 表之一。原始代码可以在这里找到。该示例功能齐全，并且使用 React Hooks 而不是类，我正在使用的模板的所有组件也是如此（向 Creative-tim.com 致敬！）

我的父函数（代表仪表板应用程序中的页面），例如 Users.js 或 Stations.js 从 useEffect 挂钩内的后端 api 获取数据。然后，该数据作为 props 传递给我的子组件 ReactTables.js

由于某种原因，在父页面的 useEffect 完成后，ReactTables.js 不会收到对“data”属性的更改。但是，一旦我修改 ReactTables 子组件（在本例中为 AddAlarmDialog.js）中的数据，表就会重新呈现，并且我的所有数据都会突然出现。

当父组件的 useEffect 返回数据时，如何触发子组件的重新渲染？我注意到在旧版本的 React 中，有一个名为 componentWillReceiveProps() 的生命周期函数。这是我需要在这里效仿的行为吗？

父组件示例 (Alarms.js)：

import React, { useEffect, useState } from "react";
// @material-ui/core components

// components and whatnot
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

import ReactTables from "../../components/Table/ReactTables";

import { server } from "../../variables/sitevars.js";

export default function …

TL/DR：想要使用react-table（带钩子的v7）悬停标题时显示工具提示。

我正在尝试使用新的 ReactTable 库为在 React 中创建的表创建一个简单的工具提示。我不知道如何将 ReactTable 导入 Stackoverflow 代码片段，但这里是该库的 npm 页面中示例表的分叉版本。我正在尝试修改此表以获得正确的工具提示标题。在此代码沙箱中，在创建数组App.js的位置columns，我已将以下tipText键添加到列中：

const columns = React.useMemo(
  () => [
    {
      Header: 'Name',
      columns: [
        {
          Header: 'First Name',
          accessor: 'firstName',
          tipText: 'Text for the First Name tooltip'
        },
        {
          Header: 'Last Name',
          accessor: 'lastName',
          tipText: 'Text for the Last Name tooltip'
        },
      ],
    },{
      ...

...这样我就可以tipText在渲染表格时使用来显示工具提示。我还更改了<thead>元素渲染，以包含 的类th以及要显示的工具提示的跨度：

<thead>
  {headerGroups.map(headerGroup => (
    <tr {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map(column => …

我正在使用react-table 7.0.4（https://www.npmjs.com/package/react-table）。我想在第一次加载表时对“状态”列（“leaveRequestStatus”）应用默认过滤器（过滤器是一个下拉列表）。我尝试像这样使用“defaultFiltered”，但不起作用，既没有在下拉列表中选择“Pending”选项，也没有过滤数据，

const columns = React.useMemo(() => [
{
  Header: 'Status',
  accessor: 'leaveRequestStatus',
  id: 'leaveRequestStatus',
  Filter: SelectColumnFilter,
  filter: 'includes',
},
....

<Table columns={columns} data={data} defaultFiltered={[{id:'leaveRequestStatus', value:'Pending'}]} />

还有其他方法可以做到这一点吗？谢谢。

我正在为我的项目创建一个网格，我需要在其中实现列过滤。我已经完成了大部分工作，但面临一个问题，那就是每当我单击 ID 列的过滤器输入框时，该列就会被排序。我尝试过使用，e.stopPropagation()但这不起作用。

我的代码库的工作副本可以在https://4hz20.csb.app/找到，代码可以在https://codesandbox.io/s/data-table-forked-4hz20找到

ColumnFilter.js

import React from "react";
import styled from "styled-components";

const Input = styled.input`
  width: 144px;
  margin: 8px 0;
  padding: 12px;
  border: solid 1px #c2c3c9;
  background-color: #ffffff;
`;

export const ColumnFilter = ({ column }) => {
  const { filterValue, setFilter } = column;
  return (
    <Input
      value={filterValue || ""}
      onChange={(e) => {
        e.stopPropagation();
        setFilter(e.target.value);
        return false;
      }}
      placeholder="Search"
    />
  );
};

另外我正在使用manualFilters: true,manualSortBy: true因为manualPagination: true我想在服务器端处理它们，但手动排序和手动过滤似乎不能一起工作，请参阅 …