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' в каждой ячейке таблицы для обработки переполнения.

Вы не можете безопасно переключиться на table-layout: 'auto' так как таблица затем будет бесконечно расти вместе со своим содержимым, если вы не удалите вышеупомянутую опцию css с пустым пространством. И если ты сделаешь это,
вы больше не можете использовать опору fixedHeader={true} , поскольку в этом случае заголовки содержатся в отдельной таблице: cry :.

Будем признательны за некоторые отзывы.

То, что я делал, чтобы установить ширину столбцов, предназначено для

Вы не можете безопасно переключиться на table-layout: 'auto', так как таблица затем бесконечно растет вместе со своим содержимым

Как насчет настройки ширины заголовка таблицы, когда ширина tableRowColumn изменяется вместе с содержимым?
Кажется, я не могу настроить его так, чтобы эти 2 были выровнены.

Я предполагаю, что вы либо используете fixedHeader={true} и не можете установить произвольную ширину, либо вы этого не делаете и должны держать свои заголовки внутри <TableBody> .

Хорошо, размещение заголовка в tbody работает! Теперь мне нужно понять, как делать многострочные столбцы заголовков. Какие-нибудь советы?

Вы пытаетесь достичь что - то вроде этого ? (в противном случае вы, вероятно, найдете подходящий пример на этом веб-сайте)

Я думаю, вы можете делать практически все, что захотите, с атрибутами colSpan для TableHeaderColumn и TableRowColumn и rowSpan для TableRow .

Я не понимаю - почему это закрыто?

Помещение TableHeader в TableBody не работает для меня.

@ tvtri96
Мы предложили поместить tableRow в качестве tableheader в 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>

и столбцы заголовка правильно выровнены со столбцами основного текста.

Спасибо, что ответили мне. Что находится внутри 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 , Спасибо, что

@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 столбцов, но сумма моих colspans равна 20 - последний содержит только значок для удаления, большинство других - colspan 3 - большое текстовое поле - colspan 6, а поле выбора и 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>

Также можно указать ширину в процентах, остальные ячейки занимают одинаковую площадь

Как я могу использовать это решение, если мне нужно использовать 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 , содержащие одинаковые данные , должны иметь одинаковый стиль ! _

Надеюсь, этот код поможет вам, ребята, ура

Я буквально установил width: 10%, minWidth: 10% и maxWidth: 10% для каждой ячейки TableCell, включая те, которые находятся под заголовками таблиц. Затем я приступил к созданию элементов <colgroup>..etc и применил к ним те же стили. Я также установил для элемента Table значение tableLayout: auto и width: auto. Я пробовал каждое решение в этом потоке и объединил их все в один окончательный результат. Кроме того, я также использовал инструмент «проверить элемент» в хроме и взломал каждый элемент в таблице, чтобы использовать ширину: 10%, минимальную ширину: 10% и максимальную ширину: 10%. это также нашло отражение в инспекторе React в инструментах разработки. он буквально показал мне, что все элементы меняются как «ширина 10%» и т. д.

результат: по-прежнему не регулирует ширину столбцов

Я думаю, теперь можно с уверенностью предположить, что на самом деле существует невозможное. и именно в этой теме

Редактировать:

На самом деле я сделал что-то, что противоречило тому, что предлагали люди в этом потоке ... Я установил autoLayout: fixed в своей таблице, и он начал работать. Что это за черная магия

Также не получается установить ширину. Пришлось установить ширину флажка выбора: 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, и мои обходные пути никогда не были такими уж хорошими. Было бы здорово, если бы вы открыли эту проблему и исправили ее ... очевидно, что другие люди тоже борются с этим.

edit: TableStubCell поступил из пакета npm dx-react-grid-material-ui, так что извините за то, что вы указываете пальцами!

Мое решение - сделать

<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%, это доставляет мне трудности. Если бы я не использовал таблицу material-ui, это было бы очень просто, кажется, материальный UI только усложнил задачу?

@aprilmintacpineda Вы пробовали использовать собственные элементы <table> ?

@oliviertassinari Я не преобразовывал существующий код в собственный элемент <table> .

Этот пример работает, устанавливая ширину всех столбцов
https://codesandbox.io/s/fragrant-framework-oy6uz?file=/src/App.js