Реагировать таблицы, как уменьшить пустое пространство в столбцах

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

реагирующая таблица имеет минимальную ширину столбца по умолчанию 100 пикселей.Вам нужно переопределить этот параметр.

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

Полный пример на CodeSandbox: