search

hyojin / material-ui-datatables

An another React Data tables component.
MIT License
165 stars 58 forks source link

Long text overlaps other columns #16

Closed advance512 closed 7 years ago

advance512 commented 7 years ago

Long text in one columns overflows the column and is drawn over the other columns. Anyway to prevent this?

hyojin commented 7 years ago

You can change styles in column settings. Try overflow: 'hidden' or you can set a column's width also,

{
  key: 'key',
  label: 'label',
  style: {
    overflow: 'hidden',
    width: 140,
  },
}
advance512 commented 7 years ago

Is there any way you can think of to have automatic column sizing (based on content), up to a maximum size?

hyojin commented 7 years ago

Hmm, I think if you don't set any width(include table tag), your columns size are set by the length of your contents as same as usual table tag. or you can change table-layout property. but the problem is that there is no way to overwrite table and it's wrapper's style now. Let me add some props.

advance512 commented 7 years ago

Not sure I get you. Is it possible NOW? Or do you need to add more props for it?

hyojin commented 7 years ago

It is possible NOW :) Please try 0.16.9. I've added 3 style props tableStyle, tableBodyStyle, tableWrapperStyle and what it does is the same as style, bodyStyle, wrapperStyle props in material-ui table component. So, for example, if you change tableStyle like this,

<DataTables
  ...
  tableStyle={{tableLayout: 'auto'}}
  ...

column size will be set by it's content size.

advance512 commented 7 years ago

Tried it - works nicely! Thank you :)

:+1: