Material-ui: [표] 표 열 너비 설정

+1

이것에 대해 특별한 것은 없습니다.

const colWidth {
    width: '2rem'
};

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

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

TableHeaderColumn 너무 잘 작동하지 않습니다.

콘텐츠를 기반으로 col의 너비를 동적으로 할당하는 방법이 있습니까?

내 바닐라 HTML 테이블에서 열 너비는 내용에 따라 자동으로 설정됩니다. material-ui는 모든 열에 동일한 너비를 적용하는 것 같습니다. 바닐라 HTML 테이블처럼 열 너비를 동적으로 설정하는 방법이 있습니까?

@sanfilippopablo , <Table> 는 table-layout: 'fixed' css prop을 사용하여 오버플로를 처리하기 위해 모든 테이블 셀에서 white-space: 'nowrap' 와 결합 된 너비가 동일한 모든 열을 만듭니다.

위에서 언급 한 공백 CSS 소품을 제거하지 않는 한 테이블이 내용과 함께 무한히 커지기 때문에 table-layout: 'auto' 안전하게 전환 할 수 없습니다. 이렇게하면
헤더가 별도의 테이블 : cry :에 포함되므로 더 이상 fixedHeader={true} prop을 사용할 수 없습니다 .

일부 의견을 주시면 감사하겠습니다.

열의 너비를 설정하기 위해 내가 한 일은

테이블 레이아웃 : '자동'으로 안전하게 전환 할 수 없습니다. 그러면 테이블이 내용과 함께 무한히 커지기 때문입니다.

tableRowColumn 너비가 내용에 따라 변경 될 때 테이블 헤더 너비를 조정하는 것은 어떻습니까?
나는 그것을 설정할 수 없어서 그 2가 정렬됩니다.

나는 당신이 fixedHeader={true} 하고 사용자 정의 너비를 설정할 수 없거나 헤더를 <TableBody> 안에 보관해야한다고 생각합니다.

좋아, tbody에 헤더를 넣는 것이 작동합니다! 이제 여러 줄 헤더 열을 수행하는 방법을 알아 내야합니다. 팁이 있습니까?

당신은 같은 것을 달성하려고 이 ? (아니라면이 웹 사이트에서 올바른 예를 찾을 수있을 것입니다.)

TableHeaderColumn colSpan TableHeaderColumn 및 TableRowColumn 및 TableRow rowSpan 속성으로 원하는 모든 작업을 수행 할 수 있다고 생각합니다.

이해가 안 돼요-왜 닫혀 있나요?

TableBody에 TableHeader를 넣는 것은 나를 위해 작동하지 않습니다.

뿡뿡
우리가 제안한 것은 tableBody에 tableheader 역할을하는 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/

세 개의 열이있는 테이블이 있는데 첫 번째 열과 세 번째 열에는 항상 적은 양의 텍스트가 포함됩니다. 두 번째 열이 공간의 대부분을 차지하여 첫 번째 열과 세 번째 열이 각각 테이블의 왼쪽과 오른쪽 가장자리로 밀려나 길 원했습니다. 이것은 나를 위해 일했습니다 (간결성을 위해 className 대신 style ).

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

더 나은 해결책을 찾았습니다. 따라서 모든 열의 너비가 동일합니다.
세 개의 열이 있고 첫 번째 열이 전체 너비의 절반을 차지하고 세 번째 열이 행의 약 1/3이되어야한다고 가정 해 보겠습니다. 중간에있는 것이 가장 작은 것입니다.

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

실제로 7 개의 열이 있지만 내 colspan의 합계는 20입니다. 마지막 열에는 삭제 아이콘 만 있고 다른 열의 대부분은 colspan 3입니다. 큰 텍스트 필드는 colspan 6이고 selectfield와 datepicker는 colspan 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>

또한 백분율 너비를 제공 할 수 있으며 나머지 셀은 동일하게 확장됩니다.

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>

두 번째 콜럼은 플렉스입니다

누구든지 여전히 이것에 문제가 있는지 확실하지 않지만 결국 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 만 설정했기 때문에 어떻게해서 작동하지 않는지 알 수 있습니다! 제대로 작동하려면 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 아닙니까? 나는 이미 그것을 시도하기 때문에 고정 너비와 열을 확인하려면, 당신은 사용해야 minWidth 및 maxWidth 대신 width . 이유를 몰랐지만 width 이이 문제를 해결하는 데 도움이되지 않는 것 같습니다.

참고 :의 _Both TableCell 에서 TableHead 및 TableBody 같은 데이터를 포함하는, 같은 스타일이 있어야합니다 _!

이 코드가 여러분에게 도움이되기를 바랍니다.

나는 말 그대로 width : 10 %, minWidth : 10 % 및 maxWidth : 10 %를 테이블 헤더 아래의 것을 포함하여 모든 단일 TableCell에 설정했습니다. 그런 다음 계속해서 <colgroup>..etc 요소를 만들고 동일한 스타일을 적용했습니다. 또한 Table 요소를 tableLayout : auto 및 width : auto로 설정했습니다. 이 스레드에서 모든 단일 솔루션을 시도하고 모두이 하나의 최종 출력에 결합했습니다. 또한 크롬에서 "요소 검사"도구를 사용하고 테이블의 모든 단일 요소를 해킹하여 너비 : 10 % 최소 너비 : 10 % 및 최대 너비 : 10 %를 사용했습니다. 이것은 devtools의 React inspecter에도 반영되었습니다. 말 그대로 모든 요소가 "너비 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 = hardcoded (알 수없는 수의 열에는 적합하지 않음)를 지정하여이 문제를 해결할 수 있습니다.

최신 버전에서는 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의 테이블을 사용하지 않았다면 이것은 매우 쉬울 것입니다. material UI가 어렵게 만들었 을까요?

@aprilmintacpineda 네이티브 <table> 요소를 사용해 보셨습니까?

@oliviertassinari 기존 코드를 네이티브 <table> 요소로 변환하지 않았습니다.

이 예제는 모든 열의 너비를 설정하여 작동합니다.
https://codesandbox.io/s/fragrant-framework-oy6uz?file=/src/App.js