反应表如何减少列中的空白答案

【问题标题】：react table how to reduce white space in columns反应表如何减少列中的空白
【发布时间】：2018-12-26 18:34:02
【问题描述】：

您好，我有一个反应表……它显示了一些数字数据，我似乎无法弄清楚如何减少列中的空格……我尝试过的事情。

我已经覆盖了

getTheadThProps, getTdProps with 

    const tightStyle = () => {
      return {
        style : {
          paddingTop : '0px',
          paddingBottom : '0px',
          paddingLeft:'0px',
          paddingRight:'0px',
          fontSize: 'x-small',
          padding: '0',
          margin: '0'
        }
      }
    }

还用

覆盖列中的getProps

const tightCell = (state, rowInfo, column) => {
      return { style : {color : 'red', fontWeight : 'bold', padding : '0', margin :  '0'}}
    }

【问题讨论】：

请显示实际呈现表格的代码。
嗨 Ryan C 这是一个例子codepen.io/AmitChopra123/pen/ZVJRop?editors=1111 我想要的是在列中的文本周围几乎没有空格。更改宽度属性似乎有奇怪的结果。

标签： reactjs react-table

【解决方案1】：

react-table 的默认列最小宽度为 100px。您需要覆盖此设置。

import { ReactTableDefaults } from "react-table";
var columnSettings = {
  ...ReactTableDefaults.column,
  minWidth: 20
};
...
 <ReactTable
    column={columnSettings}

CodeSandbox 上的完整示例：

【讨论】：