修复 react-table useTable 行的高度

Question

我很难尝试使用 useTable API 设置 react-table 的高度。

如代码所示，我试图在此处强制行高为 30：

{...row.getRowProps({ style: { height: 30 } })}

但是当一个单元格的内容大于 30px 时，整个高度会被扩大。如何强制高度保持在 30px？

import React from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
import { useTable, useSortBy } from "react-table";
import * as colors from "styles/variables/colors";

const TH = styled.th`
  margin: 0;
  padding: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  font-weight: normal;
  font-size: 1.2rem;
`;
const TR = styled.tr`
  cursor: ${props => props.hasClick && "pointer"};
  border-bottom: 1px solid ${colors.grey15};
  background: ${props => props.groupRow && colors.grey10};
  &:hover {
    background: ${props =>
      !props.selectedRow && props.hasClick && colors.grey10};
  }
`;
const HeaderRow = styled.tr`
  height: ${props => props.isTablet && 45}px;
  background-color: ${colors.grey15};
  font-weight: normal;
`;
const HeaderText = styled.div`
  height: 25px;
  display: flex;
  align-items: center;
  border-bottom: ${props =>
    props.isSortedDesc && `2px solid ${colors.mossgreen}`};
  border-top: ${props =>
    props.isSorted && !props.isSortedDesc && `2px solid ${colors.mossgreen}`};
`;
const Styles = styled.div`
  overflow: hidden;
  overflow-y: auto;
  height: 100%;
  margin-top: 8px;
  table {
    border-spacing: 0;
    border: 0;
    width: 100%;

    th,
    td {
      margin: 0;
      padding: 0.3rem;
      font-size: 14px;
    }
  }
`;

const NoData = styled.div`
  width: 100%;
  padding: 16px;
`;

const Table = ({
  columns,
  data,
  onRowClick,
  compact,
  selectedRow,
  selectedRowKey,
  isTablet,
  itemSize
}) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    rows
  } = useTable(
    {
      columns,
      data
    },
    useSortBy
  );
  console.log("...getTableBodyProps()", getTableBodyProps());
  console.log("itemSize", itemSize);
  return (
    <Styles itemSize={itemSize} compact={compact}>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup, hgi) => (
            <HeaderRow
              key={`header-row-${hgi}`}
              isTablet={isTablet}
              {...headerGroup.getHeaderGroupProps()}
            >
              {headerGroup.headers.map((column, ci) => {
                const { width } = columns[ci];
                return (
                  <TH
                    key={`header-column-${ci}`}
                    {...column.getHeaderProps(column.getSortByToggleProps())}
                    style={width && { width: `${width}%` }}
                  >
                    <HeaderText
                      compact={compact}
                      isSorted={column.isSorted}
                      isSortedDesc={column.isSortedDesc}
                    >
                      {column.render("Header")}
                    </HeaderText>
                  </TH>
                );
              })}
            </HeaderRow>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row);
            return (
              <TR
                key={`body-row-${i}`}
                groupRow={row.original.grouped}
                onClick={() => onRowClick && onRowClick(row.original)}
                {...row.getRowProps({ style: { height: 30 } })}
                selectedRow={
                  selectedRow &&
                  selectedRow[selectedRowKey] === row.original[selectedRowKey]
                }
              >
                {row.cells.map((cell, ci) => {
                  return (
                    <td
                      style={{
                        width: `${columns[ci].width}%`,
                        display: "flex"
                      }}
                      key={`body-row-column-${ci}`}
                      {...cell.getCellProps()}
                    >
                      <div id={`table-${cell.column.id}--${i}`}>
                        {cell.render("Cell")}
                      </div>
                    </td>
                  );
                })}
              </TR>
            );
          })}
        </tbody>
      </table>
      {!rows.length && <NoData>No data</NoData>}
    </Styles>
  );
};
export default Table;
Table.propTypes = {
  columns: PropTypes.array.isRequired,
  data: PropTypes.array.isRequired,
  onRowClick: PropTypes.func,
  compact: PropTypes.bool,
  selectedRow: PropTypes.object,
  selectedRowKey: PropTypes.string.isRequired
};

Answer 1

我知道这是一个老问题，但只是想分享我对 React-Table 中列宽的经验，以防万一。列上的width 本质上充当minWidth 值，我认为这是因为将 flex 应用于容器的方式。例如，列能够增长到超过基于 flex-grow 提供的 width 值，但它永远不会低于 width 值。

如果height 也是这种情况，那么在您的行上使用相同值的height 和maxHeight 应该可以解决问题。