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

وصف المشكلة

عندما يحتوي الجدول على العديد من الأعمدة بحيث لا يمكن عرضها في وقت واحد ، يظهر شريط تمرير أفقي بشكل افتراضي. عند استخدام شريط التمرير هذا ، يتم تمرير الرأس كما هو متوقع ، ولكن يتم قطع جسم الجدول نظرًا لأنه تم إخفاء تجاوز السعة. إضافة `bodyStyle = {{height: 'inherit'، overflow: 'auto'}} إلى مكوّن الجدول ينتج عنه شريط تمرير أفقي ثانٍ ، أحدهما يتحكم في الجسم بشكل صحيح ، والآخر يتحكم في الرأس.

خطوات التكاثر

      <Table>
        <TableHeader>
          <TableRow>
            {this.props.tableHeader.map((col, i) =>
              <TableHeaderColumn style={{ width: 100 }} key={i}>{col}</TableHeaderColumn>
            )}
          </TableRow>
        </TableHeader>
        <TableBody preScanRows={false}>
          {this.props.tableData.map((row, i) => (
            <TableRow key={i}>
              {this.props.tableHeader.map((col, j) => (
                <TableRowColumn style={{ width: 100 }} key={j}>{row[col]}</TableRowColumn>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>

إصدارات

• واجهة المستخدم المادية: 0.15.0
• رد الفعل: 15.0.2
• المتصفح: Chrome 50.0.2661.102 (64 بت)