Material-ui: [docs] Таблица виртуализирована

Мы надеемся, что текущий API допускает простую интеграцию с react-virtualized . Мы открыты для внесения любых изменений в реализацию, чтобы упростить интеграцию.

Было бы здорово иметь демонстрационный пример в документации.

Если это может помочь, вот пример интеграции со списком / меню https://codesandbox.io/s/oQ0nkl5pk.

@oliviertassinari Я сделал это без react-virtualized потому что это был беспорядок, и он плохо работал с компонентами mui.
Кроме того, мое текущее решение представляет собой фиксированное тело css и прокручиваемое тело с динамической высотой таблицы и шириной динамических столбцов (также протестировано в Safari).
Всегда наверху панель с прокручиваемым телом необходима для гридов данных.

Я добавляю противодействие прокрутке, настраиваю производительность и исправляю некоторые сбои, но он отлично работает: я "виртуально" рендерил около ~ 2400 строк, ооочень плавно.

Вопросы по компонентам Table :

1. как использовать ref с компонентами MUI? Я автоматически вычисляю TableThead height: проблема в том, что

<TableHead ref={ ref => this.tableThead = ref }>

не возвращает фактический элемент контейнера DOM TableThead а экземпляр React (собственное поведение React при применении ref к элементу не-DOM), потому что это то, что должно применяться в TableThead сам компонент; это может понадобиться другим компонентам, так почему бы не иметь refHandler на каждом компоненте MUI, который применяет данный обратный вызов в первом визуализированном элементе? (Надеюсь, мне удалось это объяснить @ _ @)
Мое текущее решение странное

const theadHeight = ReactDOM.findDOMNode(this.tableThead).clientHeight; // eslint-disable-line react/no-find-dom-node

что означает использование устаревшего findDomNode и отключение eslint.

1. почему border-bottom применяется к ячейкам вместо строк?

2. как насчет наличия stripe={true} prop для автоматического разделения строк TableBody ?

3. почему .MuiIconButton.root имеет свойство стиля zIndex? 🤔

Я надеюсь опубликовать что-нибудь стабильное по этому поводу в ближайшее время, чтобы вы могли увидеть, что это то, что можно принять в целом.

Извините, что так беспокоюсь, но я активно использую mui @ next, поэтому нахожу множество вариантов использования!

Я сделал это без реакции-виртуализации, потому что это был беспорядок, и он не очень хорошо работал с компонентами mui.

Ой, как нам жаль. Есть идеи, что мы можем сделать, чтобы сделать возможным?

1. Вы можете попробовать innerRef чтобы получить ссылку на TableHead . ref даст вам ссылку на компонент withStyles(TableHead) . Если это не сработает, мы можем предоставить свойство rootRef . Это шаблон, который мы уже используем.

2. Без подсказки

3. Что вы имеете в виду под полосой?
4. Я удалил его в # 7467

~~Ой, как нам жаль.

На самом деле это сочетание react-virtualized собственных контейнеров, собственных элементов table/thead/tbody DOM и необходимости наличия прокручиваемого tbody которое вызвало проблему.
С этим требовалось слишком много работы: просто создать специальное решение для MuiTable было проще простого.

1. демонстрация rootRef была бы замечательной (при условии, что TableThead main элемент в методе render является самим элементом Thead DOM)

2. следует ли тогда border-bottom переместить в tr ? Должен ли я вынести это в отдельный выпуск?

3. Я имею в виду полосатые строки: легко добиться с помощью like tr:nth-child(odd) { backgroundColor: f2f2f2 но, поскольку у нас уже есть удобная раскраска hover={true} почему бы не иметь удобную striped={true} ? :)

4. отличный!

1. 👍 Похоже на план, вот пример , PR приветствуется.
2. Bootstrap делает то же самое , я думаю, что он обеспечивает большую гибкость, используя его в TableCell .
3. Потому что этого нет в спецификации, и его можно просто реализовать в пользовательском пространстве?
4. 👍

1. Я не уверен, что для каждого компонента просто нужно иметь ref={rootRef} .
   Разработчики, которые его используют, вероятно (в основном) нуждаются в контроле над DOM.
   В вашем примере <FormControl ref={rootRef} ...> снова вернет ссылку на компонент React (потому что FormControl не является элементом DOM) и разработчик будет использовать обходной путь, который мне пришлось использовать.
   Возможно, нам стоит заставить rootRef вести себя следующим образом:

Является ли контейнер визуализированного компонента элементом DOM?

• если да, то примените к нему ref={rootRef}
• в противном случае примените к нему rootRef={rootRef} => который будет распространяться до первого элемента DOM: таким образом кодер всегда будет иметь реальную ссылку на DOM

Универсальное решение, о котором я могу думать, - это свойства muiRef и rootRef где первый применяет обратный вызов к контейнеру "компонента mui" (если есть), а второй применяет обратный вызов, как я сказал раньше.
Таким образом, разработчик может легко иметь как MUI ref, так и DOM ref (все, что ему нужно, когда ему нужно).
Как вы думаете, в этом есть смысл?

1. действительно? @ _ @

2. опс! Я всегда забываю о характеристиках материала

1. О, я не думал об этом деле. Проблема, о которой вы говорите, заключается в следующем:
2. Компонент A принимает свойство ref и rootRef
3. Реагировать на перехват ref и применить его к элементу
4. Компонент B получает свойство rootRef и применяет его как ссылку к корневому компоненту C
5. Реагируйте на перехват этого ref и примените его к элементу

Но что, если Компонент C также имеет свойство rootRef?
Компонент A может быть на земле пользователя, компонент B может быть TextField, а компонент C может быть FormControl.

Итак, мой ответ: сначала мы представили rootRef как простой помощник. Мы не думали об индустриализации. Итак, я думаю, что текущее поведение велико, поскольку детерминировано, просто и без ограничений, которые вы описываете, если люди заинтересованы в доступе к базовому элементу dom, они могут использовать API findDOMNode .

@damianobarbati Был реагировать-виртуально-лист эксперимента с таблицей и виртуализации упоминается здесь ?

Я предполагаю listComponent = TableBody, itemComponent = TableRow?

Я начал этот проект, который использует виртуализацию реакции с помощью материала 1.0, который может вас заинтересовать.

https://github.com/techniq/mui-table

Работа над ним все еще продолжается (см. Https://github.com/techniq/mui-table/blob/master/TODO.md), но может быть вам полезна. Документов не хватает, но посмотрите истории, чтобы понять, как их использовать.

@techniq Выглядит многообещающе 😄! Я думаю, что было бы здорово в какой-то момент переделать раздел документации по таблицам :
- https://github.com/DevExpress/devextreme-reactive~~ (коммерческая лицензия)

• https://github.com/gregnb/mui-datatables
• https://github.com/techniq/mui-table

Мы также можем добавить его в раздел https://material-ui-next.com/discover-more/related-projects/#material-ui-specific-projects.
Итак, дайте нам знать, когда проект станет более зрелым. Думаю, мы можем принять пулреквест для продвижения проекта :).

Я сделал PR для react-virtual-list здесь https://github.com/clauderic/react-tiny-virtual-list/pull/30, который позволяет использовать его с material-ui. Я изо всех сил пытался заставить работать response-virtual и создать действительный HTML, поскольку он имеет жестко запрограммированный div .

Копия: @kgregory

@eyn отличная работа! Я только что закончил реализацию таблицы с бесконечной прокруткой, используя react-virtualized и material-ui. Я надеюсь скоро изложить суть. Когда я это сделаю, я свяжу его здесь для всех будущих посетителей этого выпуска и, возможно, в качестве примера в документации.

@kgregory вы закончили свою суть? Я все еще ищу базовое решение для виртуализированной таблицы UI материалов, и его нелегко найти ... Это было бы отличным подспорьем!

Спасибо за вашу работу!

@neofox Нет, извините. Я так и не додумался до этого, но ваш ответ - хорошее напоминание. Я постараюсь найти время, чтобы что-нибудь собрать.

@oliviertassinari ваш пример в одном из первых комментариев, который якобы показывает, как использовать список материалов с реагирующим виртуализированным списком, не работает. У вас еще есть этот пример?

@rolandjitsu Извините, у меня нет примеров. Вот в чем проблема :).

@oliviertassinari понял. Я думал, что эта проблема связана с таблицей, а не с <List> , или она также касается списков?

@rolandjitsu Список, таблица, бумага, сетка. Все то же самое. Этот вопрос касается добавления простой демонстрации, чтобы люди могли видеть шаблон и применять его к различным компонентам. Таблица - это компонент, который вам, вероятно, понадобится виртуализация.

@oliviertassinari Я хотел бы дать трещину, если вы можете указать мне в правильном направлении. Насколько я могу судить, нам нужна основная суть с material-ui @ next, интегрированным с react-virtualized?

@ hassan-zaheer Да, я думаю, что простая демонстрация с react-virtualized в конце страницы документации с таблицами поможет :).

Привет. Я случайно наткнулся на эту ветку при исследовании своего проекта. Я хотел бы знать, есть ли здесь какие-либо обновления, касающиеся демонстрационной версии или документации по использованию? @kgregory Или вы можете дать какое-нибудь представление об их объединении? Было бы неплохо, чтобы стол выглядел гармонично и стильно

@ zd-project Вы можете взглянуть на мой проект mui-virtualized-table .

Раньше это была таблица mui, но я решил разделить две и поддержать различные варианты использования ( mui-table напрямую использует DOM и позволяет использовать такие вещи, как position: sticky и <table> layout (интервалы строк / столбцов, автоматическая ширина и т. д.), которые были затруднены с помощью виртуализации реакции.

С учетом сказанного, mui-virtualized-table просто добавил изменение размера столбца из приятного PR.

Где мы на этом, ребята?

@techniq , спасибо за mui-virtualized-table ! Здорово! Есть ли шанс, что мы сможем объединить его в mui-org/material-ui ?

Я был бы счастлив, если бы кто-нибудь открыл PR, который представит демо-версию документации. Таким образом, мы могли бы проверить, можем ли мы улучшить API таблиц для лучшей интеграции со стратегиями виртуализации.

@mastertinner Зачем нужно добавлять это в ядро? Виртуализация - это стратегия оптимизации. Не все визуализируют большие наборы данных, поэтому я бы не стал обременять ими всех.

@mastertinner Мы могли бы начать со ссылки на проект в документации, например здесь: https://material-ui.com/demos/tables/#advanced-use-cases :)

👍 звучит как план

@mastertinner Хотя я все еще использую его (когда требуется виртуализация), я также использую свою новую таблицу mui, когда мне не нужна виртуализация, и могу использовать dom (используя table , tr , td или CSS-сетка для макета, устраняя необходимость в явной ширине столбцов и т.д.) и включает некоторые расширенные шаблоны, такие как несколько заголовков position: sticky (например, это )

@rogerstorm профинансировал этот выпуск 30 долларами. Смотрите на IssueHunt

Решил сегодня поиграться с этим, не рекомендую 😭 Вот что я продюсировал до сих пор:

Пожалуйста, извините за задержку, мой ноутбук не очень хорош 👎 Он использует компоненты Material-UI и react-virtualized компоненты

@joshwooding Я сделал то же самое, что и вы, виртуализированный + фиксированный заголовок (с полосой прокрутки только на теле) . Если ваша реализация использует два отдельных <Table> s, то я думаю, что у вас те же проблемы, что и я.

• Свойства выравнивания материала (например, numeric ) не работают, потому что вы можете использовать такой компонент, как <div> для макета внутри <TableCell> .
• Вы можете указать свойства css для td и tr для правильной виртуализации. Невозможно дать height или max-height td и tr а <TableCell> имеет собственное заполнение, маржу, поэтому он делает трудно исправить высоту строки.

Что ж, дело в том, что компонент внутри <TableCell> неизбежен. Интересно, решили ли вы эту проблему элегантно? В противном случае я думаю, что виртуализированный + фиксированный заголовок (с полосой прокрутки только на теле) трудно быть маленьким (таким же маленьким, как его функция), четко определенным компонентом.

@worudso В настоящее время он использует только один <Table> Мне нужно найти способ передать число вниз, но, возможно, я смогу заставить это работать. Это определенно не маленький Компонент, и мой код все еще немного разбросан, но я собираюсь поработать над ним еще и посмотреть, смогу ли я его улучшить.

Я создал песочницу, которая демонстрирует использование material-ui и react-virtualized для создания виртуализированной таблицы. В этом конкретном примере используется react-virtualized для изменения размера таблицы по высоте окна.

Компонент MuiVirtualizedTable из примера также доступен в этой сущности .

MuiVirtualizedTable может принимать любую опору, поддерживаемую таблицей . rowClassName не применяется напрямую, а вместо этого применяется в дополнение к другим стилям, определенным в MuiVirtualizedTable .

Опция columns ожидает массив объектов, который используется при рендеринге ячеек для каждого столбца. Каждый объект может принимать любую опору, поддерживаемую Column .

Мои извинения за то, что так долго. Я был занят.

К вашему сведению, теперь есть также react-window который должен быть преемником react-virtualized . На случай, если кто-то захочет попробовать это.

@kgregory Спасибо, что поделились codeandbox.

@joshwooding Отличная демонстрация. Хорошо иметь фиксированный заголовок :). Надеюсь, вы сможете завершить реализацию! Что касается числовой пересылки, что мешает вам применять непосредственно к ячейкам? Окно реакции против виртуализированной реакции

@oliviertassinari Я поставил себе цель использовать API компонента Table , и сейчас не похоже, что вы можете передавать пользовательские реквизиты через компонент Column . Вероятно, есть способы сделать это без использования виртуализированного способа реагирования, хотя

@joshwooding Вы пробовали https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#headerrowrenderer ?

@oliviertassinari Я пробовал использовать HeaderRowRenderer, но похоже, что вы не можете передавать через него пользовательские реквизиты, не манипулируя существующими реквизитами, поскольку это то, что вызывается для создания столбцов, которые будут передаваться в headerRenderer:

const renderedHeader = headerRenderer({ columnData, dataKey, disableSort, label, sortBy, sortDirection, });

@oliviertassinari Для таблицы с фиксированной высотой вы можете просто немного отредактировать демонстрацию @kgregory : https://codesandbox.io/s/6vo8y0929k

@joshwooding Отлично ! Я не могу вспомнить, чтобы что-то пропало, чтобы сделать его официальной демонстрацией.

@issuehuntfest профинансировал эту проблему в размере 60 долларов США. Смотрите на IssueHunt

@oliviertassinari Я буду работать над этим :)

@joshwooding отправил запрос на Смотрите на IssueHunt

@oliviertassinari наградил @joshwooding 81 долларом. Смотрите на IssueHunt

• : moneybag: Общий депозит: $ 90.00
• : tada: Вознаграждение за репозиторий (0%): 0,00 $
• : гаечный ключ: Сервисный сбор (10%): 9,00 $

@oliviertassinari наградил @joshwooding 81 долларом. Смотрите на IssueHunt

Заслуженно. Отличная работа, @joshwooding!

У меня аналогичная потребность, но для компонента List ... будет ли такой же подход работать для работы списка?

@mdizzy Да, мы могли бы добавить аналогичную демонстрацию в список.

Я сейчас пытаюсь сделать список виртуальным с помощью окна реакции (поскольку создатель предложил использовать его вместо виртуализированного, если вам не нужен полный API, но в конце концов API для списка на самом деле не меняется так много)

Пока у меня две большие проблемы:
1) Стиль элементов списка нарушен, особенно для таких вещей, как правильные значки / действия. Я предполагаю, что внедренный стиль виртуального списка не очень хорошо сочетается со стилем из материала-ui
2) Прикрепленные подзаголовки также становятся очень беспорядочными, вероятно, по той же причине (абсолютная позиция в окне реакции для размещения элементов)

Я, вероятно, попытаюсь виртуализировать реакцию, чтобы увидеть, лучше ли они работают вместе

@MastroLindus Я полагаю, вы сначала попробовали нашу демонстрацию виртуализации?

@oliviertassinari Я начал свой путь, обнаружил проблемы, описанные выше, поискал в Google, нашел эту ветку.

Затем я узнал о демонстрации виртуализации, я проверил ее код и обнаружил, что в основном это то же самое, что я делаю сам (только применительно к таблицам, а не к спискам).

Мои проблемы - это немного больше связанных списков. Общая концепция работает, но такие вещи, как значки, действия, липкие заголовки, не работают должным образом.
Подробно, ссылаясь на мои 2 пункта в приведенном выше комментарии:
Проблема номер 1 может быть проблемой с реактивным окном, которое не будет присутствовать с реактивным виртуализацией. Я дам вам знать, как только попробую сегодня или завтра. Может, нам повезет и он просто будет работать с react-virtualized. Посмотрим.
Проблема номер 2 (липкие подзаголовки не работают должным образом) Я думаю, что в любом случае потребуется специальное решение, поскольку их расположение, вероятно, вызовет конфликт, несмотря ни на что. Кто-то создал https://github.com/marchaos/react-virtualized-sticky-tree для аналогичной проблемы (имея реактивно-виртуализированную сделку с липкими заголовками), но у меня не было времени, чтобы изучить это прямо сейчас

@MastroLindus Какие у нас проблемы с https://next.material-ui.com/demos/tables/#virtualized -table?

@oliviertassinari Нет.
Я указал, что мои проблемы касаются виртуальных списков, а не виртуальных таблиц. (Опять же: извините, что пишу по проблеме для виртуализированных таблиц, для виртуализированных списков нет, и я следил за комментарием @mdizzy )

Что касается списков: использование ListItemSecondaryAction, ListItemIcon и ListSubheader (с липкими заголовками), похоже, не работает, поскольку их позиционирование перепутано.
Без этих компонентов у меня есть базовый список для работы с реактивным окном (и я думаю, что сделал бы то же самое с реактивно-виртуализированным)

@MastroLindus Думаю, вы можете перенести обсуждение на # 15149.