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

Question

嗨，我有一个反应表...其中显示了一些数值数据，我似乎无法弄清楚如何减少列中的空白..我尝试过的事情。

我已覆盖

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'}}
    }

Answer 1

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

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

CodeSandbox上的完整示例：