#css #drop-down-menu #react-select #react-table
Вопрос:
Я использую react-table для отображения большого количества данных, включая некоторые ячейки, которые должны быть раскрывающимися меню со стилизованными элементами (например, цветными строками). Я использую react-select для этого, но параметры выбора имеют длинные имена, которые сжимаются в зависимости от ширины ячейки.
На скриншоте ниже вы можете видеть, что раскрывающееся меню очень узкое; я бы хотел, чтобы оно заполнялось горизонтально (как пунктирные красные линии), вырываясь из своего контейнера. Демо: https://codesandbox.io/s/codesandboxer-example-forked-0td2w (Я не использовал react-table здесь, просто несколько узких коробок, но идея та же.)
Я просто хочу, чтобы каждый вариант занимал одну строку. Есть ли какой-нибудь способ сделать это?
Я попробовал пример из официальной react-select документации (https://react-select.com/advanced#experimental), а именно Popout компонент, который они называют «популярным рецептом использования select при ограниченном количестве недвижимости». Это не сработало: раскрывающееся меню все еще было сжато внутри ячейки, и это на самом деле усугубляло ситуацию, так как при нажатии на элемент увеличивалась вся высота строки.
Я думал о написании пользовательского модального компонента, но у этого есть свои сложности, и я бы предпочел не делать этого, если есть простое решение каким-то образом. Или есть хорошая альтернатива react-select ?