react-bootstrap-table — форматирование — высота строки, обтекание текстом

Я работаю с таблицей react-bootstrap, и у меня возникают проблемы с ее форматированием. Основные проблемы:

  • заголовки с длинными именами должны быть представлены 2 строками текста, вместо них одна и "..." как на картинке ниже: введите здесь описание изображения

  • Более того, я никак не мог задать высоту одной строки таблицы. Каждый текст имеет большой отступ, поэтому таблица не слишком сжата: введите здесь описание изображения

И код идет сюда:

<BootstrapTable
   data={this.props.sales}
   version="4"
   striped
   hover
   pagination
   keyField="Type"
>
  {tableHeaders.map((header, index) => (
     <TableHeaderColumn key={index} dataField={header.id} style={{ height: 10 }}>
        {header.name}
     </TableHeaderColumn>
  ))}
</BootstrapTable>

reactjs css react-bootstrap-table
person jake-ferguson    schedule 16.08.2018    source источник
comment
это проблема css с переполнением текста   -  person madalinivascu    schedule 16.08.2018
comment
осмотрите элемент. перейдите в стиль класса css. вы можете найти такой код... text-overflow: ellipsis; переполнение: скрыто; пробел: nowrap; просто удали их из css и все   -  person anil sidhu    schedule 16.08.2018
comment
и дайте мне знать, если все еще сталкиваетесь с проблемой   -  person anil sidhu    schedule 16.08.2018

Ответы (1)


arrow_upward
5
arrow_downward

Согласно документам, вы можете выполнить все необходимые настройки.

Первая проблема: чтобы удалить точки, вы можете использовать свойство thStyle, которое вы можете передать компоненту TableHeaderColumn и переопределить свойство CSS white-space.

<TableHeaderColumn thStyle={{ whiteSpace: 'normal' }} {...anotherProps} />

Вторая проблема: вы можете управлять высотой строки, используя свойство trClassName. Вы можете передать строку или функцию для обработки каждой из них или сделать условный класс зависимым от строки. Подробнее см. здесь.

Например:

<BootstrapTable trClassName="customClass" {...anotherProps} />

И определите свой customClass:

.customClass {
    // override padding or height whatever you want 
    padding: 3px;
}

Удачи и приятного времяпровождения!

person Denys Kotsur    schedule 16.08.2018
comment
Спасибо, обе проблемы решены. Всем, кто борется со вторым случаем - мы должны использовать свойство line-height - person jake-ferguson; 17.08.2018