Material-ui: [جدول] تعيين عرض عمود الجدول

تم إنشاؤها على ١٩ أكتوبر ٢٠١٥  ·  54تعليقات  ·  مصدر: mui-org/material-ui

هل من الممكن ضبط عرض أعمدة الجدول؟

DataGrid question

التعليق الأكثر فائدة

في جدول الفانيليا HTML الخاص بي ، يتم تعيين عرض الأعمدة تلقائيًا حسب المحتوى. يبدو أن واجهة المستخدم المادية تفرض عرضًا متساويًا على جميع الأعمدة. هل هناك طريقة لتعيين عرض العمود ليكون ديناميكيًا بدلاً من ذلك ، مثل جداول Vanilla HTML؟

ال 54 كومينتر

+1

لا شيء مميز عن هذا:

const colWidth {
    width: '2rem'
};

<TableRowColumn style={ colWidth }>
    ...
</TableRowColumn>
<TableRowColumn style={{ width: 100 }}>

لا تتصرف بشكل جيد مع TableHeaderColumn

هل هناك أي طريقة لتعيين عرض العمود ديناميكيًا بناءً على المحتوى؟

في جدول الفانيليا HTML الخاص بي ، يتم تعيين عرض الأعمدة تلقائيًا حسب المحتوى. يبدو أن واجهة المستخدم المادية تفرض عرضًا متساويًا على جميع الأعمدة. هل هناك طريقة لتعيين عرض العمود ليكون ديناميكيًا بدلاً من ذلك ، مثل جداول Vanilla HTML؟

sanfilippopablo ، <Table> خاصية table-layout: 'fixed' css ، مما يؤدي إلى أن جميع الأعمدة لها نفس العرض ، مع white-space: 'nowrap' في كل خلية من خلايا الجدول للتعامل مع الفائض.

لا يمكنك التبديل بأمان إلى table-layout: 'auto' نظرًا لأن الجدول ينمو بعد ذلك بشكل لا نهائي مع محتواه إلا إذا قمت بإزالة خاصية css ذات المساحة البيضاء المذكورة أعلاه. وإذا فعلت هذا ،
لا يمكنك استخدام fixedHeader={true} بعد الآن حيث يتم تضمين الرؤوس في جدول منفصل: cry :.

سيكون موضع تقدير بعض ردود الفعل.

ما كنت أفعله لتعيين عرض الأعمدة هو لـ

النمط ، اضبط تنسيق الجدول على تلقائي ، كما هو مذكور أعلاه ، ثم أعطي عروض بنسب مئوية لأعمدتي. بمعنى آخرعرض 30٪ والعرض 70٪. قد يكون هذا مثالاً على تخطيط من عمودين ، مع أعمدة رأس الجدول في العمود الأول بدلاً من الرأس ..

لا يمكنك التبديل بأمان إلى تنسيق الجدول: "تلقائي" لأن الجدول ينمو بعد ذلك بشكل لا نهائي مع محتواه

ماذا عن ضبط عرض رأس الجدول عندما يتغير عرض tableRowColumn مع المحتوى؟
لا يمكنني إعداده بحيث يتم محاذاة هذين.

أعتقد أنك إما تستخدم fixedHeader={true} ولا يمكنك تعيين عرض مخصص أو لا يجب عليك الاحتفاظ برؤوسك داخل <TableBody> .

حسنًا ، وضع العنوان في tbody يعمل! الآن أنا بحاجة لمعرفة كيفية عمل أعمدة رأس متعددة الأسطر. أي نصائح؟

هل تحاول تحقيق شيء كهذا ؟ (إذا لم يكن الأمر كذلك ، فربما يمكنك العثور على المثال الصحيح في هذا الموقع)

أعتقد أنه يمكنك فعل كل شيء تريده إلى حد كبير باستخدام السمات colSpan على TableHeaderColumn و TableRowColumn و rowSpan على TableRow .

لا أفهم - لماذا أغلق هذا؟

لا يعمل وضع TableHeader في TableBody.

ههههههههههه
ما اقترحناه هو وضع tableRow كعنوان جدول في tableBody ،
ولكن يبدو لي أنه يعمل الآن بشكل جيد.

هكذا تبدو الآن في الكود الخاص بي:

<Table fixedHeader={true}>
          <TableHeader>
            <TableHeaderComponent schema={schema}/>
          </TableHeader>
          <TableBody displayRowCheckbox={false} showRowHover={true}>
            {this.props.data.map((item, index) => (
              <TableRowComponent key={index} schema={this.props.schema}
                item={item} onRemoveClick={this.handleRemoveItem}
                onEditClick={this.handleEditItem}
              />
            ))}
          </TableBody>
</Table>

وأعمدة الرأس محاذاة مع أعمدة النص بشكل صحيح.

Tks للرد علي. ما هو داخل TableHeaderComponent؟ أعتقد أنه ليس مثل TableHeader العادي أليس كذلك؟
""

الطابع الزمني

نعم ، إنها ملفوفة فقط لأسباب.

أي أخبار عن هذا؟ كيف يمكنني السماح للأعمدة بالتكيف التلقائي مع المحتوى؟

هذا يعمل بالنسبة لي ، التحجيم التلقائي:

      <Table style={{tableLayout: 'auto'}}>

arjan

 <Table style={{tableLayout: 'auto'}}>

هذا ليس له تأثير على الرأس.

<Table fixedHeader={false} style={{ tableLayout: 'auto' }}> (تغيير الحجم حسب المحتوى).

كنت بحاجة إلى إضافة width: "auto" ، والذي ينتج عنه:

<Table fixedHeader={false} style={{ width: "auto", tableLayout: "auto" }}>

nathanmarks ، يرجى إعادة

يجب أن يكون لدى Table خاصية مضمنة للسماح لها بالحجم التلقائي للمحتويات ، ويجب ألا يتطلب تعطيل fixedHeader . أود أن أذهب أبعد من ذلك وأقول أن الحجم التلقائي للمحتويات يجب أن يكون السلوك الافتراضي.

devuxer معذرة ، لكننا لا نضيف بشكل استباقي ميزات إلى فرع v0.x.

mbrookes ، شكرًا لإعلامنا بذلك. هل تقول أن الجدول في الإصدار v1.x يحل هذه المشكلة؟

devuxer أنا أصدق ذلك ، تمت إعادة كتابته من الألف إلى الياء.

https://material-ui-next.com/demos/tables/

كان لدي جدول بثلاثة أعمدة ، حيث يحتوي العمودين الأول والثالث دائمًا على قدر صغير من النص. أردت أن يشغل العمود الثاني الجزء الأكبر من المساحة بحيث يتم دفع العمودين الأول والثالث إلى الحافتين اليسرى واليمنى من الجدول ، على التوالي. نجح هذا بالنسبة لي (باستخدام style هنا بدلاً من className للإيجاز):

<Table style={{ tableLayout: "auto" }} />
<TableRowColumn style={{ width: "10%" }}>{text}</TableRowColumn>
<TableRowColumn style={{ width: "80%" }}>{text}</TableRowColumn>
<TableRowColumn style={{ width: "10%" }}>{text</TableRowColumn>

لقد وجدت حلاً أفضل ... لذلك ، كل عمود له نفس العرض.
لنفترض أن لدي ثلاثة أعمدة ، وأريد أن يشغل العمود الأول نصف العرض الكلي ، والثالث يجب أن يكون حوالي ثلث الصف ؛ الذي في المنتصف يكون الأصغر:

  <TableRowColumn colSpan='3'>twice as big!</TableRowColumn>
  <TableRowColumn> I'm small</TableRowColumn>
  <TableRowColumn colSpan='2'>I'm in between</TableRowColumn>

في الواقع ، لدي 7 أعمدة ، لكن مجموع الأعمدة الخاصة بي يساوي 20 - آخرها يحمل رمزًا للحذف فقط ، ومعظم الأعمدة الأخرى هي colspan 3 - حقل النص الكبير هو colspan 6 ، وحقل التحديد ومُنتقي البيانات هما على كولسبان 2 ...

يعمل كالسحر!

هذا جيد للذهاب في v1.4.3

const styles = { 
    narrowCell: {
        'width': '150px',
    }
};

<Table>
    <TableHead>
        <TableRow>
            <TableCell>Company Name</TableCell>
            <TableCell className={classes.narrowCell} numeric>Amount</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
    <TableRow>
        <TableCell> name 1 </TableCell>
        <TableCell className={classes.narrowCell}> $100 </TableCell>
    </TableRow>
    </TableBody>
</Table>


يمكن أيضًا إعطاء عرض النسبة المئوية ، تمتد باقي الخلايا بالتساوي

كيف يمكنني استخدام هذا الحل إذا كان علي استخدام colspan={2} في صف TableHead؟

إذا قمت بإضافة colspan={2} فسيكون لجميع الأعمدة نفس العرض. شيء من هذا القبيل:

const styles = { 
    narrowCell: {
        'width': '150px',
    },
    miniCell: {
        'width': '75px',
    },
};

<Table>
    <TableHead>
        <TableRow>
            <TableCell>Company Name</TableCell>
            <TableCell className={classes.narrowCell} numeric colspan={2}>Amounts</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
    <TableRow>
        <TableCell> name 1 </TableCell>
        <TableCell className={classes.miniCell}> $100 </TableCell>
        <TableCell className={classes.miniCell}> $100 </TableCell>
    </TableRow>
    </TableBody>
</Table>

Bowfish إذا كنت تريد تغيير colspan = {2} عرض الخلية ، فحاول تغيير عرض الجدول ، لأنه يمتد على الجدول بأكمله. يمكن تعديل الخلايا الأصغر بشكل فردي.

ساعدني تطبيق هذا الأسلوب بطريقة ما:
لقد جلست للتو مختلفًا عن maxWidth لمختلف السلاسل في الصف ولكن نفس الشيء في كل عمود باستخدام الأنماط المضمنة.

const styles = (theme) => ({
  tableCell: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    maxWidth: '40px',
  },
});

لم يتم نشر أي من الحلول أعلاه. لماذا هذا صعب التحقيق؟

  <Table fixedHeader={false} style={{tableLayout: "auto" }}>
        <colgroup>
            <col width="250px" />
            <col />
            <col width="40px" />
            <col width="40px" />
        </colgroup>
        <TableHead>
          <TableRow>

العمود الثاني مرن

لست متأكدًا مما إذا كان أي شخص لا يزال يواجه مشكلة في هذا الأمر ، لكن انتهى بي الأمر باستخدام withStyles وعمل هنا الرمز الزائف:

import {withStyles} from '@material-ui/core/styles';  

const styles = theme => ({
    cell: {
        width:'20%'
    },
    cellLarge: {
        width:'60%'
    } 
});

<Table >
       <TableHead>
               <TableRow>
                        <TableCell className={this.props.classes.cell}>header 1</TableCell>
                         <TableCell className={this.props.classes.cell}>header 2</TableCell>
                         <TableCell className={this.props.classes.cellLarge}>header 3</TableCell>
                </TableRow>
          </TableHead>
                <TableBody>
                        <TableRow>
                            <TableCell>value 1</TableCell>
                            <TableCell>value 2</TableCell>
                            <TableCell>value 3</TableCell>
                        </TableRow>
               </TableBody>
   </Table>

export default withStyles(styles)({ComponentName})

لم يتم نشر أي من الحلول أعلاه. لماذا هذا صعب التحقيق؟

بطريقة ما أدرك سبب عدم نجاحها ، لأننا قمنا بتعيين width فقط لـ TableHead أو TableBody ! لجعلها تعمل ، يجب علينا تحديد minWidth و maxWidth bot على TableCell في TableHead و TableBody ، هنا المثال

<Table>
    <TableHead>
        <TableRow>
            <TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
            <TableCell column='data2' style={{minWidth:'200px', maxWidth:'200px'}}>{content}</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
            <TableRow>
            <TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
            <TableCell column='data2' style={{minWidth:200, maxWidth:200}}>{content}</TableCell>
            </TableRow>
    </TableBody>
</Table>

كما ترى ، يمكننا استخدام كل من القيمة للنمط بعدد صحيح وسلسلة. لكن بالنسبة للسلسلة ، فهي تعمل فقط إذا قمت بتعريفها بـ px ، إذا كنت تستخدم النسبة المئوية ، مثل minWidth:'25%' ، فلن تعمل ، لقد جربتها بالفعل.

لماذا أستخدم كلاً من minWidth و maxWidth ؟ ليس width ؟ نظرًا لأنني جربته بالفعل ، إذا كنت تريد جعل العمود بعرض ثابت ، فيجب عليك استخدام minWidth و maxWidth بدلاً من width . لم أكن أعرف السبب ، ولكن يبدو أن width لا يعمل على حل هذه المشكلة.

ملاحظة: _ يجب أن يكون لكل من TableCell في TableHead و TableBody اللذان يحتويان على نفس البيانات ، نفس النمط ! _

آمل أن يساعدك هذا الرمز يا رفاق ، في صحتك

لقد قمت بالفعل بتعيين العرض: 10٪ ، minWidth: 10٪ و maxWidth: 10٪ لكل TableCell بما في ذلك تلك الموجودة أسفل رؤوس الجدول. ثم شرعت في إنشاء عناصر <colgroup>..etc وطبقت نفس الأنماط عليهم أيضًا. قمت أيضًا بتعيين عنصر الجدول على tableLayout: auto and width: auto. لقد جربت كل حل منفرد في هذا الموضوع ودمجتهم جميعًا في هذا الناتج النهائي. بالإضافة إلى ذلك ، استخدمت أيضًا أداة "فحص العنصر" في الكروم واختراق كل عنصر على الطاولة لاستخدام العرض: 10٪ min-width: 10٪ and max-width: 10٪. وقد انعكس هذا أيضًا في فاحص React في أدوات التطوير. لقد أظهر لي حرفيًا جميع العناصر التي تغيرت كـ "عرض 10٪" إلخ.

النتيجة: ما زال لا يضبط عرض الأعمدة

أعتقد أنه من الآمن الافتراض الآن أن هناك بالفعل مستحيل موجود. وهو في هذا الموضوع بالذات

تعديل:

لقد انتهيت بالفعل من القيام بشيء كان ضد ما يقترحه الأشخاص في هذا الموضوع ... لقد قمت بتعيين autoLayout: ثابت في الجدول الخاص بي وبدأ العمل. ما هو هذا السحر الأسود في العالم

كما تواجه صعوبة في محاولة تحديد العروض. اضطررت إلى ضبط عرض خانة الاختيار: 0.01٪ لتبقى في عرض معقول ، لا شيء آخر يعمل

بالنسبة لأولئك الذين تمسكوا بالإصدار القديم من هذا والذين يعانون من تذييل الصفحة ، فإن إضافة FixFooter = {false} إلى حل devenovil يعمل بالنسبة لي.

nathanmarks هل يمكنك على الأقل توضيح سبب إغلاق هذا؟
يجب أن تكون هذه ميزة مطلوبة متكررة جدًا.

pbassut على حق. هذه ميزة أساسية جدًا لمكون الجدول ... هل هناك أي تحديث؟
أو شرح سبب صعوبة التنفيذ ...

devenovil بدلاً من maxWidth ، إذا كنت تريد استخدام % ، فيمكنك استخدام width مثل:

<TableCell style={{ width: '35%' }}>
  Table Data
</TableCell>
<TableCell>
  Another Table Data
</TableCell>

بالنسبة لي ، فقد عملت على تعيين العرض للخلايا الموجودة في الرأس فقط: <TableCell width={props.colWidths[index] + '%'}> ، مما أدى إلى تصرف أعمدة الجدول بالكامل كما هو متوقع.

لقد قمت بتعيين عرض العمود مع النسبة المئوية ويعمل نوعًا ما ، ولكن لسبب ما ، فإنه يضيف عمودًا وهميًا في أقصى اليمين. من خلال فحص العنصر ، يبدو أنه يضيف عنصر "TableStubCell" إلى الجدول. ليس لدي أي فكرة عن المكان الذي جاء منه.

لقد واجهت مشكلات مماثلة مع جداول MUI الأخرى ، ولم تكن حلول عملي بهذه الروعة على الإطلاق. سيكون رائعًا إذا فتحت جميعًا هذه المشكلة وقمت بإصلاحها ... من الواضح أن الأشخاص الآخرين يكافحون معها أيضًا.

تحرير: جاء TableStubCell من حزمة dx-reaction-grid-material-ui npm ، لذا آسف لتوجيه أصابع الاتهام!

الحل هو أن أفعل

<Table>
  <TableHeader>
    <TableRow>
      <TableCell>
        <Box width="200px">
          User Fullname
        </Box>
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>

لكن سيكون من الرائع لو استطعنا فعل ذلك

<Table>
  <TableHeader>
    <TableRow>
      <TableCell width="200px">
        User Fullname
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>

يعمل هذا مع الإصدار "@material-ui/core": "4.9.0"

<TableContainer className={classes.container}>
          <Table className={classes.table} stickyHeader size="small">
            <TableHead>
              <TableRow>
                <TableCell width="30%">User Name</TableCell>
                <TableCell width="20%">Designation</TableCell>
                <TableCell width="10%">Nid</TableCell>
                <TableCell width="20%">Email</TableCell>
                <TableCell width="10%">Mobile</TableCell>
                <TableCell width="10%">Gender</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {props.isGridLoading && (
                <TableRow>
                  <TableCell colSpan={6}>
                    <LoadingGridSpinner open={props.isGridLoading} />
                  </TableCell>
                </TableRow>
              )}

              {props.profileObj.lists &&
                props.profileObj.lists.map(row => (
                  <TableRow key={row.userProfileId} hover={true}>
                    <TableCell width="30%">
                      {row.userName}
                    </TableCell>
                    <TableCell width="20%">{row.designation}</TableCell>
                    <TableCell width="10%">{row.nid}</TableCell>
                    <TableCell width="20%">{row.email}</TableCell>
                    <TableCell width="10%">{row.mobile}</TableCell>
                    <TableCell width="10%">{row.gender}</TableCell>
                  </TableRow>
                ))}
            </TableBody>
          </Table>

الطريقة التي استخدمها nazrulcsebd و crizant عملت معي. هذا هو الكود الخاص بي:

<TableContainer component={Paper} style={{ marginTop: 10 }}>
          <Table style={{ width: 'auto', tableLayout: 'auto' }}>
          <TableHead>
            <TableRow>
              <TableCell>Team Member</TableCell>
              <TableCell align="left">Level</TableCell>
              <TableCell align="left">Last Login</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            { tableArray.map(({ id, name, accessLevel, login }) => (
              <TableRow key={id}>
                <TableCell component="th" scope="row" style={{ width: '35%' }}>
                  {name}
                </TableCell>
                <TableCell align="left">{accessLevel}</TableCell>
                <TableCell align="left">{login}</TableCell>
              </TableRow>
            ))
          }
          </TableBody>
        </Table>
      </TableContainer>

في حالتي ، كنت أرغب في الحصول على أصغر عمود ممكن للاحتفاظ بزر "إجراء" في نهاية الجدول. أدت إضافة style={{ width: 1 }} إلى TableCell في TableHead إلى الحيلة.

        <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
                <TableHead>
                    <TableRow>
                        {header.map((th, i) => (
                            <TableCell key={i}>{th}</TableCell>
                        ))}
                        <TableCell style={{ width: 1 }}>actions</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map((row, i) => (
                        <TableRow key={i} hover>
                            {header.map((h, i) => (
                                <TableCell key={i} align="left">{row[h]}</TableCell>
                            ))}
                            <TableCell>
                                <IconButton aria-label="edit">
                                    <MoreHorizIcon fontSize="small" />
                                </IconButton>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
const useStyles = makeStyles(theme => ({
  table: {
    "& tr:nth-child(2), & td:nth-child(2) {
      width: '32px',
    }
  }
}));

وبعد ذلك ، استخدم النمط في جذر الجدول

 <Table
     ....
     className={classes.table}
>

لم تختبر كثيرًا بعد (العنوان الثابت ، إلخ)

سيكون من الأفضل بكثير إذا كان بإمكاننا إعطاء نفس نظام 12 عمودًا للجداول على سبيل المثال:

   <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row" xs={4}>
                {row.name}
              </TableCell>
              <TableCell align="right" xs={2}>{row.calories}</TableCell>
              <TableCell align="right" xs={2}>{row.fat}</TableCell>
              <TableCell align="right" xs={2}>{row.carbs}</TableCell>
              <TableCell align="right" xs={2}>{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>

هل يعرف أي شخص طريقة للسماح للجدول بالتمرير في الاتجاه x إذا كان هناك عدد كبير جدًا من الأعمدة؟ أنا قادر فقط على تحقيق ذلك من خلال إعطاء minWidth = شيء مشفر (وهو ليس رائعًا لعدد غير معروف من الأعمدة)

يبدو أنه تم تجاهل fixedHeader={false} style={{width: "auto", tableLayout: "auto"}} في الإصدار الأخير.

أيه أفكار؟

انتهى بي الأمر بحل بديل باستخدام عنصر قائمة داخل الجدول ، وتحديد عرض عنصر القائمة ...
شيء مثل:

<TableCell>
  <ul style={{ width: "150px" }}>
    <li>{row.whatever}</li>
    <li>{row.whatever1}</li>
    <li>{row.whatever2}</li>
  </ul>
</TableCell>

2020 وما زال من الصعب تحقيقه ، الجزء الأكثر غرابة هو أنني أحاول ضبط عرض العمود ، والأعمدة الأخرى تضبط نفسها تلقائيًا حتى عندما حددت العرض لها! ما يعطي؟ يبدو الأمر كما لو أن الطاولة تتأكد من أن عرض الطاولة بالكامل لا يتجاوز 100٪ وهذا ما يجعلني أشعر بوقت عصيب. إذا لم أكن أستخدم جدول المواد ، فسيكون ذلك سهلاً للغاية ، ويبدو أن واجهة المستخدم المادية تجعل الأمر صعبًا فقط؟

aprilmintacpineda هل <table> ؟

oliviertassinari لم أحول الكود الحالي إلى العنصر الأصلي <table> .

يعمل هذا المثال من خلال تحديد عرض جميع الأعمدة
https://codesandbox.io/s/fragrant-framework-oy6uz؟file=/src/App.js

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات