Add `columnWidths` prop about react-dynamic-data-table HOT 12 CLOSED

@NilesB raised a point about what if the column widths go over 100 in total, luckily for us the widths get scaled, here's a demo.

from react-dynamic-data-table.

Have you considered what to do if you do not want to specify a column's width in the middle of the table?

Maybe something similar to the following.

<DynamicDataTable
    rows={this.state.users}
    columnWidths={[10, 50, null, 10]}
/>

from react-dynamic-data-table.

@dextermb I much prefer this object format. 👍

from react-dynamic-data-table.

Have you considered what to do if you do not want to specify a column's width in the middle of the table?

Maybe something similar to the following.

<DynamicDataTable
    rows={this.state.users}
    columnWidths={[10, 50, null, 10]}
/>

I do prefer the array option, with using null. But it's worth raising this:

<DynamicDataTable
    rows={this.state.users}
    columnWidths={{
        id: 10,
        name: 50,
    //  email: null
        address: 10
    }}
/>

from react-dynamic-data-table.

cc @NilesB @AlexCatch @wheatleyjj @JacobBrassington

from react-dynamic-data-table.

@dextermb I much prefer this object format. 👍

Definitely more functional.

from react-dynamic-data-table.

Firstly i am assuming that the key's of the object would correspond to the column name? Secondly would this be in px or %?

cc @dextermb @DivineOmega

from react-dynamic-data-table.

@JacobBrassington Column names is correct, and I believe @dextermb was intending the values to be percentages.

from react-dynamic-data-table.

Firstly i am assuming that the key's of the object would correspond to the column name? Secondly would this be in px or %?

cc @dextermb @DivineOmega

As <td width> has been deprecated, which I did not notice, a style attribute would have to be added, this would be in percentages.

from react-dynamic-data-table.

It may be a good idea to make the table have an overflow: scroll on on the x axis for incase the user enters total values over 100%.

from react-dynamic-data-table.

It may be a good idea to make the table have an overflow: scroll on on the x axis for incase the user enters total values over 100%.

We could do, but the default behaviour is that table cell widths scale. So if they go over 100% then it still works out the difference. Here's the demo I posted further up. Maybe we set the overflow as a prop

from react-dynamic-data-table.

@JacobBrassington That functionality could be provided as another prop either specific to this case, or via a general style prop.

from react-dynamic-data-table.