reactjs - 如何减少反应表/反应复选框表中的特定行高

Question

我正在使用带有复选框属性的 React 表，并希望降低默认的 React 表行高，以便 20 行可以放入表中。

一段代码：

列定义结构：

function getColumns() {
  const columns = [
    { Header: "From", accessor: "senderID" },
    { Header: "To", accessor: "receiverID" },
    { Header: "Transaction File", accessor: "fileName" },
    { Header: "Transaction Date", accessor: "transationDate" },
    { Header: "Record Count", accessor: "recordCount" },
    { Header: "Status", accessor: "status" }
  ];
  return columns;
}

我的表如下所示。而不是 5 到 6 行想要在相同的布局上设置 20 行：

标签： reactjs

Answer 1

尝试在 ReactTable 组件的 getTdProps 属性中添加样式。

<ReactTable
         columns={cData}
         data={data}
         getTdProps={(state, rowInfo, column) => ({
              style: {
                height: '20px',
              },
          })}
          minRows={20}
  />