Material-ui: [docs] 가상화 된 테이블

현재 API가 react-virtualized 와의 간단한 통합을 허용하기를 바랍니다. 우리는 통합을 더 간단하게 만들기 위해 구현을 변경할 수 있습니다.

문서에 데모 예제가 있으면 멋질 것입니다.

도움이 될 수있는 경우 다음은 목록 / 메뉴 https://codesandbox.io/s/oQ0nkl5pk 와의 통합 예제입니다

@oliviertassinari 나는 엉망이었고 mui 구성 요소와 잘 어울리지 않았기 때문에 react-virtualized 없이 만들었습니다.
또한 내 현재 솔루션은 동적 테이블 높이와 동적 열 너비가있는 순수 css 고정 thead 및 스크롤 가능한 tbody입니다 (Safari에서도 테스트 됨).
스크롤 가능한 tbody가있는 항상 위에있는 thead는 데이터 그리드의 필수 요소입니다.

스크롤 디 바운싱을 추가하고 성능을 조정하고 일부 결함을 수정하고 있지만 훌륭하게 작동합니다. 약 2400 행에 대해 "가상"렌더링을하고 있습니다.

Table 구성 요소에 대한 질문 :

1. MUI 구성 요소와 함께 ref 를 사용하는 방법? 저는 TableThead 높이를 자동 계산합니다 : 문제는

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

실제 DOM 컨테이너 요소 반환하지 않습니다 TableThead 하지만 인스턴스 (적용 할 때 반작용의 기본 동작 반작용 ref 즉, 적용해야 뭔가 때문에하지-DOM의 요소를) TableThead 구성 요소 자체; 다른 구성 요소가 이것을 필요로 할 수 있습니다. 그렇다면 첫 번째 렌더링 된 요소에 주어진 콜백을 적용하는 모든 MUI 구성 요소에 refHandler 없는 이유는 무엇입니까? (나는 이것을 설명해줬으면 좋겠다 @ _ @)
내 현재 솔루션은 이상합니다

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 온의 Ref 얻을 TableHead . ref 는 withStyles(TableHead) 구성 요소에 대한 참조를 받게됩니다. 그래도 작동하지 않으면 rootRef 속성을 노출 할 수 있습니다. 그것은 우리가 이미 사용하고있는 패턴입니다.

2. 실마리 없음

3. 스트라이프 란 무엇을 의미합니까?
4. # 7467에서 제거했습니다.

~~오, 그것은 우리에게 부끄러운 일입니다.

실제로 react-virtualized 자체 컨테이너, 기본 table/thead/tbody DOM 요소 및 문제를 일으킨 스크롤 가능한 tbody 가 필요합니다.
너무 많은 작업이 필요했습니다. MuiTable 에 대한 임시 솔루션을 만드는 것은 매우 쉽습니다.

1. rootRef 노출하는 것이 좋습니다 ( render 메서드의 TableThead 주 요소가 Thead DOM 요소 자체라고 가정).

2. 그러면 border-bottom 을 tr 로 옮겨야합니까? 이 문제를 전용 문제로 옮겨야합니까?

3. 줄무늬 행을 의미합니다. like tr:nth-child(odd) { backgroundColor: f2f2f2 쉽게 얻을 수 있지만 이미 편리한 hover={true} 색상이 있으므로 편리한 striped={true} ? :)

4. 큰!

1. 👍 계획처럼 들립니다. 여기에 예가 있습니다. PR을 환영합니다.
2. 부트 스트랩도 똑같은 일을하고 있습니다. 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. React는 ref 가로 채서 요소에 적용합니다.
4. 구성 요소 B는 rootRef 속성을 받고이를 루트 구성 요소 C에 참조로 적용합니다.
5. React는이 ref 가로 채서 요소에 적용합니다.

하지만 컴포넌트 C에도 rootRef 속성이 있다면 어떨까요?
구성 요소 A는 사용자 영역에 있고 구성 요소 B는 TextField가 될 수 있으며 구성 요소 C는 FormControl이 될 수 있습니다.

그래서 제 대답은 처음에 rootRef 를 간단한 도우미로 소개했습니다. 우리는 산업화에 대해 생각하지 않았습니다. 따라서 현재 동작은 결정적이고 간단하며 설명하는 제한없이 findDOMNode API를 사용할 수 있습니다.

@damianobarbati 여기에 언급 된 테이블 및 가상화를 사용한 실험이 react-virtual-list 입니까?

listComponent = TableBody, itemComponent = TableRow?

관심을 가질만한 Material 1.0으로 반응 가상화를 사용하는이 프로젝트를 시작했습니다.

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

아직 진행중인 작업이지만 (https://github.com/techniq/mui-table/blob/master/TODO.md 참조) 유용 할 수 있습니다. 문서는 부족하지만 사용 방법에 대한 느낌을 얻기 위해 스토리를 살펴보십시오.

@techniq 유망 해 보입니다 😄! 나는 어떤 시점에서 테이블 문서 섹션 을 수정
-https :

• 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 섹션에 추가 할 수도 있습니다.
따라서 프로젝트가 더 성숙 해지면 알려주십시오. 프로젝트를 홍보하기 위해 pull request를 수락 할 수 있다고 생각합니다. :).

여기서 react-virtual-list 대한 PR을 수행했습니다. https://github.com/clauderic/react-tiny-virtual-list/pull/30 에서 material-ui와 함께 사용할 수 있습니다. div 하드 코딩되어 있으므로 react-virtual이 작동하고 유효한 HTML을 만드는 데 어려움을 겪었습니다.

cc : @kgregory

@eyn 잘 했어! react-virtualized 및 material-ui를 사용하여 무한 스크롤 테이블 구현을 완료했습니다. 조만간 요점을 함께 던지고 싶습니다. 내가 할 때 나는이 문제의 미래 방문자를 위해 그리고 아마도 문서의 예로서 여기에 링크 할 것입니다.

@kgregory 요점을 끝냈습니까? 여전히 가상화 된 머티리얼 UI 테이블에 대한 기본 솔루션을 찾고 있는데 찾기가 쉽지 않습니다 ... 큰 도움이 될 것입니다!

작업 해 주셔서 감사합니다!

@neofox 아니요, 죄송합니다. 나는 그것에 대해 알아 본 적이 없지만 당신의 대답은 좋은 상기시켜줍니다. 시간을 내서 뭔가를 모 으려고 노력하겠습니다.

@oliviertassinari 반응 가상화 목록과 함께 재료 목록을 사용하는 방법을 보여주는 첫 번째 의견 중 하나에서 예제가 작동하지 않습니다. 아직도 그 예가 놓여 있습니까?

@rolandjitsu 죄송합니다. 예는 없습니다. 이 문제에 관한 것입니다 :).

@oliviertassinari 알겠습니다 . 이 문제가 <List> 아니라 테이블에 관한 것이라고 생각 했습니까? 아니면 목록에도 적용됩니까?

@rolandjitsu 목록, 표, 종이, 그리드 목록. 모두 동일합니다. 이 문제는 사람들이 패턴을보고 다른 구성 요소에 적용 할 수 있도록 간단한 데모를 추가하는 것입니다. 테이블은 가상화가 필요할 가능성이있는 구성 요소입니다.

@oliviertassinari 올바른 방향으로 나를 가리킬 수 있다면 균열을주고 싶습니다. 내가 말할 수있는 한, 우리는 react-virtualized와 통합 된 material-ui @ next 의 기본 요점이 필요합니까?

@ hassan-zaheer 예, 테이블 문서 페이지 끝에 react-virtualized가있는 간단한 데모가 트릭을 수행 할 것이라고 생각합니다. :).

안녕하세요. 내 프로젝트를 조사 할 때이 스레드를 우연히 발견했습니다. 데모 또는 사용 설명서와 관련된 업데이트가 있는지 알고 싶습니다. @kgregory 아니면 둘을 통합하는 데 대한 통찰력을 제공 할 수 있습니까? 테이블을 스타일과 일관되게 보이게하는 것이 좋을 것입니다.

@ zd-project 내 mui-virtualized-table 프로젝트를 살펴볼 수 있습니다.

예전에는 mui-table 이었지만 2 개를 포크하고 다른 사용 사례를 지원하기로 결정했습니다 ( mui-table 는 DOM을 직접 활용하고 position: sticky 및 <table> 레이아웃과 같은 것을 사용할 수 있습니다. (행 / 콜 스팬, 자동 너비 등) 반응 가상화에서는 어려웠습니다.

즉, 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-table 도 사용하고 dom ( table , tr 사용)을 활용할 수 있습니다 td , 또는 레이아웃을위한 CSS 그리드, 명시 적으로 열 너비 등의 필요성을 제거)하고하는 다수의 같은 일부 고급 패턴 수 position: sticky (같은 헤더를 이 )

@rogerstorm 은이 문제에 30 달러를 투자했습니다. IssueHunt에서보기

오늘 이것을 가지고 놀기로 결정했지만 권장하지 않습니다 😭 지금까지 제작 한 내용은 다음과 같습니다.

지연을 용서하십시오. 제 노트북은 훌륭하지 않습니다. 👎 Material-UI 구성 요소 및 react-virtualized 구성 요소를 사용합니다.

@joshwooding 나는 당신이 한 것과 똑같은 일을했습니다. 가상화 + 고정 헤더 (본문에만 스크롤 바 포함) . 구현에서 두 개의 개별 <Table> 사용하는 경우 내가 찾은 것과 동일한 문제가 있다고 생각합니다.

• 재료의 정렬 소품 (예 : numeric )이 작동하지 않습니다. <TableCell> 내부 레이아웃에 <div> 와 같은 구성 요소를 사용할 수 있기 때문입니다.
• 제대로 가상화되도록 td 및 tr 에 CSS 속성을 제공 할 수 있습니다. height 또는 max-height 를 td 및 tr 에 줄 수있는 방법이 없으며 재료의 <TableCell> 에는 자체 패딩, 여백이 있으므로 행의 높이를 고정하기가 어렵습니다.

음, 요점은 <TableCell> 내부의 구성 요소가 불가피하다는 것입니다. 이 문제를 우아한 방법으로 해결했는지 궁금합니다. 그렇지 않다면 가상화 + 고정 헤더 (본문에만 스크롤바 포함) 는 작게 (기능만큼 작음) 잘 정의 된 구성 요소가되기 어렵다고 생각합니다.

@worudso 현재는 하나의 <Table> 만 사용합니다. 숫자를 전달하는 방법을 찾아야하지만 제대로 작동 할 수 있습니다. 확실히 작은 구성 요소는 아니며 내 코드는 여전히 모든 곳에 있지만 좀 더 작업하고 개선 할 수 있는지 살펴볼 것입니다.

저는 material-ui 및 react-virtualized를 사용하여 가상화 된 테이블을 생성하는 방법을 보여주는 샌드 박스 를 만들었습니다. 이 특정 예제는 react-virtualized를 사용하여 테이블의 크기를 창의 높이로 조정합니다.

예제의 MuiVirtualizedTable 구성 요소 도이 요점 에서 사용할 수 있습니다.

MuiVirtualizedTable 는 Table에서 지원하는 모든 소품을 허용 할 수 있습니다. rowClassName 는 직접 적용되지 않고 대신 MuiVirtualizedTable 정의 된 다른 스타일에 추가로 적용됩니다.

columns 소품은 각 열의 셀을 렌더링 할 때 사용되는 개체의 배열을 예상합니다. 각 객체는 Column에서 지원하는 모든 소품을 받아 들일 수 있습니다.

너무 오래 걸려서 죄송합니다. 바빴 었어.

참고로, 이제 react-virtualized 후계자 인 react-window 있습니다. 누군가가 그것을 시도하고 싶을 경우.

@kgregory 코드 샌드 박스 를 공유 해주셔서 감사합니다.

@joshwooding 멋진 데모. 고정 헤더를 갖는 것이 좋습니다 :). 구현을 완료 할 수 있기를 바랍니다. 숫자 전달과 관련하여 셀에 직접 적용 할 수없는 이유는 무엇입니까? 반응 창 vs 반응 가상화

@oliviertassinari 저는 Table 컴포넌트의 API를 사용하겠다는 목표를 설정했고 지금은 Column 컴포넌트를 통해 커스텀 props를 전달할 수없는 것 같습니다. 반응 가상화 방식을 사용하지 않고 할 수있는 방법이있을 것입니다.

@joshwooding https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#headerrowrenderer 를 사용해 보셨습니까?

@oliviertassinari 나는

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

@oliviertassinari 고정 높이 테이블의 경우 @kgregory 의 데모를 약간 편집 할 수 있습니다. https://codesandbox.io/s/6vo8y0929k

트윗 담아 가기 공식 데모로 만들기 위해 빠진 것이 없다고 생각할 수 없습니다.

@issuehuntfest 는이 문제에 $ 60.00를 지원했습니다. IssueHunt에서보기

@oliviertassinari 나는 이것을 구현하기 위해 노력할 것이다 :)

@joshwooding 이 풀 요청을 제출했습니다. IssueHunt에서보기

@oliviertassinari 는 IssueHunt에서보기

• : 머니 백 : 총 입금액 : $ 90.00
• : 타다 : 리포지토리 보상 (0 %) : $ 0.00
• : 렌치 : 봉사료 (10 %) : $ 9.00

@oliviertassinari 는

그럴만 한 가치가 있습니다. @joshwooding 잘 했어요!

비슷한 요구 사항이 있지만 List 구성 요소의 경우 ... 목록을 작동시키는 데 동일한 접근 방식이 작동합니까?

@mdizzy 예, 목록에 유사한 데모를 추가 할 수 있습니다.

나는 지금 반응 창으로 목록을 가상으로 만들려고 노력하고 있습니다 (생성자가 전체 API가 필요하지 않은 경우 가상화 된 대신 사용하도록 제안했지만 결국 목록에 대한 API는 실제로 변경되지 않습니다 그만큼)

지금까지 두 가지 큰 문제가 있습니다.
1) 목록 항목 스타일이 깨졌습니다. 특히 오른쪽 아이콘 / 동작과 같은 항목에서 그렇습니다. 가상 목록 삽입 스타일이 material-ui의 스타일링과 잘 어울리지 않는 것 같습니다.
2) 끈적한 서브 헤더도 같은 이유로 지저분해질 것입니다.

나는 그들이 함께 더 잘 작동하는지 확인하기 위해 아마도 반응 가상화를 시도 할 것입니다.

@MastroLindus 먼저 가상화 데모를 시도해 보셨나요?

@oliviertassinari 나는 내 방식대로 시작했고 위에서 설명한 문제를 발견하고 검색 하여이 스레드를 찾았습니다.

그런 다음 가상화 데모에 대해 발견하고 코드를 확인한 결과 기본적으로 내가하는 일과 동일하다는 것을 알게되었습니다 (목록 대신 테이블에만 적용됨).

내 문제는 좀 더 관련된 목록입니다. 일반적인 개념은 작동하지만 아이콘, 작업, 고정 헤더와 같은 항목은 제대로 작동하지 않습니다.
자세히, 위의 의견에서 내 두 가지 사항을 참조하십시오.
문제 번호 1은 react-virtualized로 표시되지 않는 react-window의 문제 일 수 있습니다. 오늘 또는 내일 시도하자마자 알려 드리겠습니다. 아마도 우리는 운이 좋으며 반응 가상화로 작동 할 것입니다. 보자.
문제 번호 2 (고정적인 하위 헤더가 제대로 작동하지 않음) 어쨌든 포지셔닝이 무슨 일이 있어도 충돌을 일으킬 수 있으므로 어차피 임시 솔루션이 필요하다고 생각합니다. 누군가 비슷한 문제에 대해 https://github.com/marchaos/react-virtualized-sticky-tree 를 만들었지 만 (고정 헤더를 사용한 반응 가상화 된 거래가 있음) 지금 조사 할 시간이 없었습니다.

@MastroLindus https://next.material-ui.com/demos/tables/#virtualized -table에 대해 어떤 문제가 있습니까?

@oliviertassinari 없음.
내 문제는 가상 테이블이 아니라 가상 목록에만 해당한다고 지정했습니다. (다시 : Table Virtualized에 대한 문제에 대해 글을 쓰는 중이 어서 유감 입니다. 가상화 된 목록에는 아무것도 없으며 따르고있었습니다 )

목록과 관련하여 : ListItemSecondaryAction, ListItemIcon 및 ListSubheader (고정 헤더 포함)를 사용하면 위치가 엉망이되어 작동하지 않는 것 같습니다.
이러한 구성 요소가 없으면 react-window로 작업 할 기본 목록이 생겼습니다 (그리고 react-virtualized에서도 똑같이 할 것 같습니다)

@MastroLindus 토론을 # 15149로 옮길 수 있다고 생각합니다.