react-data-grid - React データ グリッドは、常に最後の数列に値を表示するとは限りません

Question

画面サイズが小さいほど、値を持たない列が多くなります。画面の幅を手動で (ドラッグして大きくしたり小さくしたりして) 調整するとすぐに、すべての値が表示されます。これはバグのようです。値が表示されているセルと値が表示されていない隣接セルにhtmlがどのように表示されるかを示す2枚の写真を添付し​​ました。

1 つのセルに値が表示され、次のセルに値が表示されない| ウィンドウサイズをドラッグする前に

getGridProps: ->
    { budgets } = @props.profile
    rowHeight = headerHeight = 35
    extraHeightToPreventScrollBar = 10
    rowsCount = budgets?.length ? 0

    columns: @getColumns()
    rowGetter: (i) =>
        budgetRows = @getBudgetRows()
        budgetRows[i]
    rowsCount: rowsCount
    minHeight: rowsCount * rowHeight + headerHeight + extraHeightToPreventScrollBar
    enableCellSelect: not @state.tableDisabled
    onGridRowsUpdated: @handleGridRowsUpdated


getColumns: ->
    cols = [{ key: 'year', name: 'Year', editable: false, width: 70 }]
    for month in MONTHS
        cols.push
            key: month
            name: month
            editable: not @state.tableDisabled
            formatter: FormattedCell
    cols.push
        key: 'total'
        name: 'Total'
        editable: false
        formatter: FormattedCell
    cols.push
        key: 'trash'
        name: ''
        editable: false
        formatter: getTrashCan @removeBudget, @state.tableDisabled
        width: 50

    cols

getBudgetRows: ->
    { budgets } = @props.profile
    _.map budgets, (monthlyBudgets) ->
        row = { year: monthlyBudgets.year }
        for month, monthIdx in MONTHS
            row[month] = monthlyBudgets.budgets[monthIdx] ? '' # ReactDataGrid cannot take null, convert to ''
        row.total = Util.getBudgetsTotal monthlyBudgets ? ''
        row.trash = monthlyBudgets.year
        row