Material-ui: [Tabel] Memperbaiki kepala di material

Saya mengalami masalah yang sama hari ini. Versi 0.15 memiliki prop fixedHeader , v 1.x tidak. Saya berasumsi bahwa ada rencana untuk memasukkan ini.

Masalah yang sama dengan Material-ui v1.0.0-beta.16 .

Akan sangat menyenangkan untuk memiliki fitur ini kembali!

Masalah yang sama dengan Material-ui v1.0.0-beta.33

Ini adalah fitur yang harus dimiliki! Saya pikir siapa pun yang bekerja dengan jaringan data akan setuju dengan saya.

@mariorubinas Jika fitur ini penting bagi Anda, harap pertimbangkan untuk mengirimkan PR. Anda dapat menggunakan masalah ini jika Anda ingin mendiskusikan pendekatan Anda.

Ini adalah fitur yang harus dimiliki!! fitur bekerja dengan baik di versi MUI yang lama.

@asrane Menantikan permintaan tarik Anda.

Hai @mbrookes Saya cukup menggunakan tajuk tetap dan menyukai segala sesuatu yang lain tentang cukup 1.0 sehingga saya akan mencoba ini - apakah Anda/organisasi Material-UI memiliki cara yang lebih disukai untuk memperbaiki tajuk tabel? fixedHeader yang lama sangat bagus, tetapi saya bukan penggemar berat cara membuat semua kolom sama lebarnya ( table-layout: fixed; ), jadi saya akan mencoba mengimplementasikannya kembali untuk mendukung lebar kolom dinamis.

@tambling Itu akan sangat bagus! dukungan untuk lebar kolom dinamis akan ideal.

Untuk dicatat, tajuk dapat diposisikan lengket:

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

@oliviertasinari Terima kasih, Berhasil.

@oliviertasinari Tombol di sel tabel menutupi header tabel. Bagaimana cara mengatasinya?
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam Anda perlu menyesuaikan zIndex untuk tombol Anda.

@mbrookes Berapa nilai zIndex agar tombol muncul dan berfungsi dengan baik ?
Berikut demonya
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam Anda dapat dengan mudah mengatur indeks-z pada header lengket dan itu akan memiliki hasil yang Anda inginkan.

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

Untuk tujuan pembandingan: https://vuematerial.io/components/table.

@olivietassinari , itu tidak akan berfungsi di IE 11, kan? Secara teknis Material UI mendukung IE 11. Apakah ada solusi yang akan bekerja dengan IE 11?

Adakah yang punya solusi untuk memperbaiki header tabel di dalam komponen <Dialog> ? position: sticky tidak berfungsi.

Sepertinya tidak berfungsi di Chrome

Saya memiliki tajuk tetap dalam komponen ini: https://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js

Materi UI 3.xx!

Masih tidak ada header tetap? IMO fitur penting nya..)

Menabrak!

Ada ide tentang ini? Saya menggunakan Tabel Material, tetapi saya tidak dapat memperbaiki header saat gulungan muncul.

Cukup gunakan dua tabel seperti pada contoh saya, @mhidalgop.

Cukup gunakan dua tabel seperti pada contoh saya, @mhidalgop.

Maaf, tapi itu tidak berhasil untuk saya :(

Maaf, tapi itu tidak berhasil untuk saya :(

@mhidalgop , keberatan berbagi contoh Anda dalam sesuatu seperti CodeSandbox?

Akhirnya saya telah menyelesaikan masalah saya menggunakan solusi ini:

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

Terima kasih!
:)

Untuk dicatat, tajuk dapat diposisikan lengket:

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

Ini berfungsi dengan baik di browser desktop, namun, di browser seluler itu tidak berfungsi.

Untuk dicatat, tajuk dapat diposisikan lengket:

// ...

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

// ...

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

// ...

https://codesandbox.io/s/k0vwm7xpl3

Ini berfungsi dengan baik di browser desktop, namun, di browser seluler itu tidak berfungsi.

Saya menggunakan solusi ini di aplikasi web, dan di tablet dengan Chrome itu berfungsi dengan baik.

lengket tidak berfungsi untuk saya, jadi ada solusi lain tentang cara memperbaiki tajuk tabel?

+1

Bekerja untuk saya ketika menerapkan gaya ini ke <TableContainer>

    height: 100%;
    overflow-y: auto;