Исправлен заголовок и высота таблицы в Material-UI@next (v1.0.0-beta.8)

В [email protected] есть реквизиты для высоты таблицы и фиксированного заголовка таблицы, но, к сожалению, они не реализованы в Material-UI@next. Есть ли обходной путь, чтобы добиться того же, используя Material-UI@next?

Я попытался перейти на версию 0.19.1 и перестроить свой компонент таблицы, используя эту версию, но это оставляет мне новую ошибку, связанную с множественным выбором (https://github.com/callemall/material-ui/issues/5964).

Любые предложения о том, как решить любую из этих проблем?


reactjs material-ui
person Lahey    schedule 06.09.2017    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Если вы используете текущую версию пользовательского интерфейса материалов (v4.5.1), вы можете просто добавить свойство stickyHeader в свою таблицу на эта демонстрация.

<Table stickyHeader>
  ...
</Table>
person Derek Soike    schedule 18.10.2019
comment
При использовании stickyHeader prop внешний css, примененный к заголовку таблицы, не работает. Любое предложение? - person Ankit Jaishwal; 03.02.2021

arrow_upward
1
arrow_downward

Пробовали ли вы добавить position: "sticky" к компонентам заголовка TableCell?

Я не уверен, что это будет работать с вашей версией пользовательского интерфейса материала, но в моем случае (v3.0.2) класс CSS выглядит так:

header: {
    background-color: '#fff',
    position: 'sticky',
    top: 0,
},

А затем просто применить для каждой TableCell:

<TableCell
   className={header}>
   {yourLabel}
</TableCell>
person jckmlczk    schedule 06.09.2018

arrow_upward
-1
arrow_downward

Заголовок липкого пользовательского интерфейса материала не работает с длинной таблицей и большим объемом данных, поэтому вам нужно удалить все липкие классы и поместить эти пользовательские css в код, и заголовок вашей таблицы будет липким.

.tableFixHeader {
  overflow-y: auto;
  max-height: 600px;
}

.tableFixHeader thead th {
  position: sticky;
  top: 0px;
  z-index: 1;
}

/* Just common table stuff. Really. */
table {
  border-collapse: collapse;
  width: 100%;
  overflow: unset !important;
  position: relative;
}

thead th {
  background: $ultra-light-grey !important;
  box-shadow: 1px 0px 0px 1px $silver;
}

table th .css-yk16xz-control {
  background: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<TableContainer className="tableFixHeader" >
                <Table
                    className=""
                    id=""
                    size={dense ? 'small' : 'medium'}
                >
                <TableHead>
            <TableRow>
            <TableCell>
            .......
            </TableCell>
            </TableRow>
             <TableBody>
             ........
             </TableBody>
        </TableHead>
        </Table>
            </TableContainer>

person hemant rao    schedule 25.09.2020