Пример таблицы дизайна Ant с изменяемыми размерами столбцов и столбцами перетаскивания?
Я пытаюсь реализовать столбцы с изменяемым размером и перетаскиванием в компоненте таблицы Ant Design.
У меня оба работают независимо, но я не могу заставить их работать без ошибок или ошибок одновременно. Мне нужно иметь возможность перетаскивать границу столбца и изменять ее размер по горизонтали, а также иметь возможность щелкнуть заголовок столбца и перетащить его.
Я ищу, чтобы эти функции были похожи на функции этой таблицы: https://www.ag-grid.com/example.php
Я попытался реализовать его с помощью с изменяемым размером для столбцов с изменяемым размером и обоих react-sortable-hoc и response-drag-listview для порядка перетаскивания столбцов.
С помощью response-drag-listview последняя проблема заключается в том, что я должен отключить одну функцию при использовании другой, а в Firefox это приводит к ошибке:
Неперехваченная ошибка типа: target.parentNode
Я не могу найти примеров использования обеих этих функций вместе с таблицей Ant D, но я уверен, что должна быть возможность заставить их работать одновременно.
компонент reactjs перетаскиваемый и изменяемый размер
в течение последних нескольких часов я пытался найти способ сделать компонент react перетаскиваемым и изменяемым. Я нашел способ сделать его перетаскиваемым с react перетаскивание, но я не могу найти простой способ сделать его изменяемым :/ Есть ли у кого-нибудь опыт в том, как сделать компонент перетаскиваемым и изменяемым?
любая помощь или указатели!
3 ответов
использование react-grid-layout для решения этой проблемы. Специально для виджета планирования, где пользователи могут масштабировать временные блоки и перетаскивать их по горизонтальной временной шкале.
react-grid-layout предоставляет сетку с перетаскиваемыми и изменяемыми виджетами, а также адаптивный макет, дополнительную автоматическую упаковку и другие функции.
дочерние узлы можно перетаскивать и изменять размер. Макет, определенный в каждом дочернем «_grid» prop, может быть также определен непосредственно на Родительский» макет » prop:
функции обратного вызова могут быть переданы компонентов в качестве реквизита. Подключение к ним должно позволить вам определить любое пользовательское поведение:
Столбец с изменяемым размером в таблице материалов React
Я довольно долго работал над таблицей материалов и искал различные варианты, в которых я мог бы предоставить функциональность перетаскивания столбца для регулировки ширины, но безуспешно.
Я довольно много гуглил о том, как я могу добиться этой функциональности в ответ, но безуспешно.
Мне удалось найти другие таблицы, но все мои модули построены на таблице материалов.
Я предоставил ссылку для перетаскивания в angular, но я работаю над реакцией, и я не смог найти ничего в таблице материалов для реакции.
Здесь нет кода, так как я ничего не нашел на нем. Доступны только статические значения ширины, поскольку это условие не использовалось.
Дайте мне знать, как я могу включить предоставленный пример в реакцию, есть ли какой-либо рабочий пример, возможно ли это или нет.
Итак, я обнаружил, что на их странице GitHub есть упоминание о столбце с изменяемым размером, выбрав true в параметрах, но это еще не работает для меня.