Material-ui: [Tabel] Tetapkan lebar kolom tabel

+1

Tidak ada yang istimewa tentang ini:

const colWidth {
    width: '2rem'
};

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

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

tidak berperilaku terlalu baik dengan TableHeaderColumn

Apakah ada cara untuk menetapkan lebar kolom berdasarkan konten secara dinamis?

Di tabel HTML vanilla saya, lebar kolom diatur secara otomatis tergantung pada konten. material-ui tampaknya menerapkan lebar yang sama pada semua kolom. Apakah ada cara untuk mengatur lebar kolom menjadi dinamis, seperti tabel HTML vanilla?

@sanfilippopablo , <Table> menggunakan prop table-layout: 'fixed' css, yang mengarah ke semua kolom yang memiliki lebar yang sama, dikombinasikan dengan white-space: 'nowrap' pada setiap sel tabel untuk menangani overflow.

Anda tidak dapat dengan aman beralih ke table-layout: 'auto' karena tabel kemudian tumbuh tak terbatas dengan isinya kecuali Anda menghapus prop css ruang putih yang disebutkan di atas. Dan jika Anda melakukan ini,
Anda tidak dapat menggunakan prop fixedHeader={true} lagi karena header kemudian terdapat dalam tabel terpisah: cry :

Beberapa umpan balik akan sangat dihargai.

Apa yang telah saya lakukan untuk mengatur lebar kolom adalah untuk

Anda tidak dapat dengan aman beralih ke tata letak tabel: 'otomatis' karena tabel kemudian tumbuh tanpa batas dengan kontennya

Bagaimana dengan menyesuaikan lebar tajuk tabel saat lebar tableRowColumn berubah dengan konten?
Sepertinya saya tidak bisa mengaturnya sehingga 2 itu sejajar.

Saya rasa Anda menggunakan fixedHeader={true} dan tidak dapat menyetel lebar khusus atau tidak dan harus menyimpan header Anda di dalam <TableBody> .

Oke, menempatkan tajuk di tbody berfungsi! Sekarang saya perlu mencari cara untuk membuat kolom header multi-baris. Ada tips?

Apakah Anda mencoba mencapai sesuatu seperti ini ? (jika tidak, Anda mungkin dapat menemukan contoh yang tepat di situs web ini)

Saya pikir Anda dapat melakukan hampir semua yang Anda inginkan dengan atribut colSpan pada TableHeaderColumn dan TableRowColumn dan rowSpan pada TableRow .

Saya tidak mengerti - mengapa ini ditutup?

Menempatkan TableHeader di TableBody tidak berhasil untuk saya.

@septianjoko_
Apa yang kami sarankan adalah meletakkan tableRow yang bertindak sebagai kepala meja di tableBody,
tapi bagi saya sepertinya sekarang berfungsi dengan baik.

ini adalah tampilannya sekarang di kode saya:

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

dan kolom tajuk disejajarkan dengan kolom isi dengan benar.

Tks telah menjawab saya. Apa yang ada di dalam TableHeaderComponent? Saya kira ini tidak seperti TableHeader biasa kan?
``

Stempel waktu

Ya, itu hanya dibungkus karena alasan.

Ada berita tentang ini? Bagaimana cara membiarkan kolom menyesuaikan secara otomatis dengan konten?

Ini berfungsi untuk saya, pengaturan ukuran otomatis:

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

@jangan_ketiak

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

Ini tidak berpengaruh pada header.

<Table fixedHeader={false} style={{ tableLayout: 'auto' }}> bekerja (ukuran dinamis berdasarkan konten).

Saya perlu menambahkan width: "auto" , yang menghasilkan:

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

@nathanmarks , Harap buka kembali.

Table harus memiliki properti bawaan untuk memungkinkannya menyesuaikan ukuran otomatis ke konten, dan tidak perlu menonaktifkan fixedHeader . Saya akan melangkah lebih jauh dan mengatakan ukuran otomatis ke konten harus menjadi perilaku default.

@devuxer Maaf, tapi kami tidak secara proaktif menambahkan fitur ke cabang v0.x.

@mbrookes , Terima kasih telah memberi tahu kami. Apakah Anda mengatakan Tabel di v1.x memecahkan masalah ini?

@devuxer Saya percaya begitu, itu ditulis ulang dari bawah ke atas.

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

Saya memiliki tabel dengan tiga kolom, di mana kolom pertama dan ketiga akan selalu berisi sedikit teks. Saya ingin kolom kedua mengambil sebagian besar ruang sehingga kolom pertama dan ketiga masing-masing akan didorong ke tepi kiri dan kanan tabel. Ini berhasil untuk saya (menggunakan style sini sebagai lawan dari className untuk singkatnya):

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

Saya menemukan solusi yang lebih baik ... jadi, setiap kolom memiliki lebar yang sama.
Katakanlah saya memiliki tiga kolom, dan saya ingin yang pertama mengambil setengah dari keseluruhan lebar, dan yang ketiga harus sekitar sepertiga dari baris; yang di tengah menjadi yang terkecil:

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

Sebenarnya, saya punya 7 kolom, tapi jumlah kolom saya sama dengan 20 - kolom terakhir hanya menyimpan ikon untuk dihapus, sebagian besar kolom lainnya adalah colspan 3 - kolom teks besar adalah colspan 6, dan kolom pilihan dan datepicker adalah pada colspan 2 ...

Bekerja seperti pesona!

Ini bagus untuk dilanjutkan di 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>

Dapat juga memberikan lebar persentase, sel-sel lainnya memiliki rentang yang sama

Bagaimana saya bisa menggunakan solusi ini jika saya harus menggunakan colspan={2} di baris TableHead?

Jika saya menambahkan colspan={2} semua kolom akan memiliki lebar yang sama. Sesuatu seperti ini:

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 Jika Anda ingin mengubah colspan = {2} lebar sel coba ubah lebar tabel, karena itu mencakup seluruh tabel. Sel yang lebih kecil dapat disesuaikan secara individual.

Menerapkan gaya ini entah bagaimana membantu saya:
Saya hanya duduk berbeda maxWidth untuk sel yang berbeda berturut-turut tetapi sama di setiap kolom menggunakan gaya sebaris.

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

Tidak ada solusi yang diposting di atas berfungsi. Mengapa ini sangat sulit untuk dicapai?

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

kolom kedua adalah flex

Tidak yakin apakah ada yang masih mengalami masalah dengan ini, tetapi saya akhirnya menggunakan withStyles dan berhasil, inilah pseudo Code:

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

Tidak ada solusi yang diposting di atas berfungsi. Mengapa ini sangat sulit untuk dicapai?

Entah bagaimana saya tahu mengapa ini tidak berhasil, karena kami hanya menetapkan width hanya untuk TableHead atau TableBody ! Untuk membuatnya bekerja, kita harus mendefinisikan minWidth dan maxWidth pada TableCell dalam TableHead dan TableBody , berikut contohnya

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

Seperti yang Anda lihat, kita bisa menggunakan kedua nilai untuk gaya dengan integer dan string. Tetapi untuk string, itu hanya berfungsi jika Anda mendefinisikannya dengan px , jika Anda menggunakan persentase, seperti minWidth:'25%' , itu tidak akan berfungsi , saya sudah mencobanya.

Mengapa saya menggunakan minWidth dan maxWidth ? Bukan width ? Karena saya sudah mencobanya, jika Anda ingin membuat kolom Anda dengan lebar tetap, Anda harus menggunakan minWidth dan maxWidth bukan width . Saya tidak tahu mengapa, tetapi width tampaknya tidak berhasil untuk menyelesaikan masalah ini.

Catatan: _Kedua TableCell di TableHead dan TableBody yang berisi data yang sama , harus mempunyai gaya yang sama ! _

Saya harap kode ini membantu kalian, selamat

Saya benar-benar mengatur lebar: 10%, minWidth: 10% dan maxWidth: 10% untuk setiap TableCell termasuk yang di bawah header tabel. Saya kemudian melanjutkan untuk membuat elemen <colgroup>..etc dan menerapkan gaya yang sama pada mereka juga. saya juga menyetel elemen Tabel ke tableLayout: auto dan width: auto. saya mencoba setiap solusi di utas ini dan menggabungkan semuanya ke satu hasil akhir ini. Selain itu, saya juga menggunakan alat "inspect element" di chrome dan meretas setiap elemen pada tabel untuk menggunakan width: 10% min-width: 10% dan max-width: 10%. ini juga tercermin di inspecter React di devtools. itu benar-benar menunjukkan kepada saya semua elemen yang saya ubah sebagai "lebar 10%" dll.

Hasilnya: lebar kolom masih belum diatur

Saya pikir aman untuk berasumsi sekarang bahwa sebenarnya ada sesuatu yang tidak mungkin ada. dan itu ada di utas ini

Edit:

Saya benar-benar akhirnya melakukan sesuatu yang bertentangan dengan saran orang-orang di utas ini ... saya menyetel autoLayout: tetap di tabel saya dan mulai berfungsi. Apa di dunia sihir hitam ini

Juga mengalami waktu yang buruk mencoba mengatur lebar. Harus mengatur lebar kotak centang pilih: 0,01% agar tetap pada lebar yang wajar, tidak ada yang berfungsi

Bagi mereka yang terjebak di versi lama ini dan berjuang dengan footer, menambahkan fixedFooter = {false} ke solusi @devenovil cocok untuk saya.

@nathanmarks Bisakah Anda setidaknya menjelaskan mengapa Anda menutup ini?
Ini harus menjadi fitur wajib yang sangat berulang.

@pbassut benar. Ini adalah fitur yang sangat mendasar untuk komponen tabel ... Apakah ada pembaruan?
Atau penjelasan mengapa penerapannya begitu problematis ...

@devenovil Daripada maxWidth , jika Anda ingin menggunakan % , Anda dapat menggunakan width seperti:

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

Bagi saya, ini berfungsi untuk mengatur lebar hanya untuk sel di header: <TableCell width={props.colWidths[index] + '%'}> , ini menghasilkan kolom untuk seluruh tabel yang berperilaku seperti yang diharapkan.

Saya mengatur lebar kolom dengan persentase dan itu berfungsi, tetapi untuk beberapa alasan, itu menambahkan kolom hantu di paling kanan. Melalui pemeriksaan elemen, tampaknya menambahkan elemen "TableStubCell" ke tabel. Saya tidak tahu dari mana asalnya.

Saya memiliki masalah serupa dengan tabel MUI lainnya, dan solusi saya tidak pernah sebaik itu. Akan keren jika Anda membuka masalah ini dan memperbaikinya ... jelas orang lain juga berjuang dengan itu.

edit: TableStubCell berasal dari paket dx-react-grid-material-ui npm, jadi maaf karena telah menunjuk jari!

Solusi saya adalah melakukannya

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

Tapi alangkah baiknya jika kita bisa melakukannya

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

Ini berfungsi untuk saya dengan versi "@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>

Pendekatan yang digunakan oleh @nazrulcsebd dan @crizant berhasil untuk saya. Ini kode saya:

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

Dalam kasus saya, saya ingin memiliki kolom sekecil mungkin untuk menahan tombol "tindakan" di akhir tabel. Menambahkan style={{ width: 1 }} ke TableCell di TableHead berhasil.

        <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',
    }
  }
}));

Dan kemudian, gunakan gaya di root tabel

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

Belum banyak menguji (Fixed header, dll)

akan jauh lebih baik jika kita bisa memberikan sistem 12 kolom yang sama ke tabel misalnya:

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

Adakah yang tahu cara untuk membiarkan tabel bergulir ke arah x jika terdapat terlalu banyak kolom? Saya hanya dapat membuat ini terjadi dengan memberikan minWidth = sesuatu yang di-hardcode (yang tidak bagus untuk jumlah kolom yang tidak diketahui)

Sepertinya fixedHeader={false} style={{width: "auto", tableLayout: "auto"}} diabaikan pada versi terbaru.

Ada ide?

Saya berakhir dengan solusi menggunakan elemen daftar di dalam tabel, dan menentukan lebar item daftar ...
Sesuatu seperti:

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

Tahun 2020 dan masih sulit untuk dicapai, bagian yang paling aneh adalah saya mencoba mengatur lebar kolom, kolom lain secara otomatis menyesuaikan diri bahkan ketika saya juga menentukan lebar untuk mereka! apa yang memberi? Ini seperti tabel yang memastikan lebar seluruh tabel tidak melebihi 100% ini membuat saya kesulitan. Jika saya tidak menggunakan tabel material-ui ini akan sangat mudah, sepertinya UI material hanya membuatnya sulit?

@aprilmintacpineda Apakah Anda mencoba dengan elemen asli <table> ?

@oliviertassinari Saya tidak mengubah kode yang ada menjadi elemen asli <table> .

Contoh ini bekerja dengan mengatur lebar semua kolom
https://codesandbox.io/s/fragrant-framework-oy6uz?file=/src/App.js