Material-ui: 【テーブル】テーブルの列幅を設定する

+1

これについて特別なことは何もありません：

const colWidth {
    width: '2rem'
};

<TableRowColumn style={ colWidth }>
    ...
</TableRowColumn>

<TableRowColumn style={{ width: 100 }}>

TableHeaderColumnではうまく動作しません

コンテンツに基づいて列の幅を動的に割り当てる方法はありますか？

私のバニラHTMLテーブルでは、列の幅はコンテンツに応じて自動的に設定されます。 material-uiは、すべての列に同じ幅を適用しているようです。 バニラHTMLテーブルのように、代わりに列の幅を動的に設定する方法はありますか？

@sanfilippopablo 、 <Table>はtable-layout: 'fixed' cssプロパティを使用し、すべての列が同じ幅になり、すべてのテーブルセルでwhite-space: 'nowrap'と組み合わされてオーバーフローを処理します。

上記の空白のcsspropを削除しない限り、テーブルはその内容とともに無限に大きくなるため、 table-layout: 'auto'に安全に切り替えることはできません。 そして、これを行うと、
ヘッダーが別のテーブル： cry：に含まれるため、 fixedHeader={true}プロパティを使用できなくなります。

いくつかのフィードバックをいただければ幸いです。

列の幅を設定するために私が行ってきたのは、

テーブルレイアウトに安全に切り替えることはできません： 'auto'は、テーブルがその内容とともに無限に大きくなるためです。

tableRowColumnの幅がコンテンツによって変化する場合、テーブルヘッダーの幅を調整するのはどうですか？
これら2つが揃っているように設定できないようです。

fixedHeader={true}を使用してカスタム幅を設定できないか、ヘッダーを<TableBody>内に保持する必要がないかのどちらかだと思います。

さて、tbodyにヘッダーを配置することは機能します！ 次に、複数行のヘッダー列を作成する方法を理解する必要があります。 任意のヒント？

あなたはこのようなことを達成しようとしていますか？ （そうでない場合は、おそらくこのWebサイトで正しい例を見つけることができます）

私はあなたが属性を持つあなたが望むほとんどすべてを行うことができると思いますcolSpanにTableHeaderColumnとTableRowColumnにとROWSPAN TableRow 。

わかりません-なぜこれが閉じられているのですか？

TableHeaderをTableBodyに配置しても機能しません。

@ tvtri96
私たちが提案したのは、tableBodyのテーブルヘッダーとして機能するtableRowを配置することでした。
しかし、今は正常に機能しているように見えます。

これは私のコードで今どのように見えるかです：

<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>

ヘッダー列は本文列と正しく整列されます。

私に答えてくれてありがとう。 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/

3列のテーブルがあり、1列目と3列目には常に少量のテキストが含まれていました。 2番目の列がスペースの大部分を占めるようにして、1番目と3番目の列がそれぞれテーブルの左端と右端にプッシュされるようにしました。 これは私にとってはうまくいきました（簡潔にするためにclassNameではなくここでstyleます）：

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

より良い解決策を見つけました...したがって、すべての列の幅は同じです。
たとえば、3つの列があり、最初の列が全体の幅の半分を占め、3番目の列が行の約3分の1になるようにします。 真ん中のものが最小のものです：

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

実際、私は7つの列を持っていますが、私のcolspanの合計は20に等しくなります-最後の列は削除用のアイコンのみを保持し、他のほとんどはcolspan3です-大きなテキストフィールドはcolspan6であり、selectfieldとdatepickerはcolspan2で..。

チャームのように機能します！

これは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>

パーセンテージ幅を与えることもでき、残りのセルは均等に広がります

TableHead行でcolspan={2}を使用する必要がある場合、このソリューションをどのように使用できますか？

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>

2番目の列はフレックスです

誰かがまだこれに問題があるかどうかはわかりませんが、私は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})

上記のソリューションはどれも機能しません。 なぜこれを達成するのがとても難しいのですか？

TableHeadまたはTableBodyにのみwidth設定しているので、どういうわけかそれが機能しない理由を認識しています！ これを機能させるにTableCell 、 TableHeadとTableBody TableCellにminWidthとmaxWidthボットを定義する必要があります。ここでは例を示します。

<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ませんか？ すでに試しているので、固定幅で列を作成する場合は、 width代わりにminWidthとmaxWidth使用する必要があります。 理由はわかりませんでしたが、 widthではこの問題を解決できないようです。

注：_同じデータをTableHeadとTableBody両方のTableCellは、同じスタイルである必要があります！_

このコードが皆さんのお役に立てば幸いです

私は文字通り、幅：10％、最小幅：10％、最大幅：10％を、テーブルヘッダーの下にあるものを含むすべてのTableCellに設定しました。 次に、 <colgroup>..etc要素の作成に進み、同じスタイルをそれらにも適用しました。 また、Table要素をtableLayout：autoおよびwidth：autoに設定します。 私はこのスレッドのすべてのソリューションを試し、それらすべてをこの1つの最終出力に結合しました。 さらに、クロムの「要素の検査」ツールを利用し、テーブル上のすべての要素をハッキングして、幅：10％、最小幅：10％、最大幅：10％を使用しました。 これは、devtoolsのReactインスペクターにも反映されていました。 文字通り、すべての要素が「幅10％」などに変更されていることがわかりました。

結果：まだ列の幅を調整しません

実際には不可能が存在すると仮定しても安全だと思います。 そしてそれはまさにこのスレッドにあります

編集：

私は実際にこのスレッドの人々が示唆していることに反する何かをすることになりました...私はautoLayoutを設定しました：私のテーブルで修正され、それは働き始めました。 この黒魔術は一体何なのか

また、幅を設定しようとして苦労しています。 選択チェックボックスの幅を設定する必要がありました：妥当な幅を維持するために0.01％、他には何も機能しません

これの古いバージョンに固執し、フッターに苦労している人にとっては、fixedFooter = {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-react-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>

私の場合、テーブルの最後に「アクション」ボタンを保持できる最小の列が必要でした。 TableHeadのTableCellにstyle={{ width: 1 }}を追加すると、うまくいきました。

        <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％を超えないようにテーブルが確認しているようで、これは私に苦労を与えています。 私がmaterial-uiのテーブルを使用していなかった場合、これは非常に簡単ですが、マテリアルUIはそれを難し​​くしただけのようですか？

@aprilmintacpinedaネイティブの<table>要素を試してみましたか？

@oliviertassinari既存のコードをネイティブの<table>要素に変換しません

この例は、すべての列の幅を設定することで機能します
https://codesandbox.io/s/fragrant-framework-oy6uz?file=/src/App.js