如何在没有单元格的情况下呈现 header 行并展开子行 react-table

Question

我正在使用 react-table v7。我有这样的设计。但我不知道如何在没有单元格的情况下自定义行，它仍然能够扩展。请告诉我该怎么做。太感谢了。

Answer 1

我找到了解决方案。使用customTableCell传给useTable，然后可以注入css，甚至可以隐藏或显示value

customTableCell 组件：

  const customTableCell = ({
    cell, column,
    cell: { value },
    column: { isError },
  }) => {
    const isSubRow = cell?.row?.depth !== 0
    const isShowHeader = column?.showHeaderExpand
    const isShowValue = (isShowHeader || isSubRow)
    return (
      <div className='cursor-pointer text-left' onClick={() => isSubRow && alert(value)}>
        {value == undefined ? (
          <span className="error">N/A</span>
        ) : (
          <span
            className={[isError && isError(value) ? "error" : "", isShowValue ? 'cell-with-value' : 'cell-no-value']
              .join(" ")
              .trim()}
          >
            {isShowValue && value}
            {isShowHeader && !isSubRow && <Tag> {cell?.row?.subRows?.length}</Tag>}
          </span>
        )}
      </div>
    );
  };

你的table:

 const defaultColumn = useMemo(
    () => ({
      Filter: DefaultColumnFilter,
      Cell: customTableCell || TableCell,   // <= this line
      Header: DefaultHeader,
    }),
    []
  );

  const instance = useTable(
    {
      columns,
      data: data || [zeroStateData],
      defaultColumn,                     // <= this line
      disableMultiSort: true,
      initialState: {
        pageIndex: paginationOptionState?.page - 1 || 0,
        pageSize: paginationOptionState?.pageSize || 25,
        hiddenColumns: columns.filter(column => !column?.isVisible).map(column => column.accessor),
        sortBy: columns.filter(column => typeof column?.isSortedDesc === 'boolean').map(column => ({ id: column.accessor, desc: column?.isSortedDesc })),
      },
      ...optionsUseTable
    },
    ...hooks
  );

如何在没有单元格的情况下呈现 header 行并展开子行 react-table

How to render header row without cell and expand subrow react-table

reactjs

react-table

react-table-v7