Как я могу заставить заголовок столбца обернуть в виртуализированную реакцию?

У меня есть виртуализированная реакция Table с длинными заголовками столбцов, и я хочу, чтобы заголовки столбцов оборачивались, а не заканчивались многоточием. Кто-нибудь знает, как это сделать?

Для справки, вот пример кода:

makeTable = <AutoSizer>
    {({ width, height }) => (
        <Table ref={this.setTableRef.bind(this)}
            width={width}
            height={height}
            headerHeight={20}
            rowHeight={this._rowHeight.bind(this)}
            rowCount={this.props.reportRows.length}
            rowGetter={this._rowGetter.bind(this)}
            rowClassName={this._rowClassName.bind(this)}
        >
            <Column
                label='Super Long Column Header Name of Longness'
                dataKey='testCase'
                width={150}
                flexGrow={1}
                cellRenderer={this._testCaseCellRenderer.bind(this)}

            />

[truncated the code above]

Как видите, это label мне нужно обернуть, но ни один стиль, который я применяю, не работает, будь то Column или CSS. Помощь? Спасибо!


person R. Senterfeit    schedule 07.09.2017    source источник


Ответы (1)


Я предполагаю, что вы включаете стили, указанные в react-virtualized? Для контекста, стиль применяется в этой строке в свою таблицу стилей.

Похоже, className жестко введен при загрузке рендеринг по умолчанию, поэтому вам нужно либо переопределить этот стиль своим собственным стилем с тем же именем, либо определить свой собственный стиль, который каким-то образом может применить стиль к этому элементу с более высокой специфичностью CSS, либо, чрезмерно, определить свой собственный headerRenderer который Column предоставляет способ сделать .

Просто FYI - естественно, react-virtualized определенным образом имеет множество своих компонентов, и его адаптивный аспект также верен. Я бы порекомендовал поиграть на их детской площадке через CSS в Chrome Dev. инструменты, поэтому, если удаление оболочки ведет себя так, как ожидалось, а это не так, вы можете увидеть, что вам может потребоваться изменить.

person aug    schedule 07.09.2017
comment
Спасибо!! Я не переопределял CSS правильно, но это сработало (хотя форматирование в комментариях странное): .ReactVirtualized__Table .ReactVirtualized__Table__headerTruncatedText { display: inline-block; max-width: 100%; white-space: normal; overflow: visible; } - person R. Senterfeit; 08.09.2017
comment
Просто чтобы добавить к тому, что сказал @aug: Обычно react-virtualized устанавливает только функциональные стили (например, положение, ширину / высоту и т. Д.). Table - это компонент only с презентационными стилями, которые хранятся в отдельном файле CSS, который вы можете загрузить (или нет) в зависимости от того, хотите ли вы их. Если вы хотите сделать что-то свое с заголовками Table, лучше всего просто создать вилку таблицы стилей по умолчанию и изменять ее до тех пор, пока она вам не понравится. - person bvaughn; 08.09.2017