Как изменить CSS столбцов — ReactTable
Я застрял в том, чтобы сделать одно, то есть изменить CSS of columns при изменении размера столбца.
В настоящее время, когда вы resize , изменяется только столбец cursor . Я хочу добавить border в selected column .
Я искал это на SO и google . Но не нашел ничего полезного. И в документации также ничего не говорится об этой теме.
Обновление
Теперь я могу добавить границу при перетаскивании столбца при изменении размера. Я могу сделать это, добавив и удалив класс.
Что я сделал для этого:
Создал var в состоянии для className:
Пропустил это имя класса в моей колонке:
Чтобы удалить класс при перетаскивании, выполните следующие действия:
Но я все еще не могу добавить границу при наведении.
Теперь я отправляю свой собственный HTML-код в заголовках заголовков. И в моем HTML я сделал дополнительный div. И я переместил этот div вправо. И при зависании этого div, я испускаю события мыши и изменяю CSS соответственно.
Но существующий div в заголовке, который отвечает за изменение размера столбца, перекрывает мой Div.
Как изменить ширину таблицы при перетаскивании react
I have a react-table and I am trying to change the column size. I’ve tried editing the «width» value within the columns, editing the values in the scss stylesheet, and adding inline styling, but nothing is working. Where do I make css changes to this react-table ? Any help would be appreciated. Any example I see changes it within the column area as I’ve tried.
Here in the stylesheet.
3 Answers 3
You need to use a layout hook (useBlockLayout, useAbsoluteLayout or useFlexLayout) so the specified width is applied. Important: all those hooks set a default column width to 150px.
You can see an example for react-table v8 in React Example: Column Sizing and for v7 in Full Width Resizable Table.
If you don’t want to use a layout hook, you can use getHeaderProps and getCellProps according to your needs, acessing minWidth and width values:
Try this: You can style rows, cells, columns in the same way (it’s known as prop getter pattern)
In your code: search for . column.getHeaderProps()
Pass an object with style to column.getHeaderProps() & you can also add more props if required along with style:
In above code, getColumnStyle(column) is my custom function where I return style for that particular column.
Material React Table
Material React Table let's you easily change the default widths (sizes) of columns, and has a built-in column resizing draggable handle feature.
Relevant Props
Relevant Column Options
Relevant State
Change Default Column Widths
Column Size
This was also covered in the Data Columns Guide, but we'll cover it again here.
You can change the width of any column by setting its size option on the column definition. minSize and maxSize are also available to enforce limits during resizing.
You may notice however, that the columns may be not change their size as much as you would expect. This is because the browser treats <th> and <td> elements differently with in a <table> element by default.
You can improve this slightly by changing the table layout to fixed instead of the default auto in the muiTableProps .
The Columns will still try to increase their width to take up the full width of the table, but the columns that do have a defined size will have their width respected more.
For further reading on how table-layout fixed vs auto works, we recommend this blog post by CSS-Tricks.
Default Column
By default, columns will have these size properties defined:
You can modify the default column widths by setting the defaultColumn prop on the table.
Enable Column Resizing Feature
enableColumnResizing is the boolean prop that enables the column resizing feature.
You can disable specific columns from being resizable by setting the enableResizing column option to false in their respective column definition.
When Column Resizing is enabled, a CSS table-layout: fixed style is automatically added to the <table> element in order to make the browser respect the widths of the columns more.
Column Resize Mode
The default columnResizeMode is onEnd , which means that the column resizing will only occur after the user has finished dragging the column resize handle and released their mouse. You can change the columnResizeMode to onChange to make the column resizing occur immediately as the user drags the column resize handle.
Как изменить ширину таблицы при перетаскивании react
Таблицы в react
npm i selectable.js
Создаём drag-and-drop элементы на React
Droppable
Draggable
onDragEnd
- NumberGameContext : реализация DragDropContext .
- DroppableWrapper : реализация droppable.
- DraggableItemWrapper : реализация draggable.
- VerticalColumn : компонент, который инкапсулирует droppable-столбцы и draggable-элементы.
- DraggableListItems : компонент, инкапсулирующий все NumberBox-элементы.
- NumberBox : собственно, переносимый элемент.
How to create a resizable table in React
Now, add an invisible element at the end of each cell and create 2 functions:
- handleStart() : Saves the initial position of the mouse and the size of the cell.
- handleMove() : Calculates the difference in pixels between the end and initial position of the mouse and resizes the element accordingly.
The invisible element will be placed behind the table border and will activate the previous functions depending on the user’s behavior.
Here is the CSS:
Hi, I’m Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.
React: решение интересной практической задачи
В данном туториале я хочу поделиться с вами опытом решения одной интересной практической задачи.
Предположим, что у нас имеется страница сравнения товаров. На этой странице отображается слайдер с карточками товаров и таблица с их характеристиками. Задача состоит в том, чтобы синхронизировать переключение слайдов и прокрутку таблицы. Условия следующие:
- ширина таблицы должна соответствовать ширине слайдера;
- ширина колонки таблицы должна соответствовать ширине слайда;
- слайды можно переключать с помощью перетаскивания, нажатия на кнопки управления и элементы пагинации;
- таблицу можно прокручивать с помощью колесика мыши (на десктопе) и перемещения указателя (на телефоне);
- при взаимодействии пользователя с одним компонентом второй должен реагировать соответствующим образом: при переключении слайда должна выполняться прокрутка таблицы, при прокрутке таблицы — переключение слайдов.
Если вам это интересно, прошу под кат.
Подготовка и настройка проекта
Для работы с зависимостями я буду использовать Yarn. Проект будет реализован на React и TypeScript.
Создаем шаблон проекта с помощью Vite:
Переходим в созданную директорию, устанавливаем зависимости и запускаем сервер для разработки:
Для реализации слайдера будет использоваться библиотека Swiper (для синхронизации слайдера и таблицы мы будем использовать некоторые возможности, предоставляемые Swiper , поэтому в рамках туториала рекомендую использовать именно эту библиотеку). Устанавливаем ее:
Импортируем стили слайдера в файле main.tsx :
Определяем минимальные стили в файле index.css (файл App.css можно удалить):
Обратите внимание, что мы фиксируем ширину основного контейнера приложения ( .app ), поскольку хотим сосредоточится на синхронизации слайдера и таблицы (реализация отзывчивого дизайна потребует некоторых дополнительных вычислений).
Создаем файл types.ts следующего содержания:
Создаем файл data.ts следующего содержания:
У нас имеется массив, содержащий 6 объектов с информацией о товарах. Каждый объект товара содержит массив, состоящий из 6 объектов с характеристиками товара.
Создаем директорию components .
Начнем с разработки слайдера. Создаем файл components/Slider.tsx следующего содержания:
Импортируем и рендерим слайдер в файле App.tsx :
Теперь реализуем компонент таблицы. Создаем файл components/Table.tsx следующего содержания:
- мы оборачиваем таблицу с overflow: hidden в контейнер с overflow: scroll ( .table-wrapper );
- колонка с названием характеристики растягивается на всю ширину таблицы по количеству товаров (атрибут colspan ), а само название оборачивается в элемент span : при прокрутке таблицы название характеристики должно оставаться видимым.
Импортируем и рендерим таблицу в App.tsx :
Отлично, у нас есть все необходимые компоненты, можно приступать к их синхронизации.
Синхронизация ширины слайда и колонки таблицы
Определяем состояние ширины слайда в App.tsx :
Данное состояние будет обновляться в слайдере, а использоваться — в таблице:
Определяем переменную для хранения ссылки на экземпляр Swiper в Slider.tsx :
Тип TSwiper выглядит так:
Одним из пропов, принимаемых компонентом Swiper , является onSwiper . В качестве аргумента коллбэку этого пропа передается экземпляр Swiper :
Экземпляр Swiper содержит массу полезных свойств:
Интересующее нас значение ширины слайда содержится в свойстве slides[0].swiperSlideSize :
Проп onImageReady компонента Swiper принимает коллбэк для выполнения операций после загрузки всех изображений, используемых в слайдере, что в ряде случаев является критически важным для определения правильной ширины слайда:
Определяем функцию onImagesReady :
Применяем проп slideWidth в таблице с помощью встроенных стилей (в реальном приложении для этого, скорее всего, будет использоваться одно из решений CSS-in-JS , например, styled-jsx — см. конец статьи):
Синхронизация переключения слайдов и прокрутки таблицы: обработка переключения слайдов
Определяем состояние прокрутки в App.tsx :
Данное состояние, как и состояние ширины слайда, будет обновляться в слайдере, а использоваться — в таблице:
Проп onSlideChange компонента Swiper принимает коллбэк, позволяющий выполнять операции после переключения слайдов (любым способом):
Прежде чем определять функцию onSlideChange , взглянем на то, что происходит с элементом div с классом swiper-wrapper при переключении слайдов:
Видим, что к данному элементу применяется встроенный стиль transform: translate3d(x, y, z) , где x — интересующее нас значение прокрутки.
Функция onSlideChange выглядит следующим образом:
Для того, чтобы применить проп scrollLeft в таблице, необходимо сделать несколько вещей.
Определяем переменные для хранения ссылок на контейнер для таблицы и саму таблицу, а также переменную для хранения ссылок на элементы с названиями характеристик:
Передаем ссылки соответствующим элементам:
Собираем ссылки на элементы с названиями характеристик после рендеринга компонента:
Наконец, выполняем прокрутку таблицы и сдвиг по оси x названий характеристик при изменении значения scrollLeft :
Видим, что переключение слайдов перетаскиванием, нажатием кнопок управления и элементов пагинации приводит к прокрутке таблицы и сдвигу названий характеристик на правильные позиции.
Синхронизация переключения слайдов и прокрутки таблицы: обработка прокрутки таблицы
Определяем состояние отступа по оси x в App.tsx :
Данное состояние будет обновляться в таблице, а использоваться — в слайдере:
Как при прокрутке таблицы с помощью колесика мыши, так и с помощью перемещения указателя, на обертке для таблицы возникает событие scroll :
Определяем функцию onScroll :
Обратите внимание: обработка прокрутки должна выполняться с задержкой, поскольку установка свойства scrollLeft приводит к возникновению события scroll , что может заблокировать переключение слайдов и прокрутку таблицы:
- offsetX передается в слайдер и используется для переключения слайдов;
- в обработчике переключения слайдов происходит обновление scrollLeft ;
- scrollLeft используется для выполнения прокрутки таблицы — возникает событие scroll , в обработчике которого обновляется offsetX .
Также обратите внимание, что прокрутка должна выполняться мгновенно: установка стиля scroll-behavior: smooth или выполнение прокрутки с помощью метода scrollTo( ) сделает поведение прокрутки непредсказуемым.
Создаем файл hooks/useDebounce.ts следующего содержания:
Этот хук возвращает функцию, которая, независимо от количества запусков, вызывается только один раз по прошествии указанного времени:
Переходим к самой сложной части туториала.
Применение пропа offsetX в слайдере предполагает знание количества элементов пагинации, определение ближайшего к offsetX элемента и его программное нажатие.
Определяем переменные для хранения ссылок на элементы пагинации и их позиции по оси x :
Ссылки на элементы пагинации хранятся в свойстве pagination.bullets экземпляра Swiper . Для определения позиций элементов по оси x достаточно умножить индекс элемента на ширину слайда. Расширяем функцию onImagesReady :
Определяем эффект для выполнения программного нажатия на соответствующий элемент пагинации при изменении offsetX :
Обратите внимание: программное нажатие на элемент пагинации приводит к вызову onSlideChange , который обновляет scrollLeft , что приводит к выравниванию таблицы и названий характеристик.
Видим, что прокрутка таблицы с помощью колесика мыши или перемещения указателя приводит сначала к переключению слайда, а затем — к выравниванию таблицы и названий характеристик.
Обратите внимание: отсутствие задержки вызова onScroll сделает прокрутку более чем на один слайд за раз невозможной, т.е. прокрутка станет последовательной и пошаговой.
Обновление стилей в таблице можно упростить с помощью одного из решений CSS-in-JS , а именно: styled-jsx . Устанавливаем эту библиотеку:
Редактируем файл vite.config.ts :
Редактируем файл vite-env.d.ts :
Наконец, редактируем файл Table.tsx :
Мы также можем отрефакторить код слайдера, упростив процесс переключения слайдов в ответ на прокрутку таблицы. Экземпляр Swiper предоставляет метод slideTo , позволяющий программно прокручивать слайдер к указанному слайду. Следовательно, вместо позиций элементов пагинации по оси x нам необходимо знать позиции слайдов. Эти позиции содержатся в свойстве slidesGrid . Кроме того, как верно отметил yavoloh в комментарии, смещение слайдера по оси x можно извлекать из свойства translate . Редактируем файл Slider.tsx :
Уверен, что существуют и другие, возможно, даже более простые способы реализации синхронизации между слайдером и таблицей. Если у вас есть какие-то идеи на этот счет, делитесь ими в комментариях.
Пример таблицы дизайна Ant с изменяемыми размерами столбцов и столбцами перетаскивания?
Я пытаюсь реализовать столбцы с изменяемым размером и перетаскиванием в компоненте таблицы Ant Design.
У меня оба работают независимо, но я не могу заставить их работать без ошибок или ошибок одновременно. Мне нужно иметь возможность перетаскивать границу столбца и изменять ее размер по горизонтали, а также иметь возможность щелкнуть заголовок столбца и перетащить его.
Я ищу, чтобы эти функции были похожи на функции этой таблицы: https://www.ag-grid.com/example.php
Я попытался реализовать его с помощью с изменяемым размером для столбцов с изменяемым размером и обоих react-sortable-hoc и response-drag-listview для порядка перетаскивания столбцов.
С помощью response-drag-listview последняя проблема заключается в том, что я должен отключить одну функцию при использовании другой, а в Firefox это приводит к ошибке:
Неперехваченная ошибка типа: target.parentNode
Я не могу найти примеров использования обеих этих функций вместе с таблицей Ant D, но я уверен, что должна быть возможность заставить их работать одновременно.
Ant design — How to adjust table column width by dragging?
Is there any way to let users to adjust column width of Ant Design Table by drag and drop?
I found some examples that about is for column sorting, but not for column resizing.
Please help, thanks!
There is an official example of resizing table column now:
1 Answer 1
I have made a working sample — its far from perfect and needs a lot of optimization. Basically you need to use the onHeaderCell and capture onMouseDown , onMouseUp and onMouseMove .
onMouseMove we call setState and basically trigger a re-render with the new column width.
-
The Overflow Blog
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.3.11.43304
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.