Виртуальный скролл больших таблиц на React
Вставка
- Опубліковано 28 вер 2024
- Виктор Карпов показывает как управляться с таблицами, в которых тысячи строк. Если рисовать их в лоб, то такое количество строк будет сильно тормозить интерфейс, но есть иное решение - виртуальный скролл! И на самом деле в реализации оно достаточно простое. Смотрим видос.
Ссылка на исходный код: codepen.io/vit...
Ютуб-канал Виктора: / viktorskarpov
Телеграм-канал Виктора: tlinks.run/codi...
⚛️⚛️⚛️
Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me.
Детали тут: makeweb.me/cou...
Телеграм для связи по курсу: @makewebchatme
🛍 🛍 🛍
Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru.
Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги).
💬 💬 💬
Присоединяйся к нашему Telegram-чату t.me/makewebme
⚛⚛⚛
Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me.
Детали тут: makeweb.me/course-js-fullstack-developer
Телеграм для связи по курсу: @makewebchatme
Интересно, но хотел бы добавить замечания:
1) У вас зачем-то объявляется useEffect чтобы подписаться на событие скролла и useRef для этого всего. Можно было тому диву просто написать onScroll={onScroll}
2) Раз уж вы делаете useEffect то ставьте зависимости после самого эффекта (в противном случае при каждом скролле вы получаете переподписку события)
3) Ваша функция onScroll определена вне useEffect (что норм если зависимостей нет, но в пункте 2 уже понятно почему в данном случае это не очень), а должна быть внутри эффекта как замыкание и в зависимости должен попасть rowHeight
Андрей Карушев спасибо, полезные замечания 👍
Спасибо за видео
Очень круто! спасибо. Столько много моментов смог доходчего объяснить. Подписка). Вот только не понятно почему на канале контент на англ и подписок мало но коллаборируете русскоязычное население).
Heretic Man на этом канале makewebme контент на русском и по веб-разработке, одно дело, а на моем канале - про алгоритмы и собесы в западные компании, поэтому на английском, другая аудитория. Хотя честно ролики там выходят не часто в последнее время.
Класс! Спасибо !
красава! Как раз необходимо подобное, а тут по полкам. Спасибо!
сколько времени у тебя ушло на реализацию данной задачи?
Данил Иванов полчаса. Задачка для собеседования, я как раз интересуюсь темой собеседований и много занимался этим, поэтому люблю такие задачки, которые укладываются в 45 минут (время одной секции).
Вообще реально интересный вариант, но гораздо веселее делать не отображение строки с начала а так, чтобы строка еще "резалась" если вдруг вы не очень сильно крутите мышкой. Так скролл смотрится натурально а не кирпично как в данном случае.
Андрей Карушев а что значит «резалась», сможете привести пример?
@@algoseekee ну после скролла нескольких строк может получится например не начало строки а середина или треть или любая другая часть
Есть баг при прокрутке вниз самой мышкой за ползунок, таблица пропадает.
glauder33 Отличное замечание, спасибо! При установке setStart, видимо, есть ошибка округление так что на самой последней строке мы получаем новый start больше чем может быть строк в таблице 😱 Быстрофикс - gist.github.com/vitkarpov/1020fcebfce3d10780d8de8be477359b , а-ля «не может быть start больше чем определённый предел по смыслу», но вообще любопытно что там происходит со scrollTop при скроле именно мышкой, улетает куда-то.
очень крутое видео! хороший формат и тема актуальная и полезная)
Если при количестве строк больше 1000, и количестве видимых строк 3-5, быстро потянуть за скролл вниз и дотянуть до низу - проявляется баг - в фрейме таблицы пропадает контент и высота верхнего div растет не переставая.
Обусловлено такое медленным пересчетом индексов.
Как выход из положения надо заранее назначить 0 высоте нижнего div
let troubleconst = 2;
function getBottomHeight() {
return getTopHeight() > (data.length - visibleRows - troubleconst) * rowHeight ? 0 : rowHeight * (data.length - start - visibleRows);
}
А индекс ячейки тоже не очень хороший получился, скажем первая строка и 10 ячейка имеют одинаковый индекс с 11 строкой и нулевой ячейкой. Не сложно исправить написав rowIndex + '-' + colIndex но лучше переходить на шаблонные строки
Шикардос!
Забрал в корзинку решений для моей будущей CRMки!
сложить индексы строки и колонки не достаточно, у тебя будет 1+11 === 11+1
Спасибо большое за видео. На работе пишу на Vue и столкнулся с проблемой больших данных. Был рад наткнуться на это видео
Мое глубочайшее почтение!
интереснее был бы пример, когда высота строки таблицы может быть произвольной
Alexey Baranov высоту строки можно задать в пропсах компонента. Если высота строк может быть разной и заранее неизвестной - скорее всего, это уже не таблица.
Супер полезно, спасибо!
уверен что код на чистом js пишется на реакте?🤔
Если это соответствует цели, то пишется
Благодарю за отличное видео! Очень помогло в разработке таблиц. Небольшая доработка: При скролле вверх в браузере Safari в самой верхней точке пропадает таблица. Для исправления необходимо заменить setStart(
Math.min(
data.length - visibleRows - 1,
Math.floor(
(e.target.scrollTop < 0 ? 0 : e.target.scrollTop) / rowHeight
)
)
)
Видео говно.
Месяца 2 писал действительно тяжелые таблицы и советую юзать именно реакт-виндоу