标签: react-table

Header: "Delete",
id:'delete',
accessor: str => "delete",

Cell: (row)=> (
<span onClick={(row) => this.onRemoveHandler(row,props)} style={{cursor:'pointer',color:'blue',textDecoration:'underline'}}>
    Delete
</span>
)

React Table 这与标题删除跨度链接相关。代码片段显示了使用超链接渲染删除标签。

在这里，一旦用户单击删除链接，我如何获取该特定行的 ID。ID 已分配给 json 数据中的所有行。那么，如何在onClick函数内部传递cellInfo或rowInfo。

我的反应表中有一个列使用变量（命名项）来显示其数据。如下代码所示：

{
  Header: this.generateHeaderCell(this.props.headers[3]),
  accessor: 'last_updated_status',
  Cell: (props: any) => <DateSinceFormat date={props.value} item={item}/>,
  maxWidth: 85,
  filterable: false
}

因此，当变量item的值为1 时，它会显示一些数据，而当它更改时，它会显示其他数据。

我正在使用 onClick 事件来更改item的值。

onRowClick = (state, rowInfo, column, instance) => {
    return {
        onClick: e => {
            if(item === '2') {
                item = '1';
            } else {
                item = '2';
            }
            instance.forceUpdate();
        }
    };
}

我在这里面临的问题是，我只想更新用户单击的特定行的值，但是现在所有行都在更新。

请在这里帮助我并让我知道如何解决这个问题。

我正在使用该react-table库创建一个包含可过滤列的表。该表的格式如下：

const defaultFilter = [{
  id: 'title',
  value: '',
}];

const ExampleTable = ({ documents, filter = defaultFilter }) => {
  const columns = [
    {
      accessor: 'title',
      filterable: true,
      id: 'title',
      width: 375,
      Cell: props => {
        return (
          <div>
            { props.value }
          </div>
        );
      },
      Filter: ({ filter, onChange }) => (
        <input
          onChange={ event => onChange(event.target.value) }
          style={ { width: '100%' } }
          placeholder={ 'Enter Filter' }
          value={ filter ? filter.value : '' }
        /> …

使用react-table V7 useSortBy钩子的toggleSortBy函数首先切换升序，然后降序，然后在第三次切换时设置isSortedDesc为false，而不是设置isSorted为false。

我想继续在true和false值之间切换，直到单击不同的标题。

检查此链接以获取问题参考

我正在尝试使用React-Table和 Hook useResizeColumns来实现调整大小功能。我想强制表格始终占据其容器的整个宽度。只有列应该改变它们的大小。不是桌子。如果您看一下我在这里制作的这个示例。(Codesandbox) 您可以轻松调整列的大小以超过红色容器。由于某种原因，如果您最小化列大小，表格将始终适合容器！

我不明白这里的行为。有任何想法吗 ？非常感谢。

我正在使用 构建一个表react-table，但 TypeScript 抱怨我添加到columns. 我columns的设置如下：

const columns = useMemo(
    () => [
      {
        Header: 'Name',
        accessor: 'name',
        className: '[some classes here]',
        isSortable: true,
      },
    ...

我像这样渲染表格：

<tr {...headerGroup.getHeaderGroupProps()}>
  {headerGroup.headers.map(column => {
    const getHeaderPropsArgs = [{ className: column.className }];
    if (column.isSortable) getHeaderPropsArgs.push(column.getSortByToggleProps());
    return (
      <th {...column.getHeaderProps(getHeaderPropsArgs)}>
        <div>
          {column.render('Header')}
          {column.isSortable ? <SortIcon isSorted={column.isSorted} isSortedDesc={column.isSortedDesc} /> : null}
        </div>
      </th>
    );

换句话说，我的一些列是可排序的，对于这些列，我SortIcon在标题中呈现一个自定义组件。某些列具有与其关联的类，我将它们getHeaderProps与指令一起添加到使列可排序或不可排序。

TypeScript 抱怨我添加的这两个属性columns：

Property 'className' does not exist on type …

我在使用 webpack 构建时遇到问题。这是我在构建时看到的错误...

ERROR in ./node_modules/react-table/src/publicUtils.js 10:35
Module parse failed: Unexpected token (10:35)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export const defaultRenderer = ({ value = '' }) => value;
> export const emptyRenderer = () => <>&nbsp;</>;
| 
| export const defaultColumn = {
 @ ./node_modules/react-table/src/plugin-hooks/useRowSelect.js 3:0-9:23 14:0-25 15:0-29 16:0-25 17:0-33 96:22-34 103:22-47 110:22-51 141:22-47 178:22-55 235:2-19 277:35-47 279:2-24 281:23-48 286:30-59 …

我正在使用 React-Table 构建一个动态表，我想添加一行新的可编辑单元格。\n目前我可以添加新行，但只有当我按下全局编辑按钮时我才能编辑它，而不是我想要首先添加一行可编辑的行。\n这是我的代码 -

主要成分

function StyledTable() {\n  useEffect(() => {\n    dispatch(getData(mokeJsonData));\n  }, []);\n  const [datatoColumns] = useState(columnDataaa.slice(1));\n  const [skipPageReset, setSkipPageReset] = useState(false);\n  const data = useSelector((state) => state.dataReducer.data);\n  const dispatch = useDispatch();\n\n  const columns = useMemo( \n    () => [\n      {\n        Header: "",\n        id: "expander", \n        Cell2: ({ row }) => { \n          return (\n            <span {...row.getToggleRowExpandedProps()}>  \n              {row.isExpanded ? "-" : "+"}\n            </span>\n          );\n        },\n        Cell: () => {\n          return <div></div>;\n        },\n      },\n      {\n        Header: columnDataaa[0].Header,\n …

我想知道有必要在反应表中使用 useMemo 来获取列和数据，如果是的话，为什么会这样？

这是我的代码：

import React, { useMemo } from "react";
import useData from "../../hooks/useData";
import Table from "./Table";

import Loader from "../../assets/imgs/loader.svg";

const TableSection = React.memo(({ query, isOpen }) => {
  const { data, runtime, error } = useData(query);

  const column =
    data.length > 0 &&
    Object.keys(data[0]).map((key) => {
      const result = data[0][key]
        .replace(/([A-Z]+)/g, " $1")
        .replace(/([A-Z][a-z])/g, " $1");
      return {
        Header: result,
        accessor: key,
      };
    });
  const columns = useMemo(() => column, [column]);
  const queryData = useMemo(() => …

Apply当我单击（从下拉列表中应用所有选定的选项）或Cancel按钮（重置选定的选项）时，我无法进行多重交叉过滤。例如按taste和进行过滤availability（请参见图片）。但我无法呈现过滤后的行/更新的表。

export default function MenuDisplay() {
  const { menuId } = useParams();
  const { match } = JsonData;
  const [selected, setSelected] = useState({});
  const [hidden, setHidden] = useState({});
  const [taste, setTaste] = useState([
    { label: "Good", value: "Good", name: "Good", selected: false },
    { label: "Medium", value: "Medium", name: "Medium", selected: false },
    { label: "Bad", value: "Bad", name: "Bad", selected: false }
  ]);

  const [comments, setComments] = useState([
    { label: "0", value: …