Material-ui: [표] 재질에 고정 헤드

나는 오늘 같은 문제에 부딪쳤다. 버전 0.15에는 fixedHeader 소품이 있었지만 v 1.x에는 없습니다. 도입할 계획이 있다고 합니다.

Material-ui v1.0.0-beta.16 와 같은 문제입니다.

이 기능이 다시 있으면 정말 좋을 것입니다!

Material-ui v1.0.0-beta.33과 동일한 문제

이것은 필수 기능입니다! 데이터 그리드 작업을 하는 사람이라면 누구나 동의할 것이라고 생각합니다.

@mariorubinas 이 기능이 중요하다면 PR 제출을 고려하십시오. 접근 방식에 대해 논의하려면 이 문제를 사용할 수 있습니다.

꼭 필요한 기능입니다!! 이 기능은 이전 MUI 버전에서 훌륭하게 작동했습니다.

@asrane 풀 리퀘스트를 기다리겠습니다.

@mbrookes 저는 고정 헤더를 충분히 사용하고 있으며 1.0에 대한 다른 모든 것을 좋아하므로 이것에 대해 알아보겠습니다. Material-UI 조직에서 테이블 헤더를 수정하는 데 선호하는 방법이 있습니까? 이전 fixedHeader 는 훌륭했지만 모든 열을 동일한 너비( table-layout: fixed; )로 만드는 방법에 대한 가장 큰 팬이 아니므로 지원하기 위해 다시 구현하려고 했습니다. 동적 열 너비.

@tambling 대단하 군요! 동적 열 너비에 대한 지원이 이상적입니다.

참고로 헤더는 고정 위치에 있을 수 있습니다.

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

@oliviertassinari 감사합니다. 작동합니다.

@oliviertassinari 테이블 셀의 버튼이 테이블 헤더를 오버레이합니다. 그것을 해결하는 방법?
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam 버튼의 zIndex를 조정해야 합니다.

@mbrookes 버튼이 제대로 표시되고 작동하려면 zIndex 값이 어떻게 되어야 합니까?
여기 데모가 있습니다
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam 고정 헤더에 z-색인을 쉽게 설정할 수 있으며 원하는 결과를 얻을 수 있습니다.

head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0,
    zIndex: 10,
  }

벤치마킹 목적: https://vuematerial.io/components/table.

@oliviertassinari , IE 11에서는 작동하지 않습니다. 맞나요? 기술적으로 Material UI는 IE 11을 지원합니다. IE 11에서 작동하는 솔루션이 있습니까?

<Dialog> 구성 요소 내부의 테이블 헤더를 수정하는 솔루션이 있습니까? position: sticky 이(가) 작동하지 않습니다.

Chrome에서 작동하지 않는 것 같습니다.

이 구성 요소에 고정 헤더가 있습니다. https://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js

머티리얼 UI 3.xx!

아직 고정 헤더가 없습니까? IMO의 중요한 기능..)

충돌!

이것에 대한 아이디어가 있습니까? Material Table을 사용하고 있는데 스크롤이 뜨면 머리글을 수정할 수 없습니다.

내 예에서와 같이 두 개의 테이블을 사용하십시오. @mhidalgop.

내 예에서와 같이 두 개의 테이블을 사용하십시오. @mhidalgop.

미안하지만 그것은 나를 위해 작동하지 않습니다 :(

미안하지만 그것은 나를 위해 작동하지 않습니다 :(

@mhidalgop , CodeSandbox와 같은 것으로 예제를 공유하시겠습니까?

마지막으로 이 솔루션을 사용하여 문제를 해결했습니다.

head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0,
    zIndex: 10,
  }

헉!
:)

참고로 헤더는 고정 위치에 있을 수 있습니다.

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

데스크톱 브라우저에서는 잘 작동하지만 모바일 브라우저에서는 작동하지 않습니다.

참고로 헤더는 고정 위치에 있을 수 있습니다.

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

데스크톱 브라우저에서는 잘 작동하지만 모바일 브라우저에서는 작동하지 않습니다.

웹 앱에서 이 솔루션을 사용하고 있으며 Chrome이 설치된 태블릿에서는 제대로 작동합니다.

스티커가 작동하지 않으므로 테이블 헤더를 수정하는 방법에 대한 다른 솔루션이 있습니까?

+1

이 스타일을 <TableContainer> 에 적용할 때 저에게 효과적이었습니다.

    height: 100%;
    overflow-y: auto;