Виртуальный скролл больших таблиц на React
ฝัง
- เผยแพร่เมื่อ 7 ต.ค. 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
Андрей Карушев спасибо, полезные замечания 👍
красава! Как раз необходимо подобное, а тут по полкам. Спасибо!
очень крутое видео! хороший формат и тема актуальная и полезная)
Спасибо большое за видео. На работе пишу на Vue и столкнулся с проблемой больших данных. Был рад наткнуться на это видео
Спасибо за видео
Мое глубочайшее почтение!
Шикардос!
Забрал в корзинку решений для моей будущей CRMки!
От души
Супер полезно, спасибо!
Класс! Спасибо !
Очень круто! спасибо. Столько много моментов смог доходчего объяснить. Подписка). Вот только не понятно почему на канале контент на англ и подписок мало но коллаборируете русскоязычное население).
Heretic Man на этом канале makewebme контент на русском и по веб-разработке, одно дело, а на моем канале - про алгоритмы и собесы в западные компании, поэтому на английском, другая аудитория. Хотя честно ролики там выходят не часто в последнее время.
Есть баг при прокрутке вниз самой мышкой за ползунок, таблица пропадает.
glauder33 Отличное замечание, спасибо! При установке setStart, видимо, есть ошибка округление так что на самой последней строке мы получаем новый start больше чем может быть строк в таблице 😱 Быстрофикс - gist.github.com/vitkarpov/1020fcebfce3d10780d8de8be477359b , а-ля «не может быть start больше чем определённый предел по смыслу», но вообще любопытно что там происходит со scrollTop при скроле именно мышкой, улетает куда-то.
А индекс ячейки тоже не очень хороший получился, скажем первая строка и 10 ячейка имеют одинаковый индекс с 11 строкой и нулевой ячейкой. Не сложно исправить написав rowIndex + '-' + colIndex но лучше переходить на шаблонные строки
сколько времени у тебя ушло на реализацию данной задачи?
Данил Иванов полчаса. Задачка для собеседования, я как раз интересуюсь темой собеседований и много занимался этим, поэтому люблю такие задачки, которые укладываются в 45 минут (время одной секции).
Благодарю за отличное видео! Очень помогло в разработке таблиц. Небольшая доработка: При скролле вверх в браузере Safari в самой верхней точке пропадает таблица. Для исправления необходимо заменить setStart(
Math.min(
data.length - visibleRows - 1,
Math.floor(
(e.target.scrollTop < 0 ? 0 : e.target.scrollTop) / rowHeight
)
)
)
Вообще реально интересный вариант, но гораздо веселее делать не отображение строки с начала а так, чтобы строка еще "резалась" если вдруг вы не очень сильно крутите мышкой. Так скролл смотрится натурально а не кирпично как в данном случае.
Андрей Карушев а что значит «резалась», сможете привести пример?
@@algoseekee ну после скролла нескольких строк может получится например не начало строки а середина или треть или любая другая часть
интереснее был бы пример, когда высота строки таблицы может быть произвольной
Alexey Baranov высоту строки можно задать в пропсах компонента. Если высота строк может быть разной и заранее неизвестной - скорее всего, это уже не таблица.
сложить индексы строки и колонки не достаточно, у тебя будет 1+11 === 11+1
уверен что код на чистом js пишется на реакте?🤔
Если это соответствует цели, то пишется
Если при количестве строк больше 1000, и количестве видимых строк 3-5, быстро потянуть за скролл вниз и дотянуть до низу - проявляется баг - в фрейме таблицы пропадает контент и высота верхнего div растет не переставая.
Обусловлено такое медленным пересчетом индексов.
Как выход из положения надо заранее назначить 0 высоте нижнего div
let troubleconst = 2;
function getBottomHeight() {
return getTopHeight() > (data.length - visibleRows - troubleconst) * rowHeight ? 0 : rowHeight * (data.length - start - visibleRows);
}
Видео говно.
Месяца 2 писал действительно тяжелые таблицы и советую юзать именно реакт-виндоу