Material-ui: [جدول] تحديد الرأس في المادة

واجهت نفس المشكلة اليوم. الإصدار 0.15 يحتوي على الخاصية fixedHeader ، بينما لم يكن الإصدار 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; ) ، لذلك كنت سأحاول إعادة تنفيذه لدعم عرض العمود الديناميكي.

@ القمار سيكون ذلك رائعا! سيكون دعم عرض العمود الديناميكي مثاليًا.

وتجدر الإشارة إلى أن الرأس يمكن وضعه بشكل ثابت:

// ...

  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 ، أليس كذلك؟ من الناحية الفنية ، تدعم واجهة المستخدم المادية IE 11. هل هناك حل يعمل مع IE 11؟

هل لدى أي شخص حل لإصلاح رأس الجدول داخل مكون <Dialog> ؟ position: sticky لا يعمل.

لا يبدو أنه يعمل على Chrome

لدي رأس ثابت في هذا المكون: https://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js

واجهة المستخدم المادية 3.xx!

لا يزال لا يوجد رأس ثابت؟ IMO ميزتها الهامة ..)

صدم!

اي فكرة عن هذا؟ أنا أستخدم جدول المواد ، لكنني غير قادر على إصلاح العنوان عند ظهور التمرير.

فقط استخدم جدولين كما في المثال ،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;